Jquery 仿 android Toast效果

JS代码如下:

/**
 * 模仿android里面的Toast效果,主要是用于在不打断程序正常执行的情况下显示提示数据
 * @param config
 * @return
 */
var Toast = function(config){
 this.context = config.context==null?$(‘body‘):config.context;//上下文
 this.message = config.message;//显示内容
 this.time = config.time==null?3000:config.time;//持续时间
 this.left = config.left;//距容器左边的距离
 this.top = config.top;//距容器上方的距离
 this.init();
}
var msgEntity;
Toast.prototype = {
 //初始化显示的位置内容等
 init : function(){
  $("#toastMessage").remove();
  //设置消息体
  var msgDIV = new Array();
  msgDIV.push(‘<div id="toastMessage">‘);
  msgDIV.push(‘<span>‘+this.message+‘</span>‘);
  msgDIV.push(‘</div>‘);
  msgEntity = $(msgDIV.join(‘‘)).appendTo(this.context);
  //设置消息样式
  var left = this.left == null ? this.context.width()/2-msgEntity.find(‘span‘).width()/2 : this.left;
  var top = this.top == null ? ‘20px‘ : this.top;
  msgEntity.css({position:‘absolute‘,top:top,‘z-index‘:‘99‘,left:left,‘background-color‘:‘black‘,color:‘white‘,‘font-size‘:‘18px‘,padding:‘10px‘,margin:‘10px‘});
  msgEntity.hide();
 },
 //显示动画
 show :function(){
  msgEntity.fadeIn(this.time/2);
  msgEntity.fadeOut(this.time/2);
 }
  
}

====================调用方法:

new Toast({context:$(‘body‘),message:‘Toast效果显示‘}).show();

时间: 2024-10-18 01:28:23

Jquery 仿 android Toast效果的相关文章

Android Toast效果

Android Toast效果是一种提醒方式,在程序中使用一些短小的信息通知用户,过一会儿会自动消失,实现如下: FirstActivity.java package org.elvalad.activitytest; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.Window; import android.widget.Button; i

jQuery仿Android锁屏图案应用插件

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery仿Android锁屏图案应用插件DEMO演示</title> <link href="css/patternLock.css" rel="stylesheet" type="text/css" /> <scr

javascript+jQuery:仿Android Toast提示框

Android应用中的Toast主要是用于向用户提示一些信息,其用意与javascript中的alert()方法相同,但是美感却比alert好,在轻应用中仿Android做出toast的效果更有原生App的体验感.   目的:在html页面产生仿Android的toast效果 语言:javascript+jQuery 方法声明:function toast(message, duration) 参数说明:string message - toast提示内容int duration - toast

JS仿Android Toast提示效果

注:这个需要jquery文件来提示支持,所以需要先调用Jquery. Toast JS文件: http://files.cnblogs.com/files/colinliu/toast.js 调用方法: new Toast({context:$('body'),message:'我是提示内容'}).show(); 效果:

jQuery仿3D旋转木马效果插件(带索引按钮)

项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就在jQuery的一款插件jquery.carousel.js的基础上进行了一些改进,不足的是,固定就是3张图片. 代码: html <!doctype html> <html lang="zh"> <head> <meta charset=&quo

jquery 仿手机屏幕切换界面效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Android仿IOS回弹效果 ScrollView回弹 总结

Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  需要仿IOS 下拉回弹的效果 , 我在网上搜了很多 大多数都是拿scrollview 改吧改吧 试了一些  发现总有点小问题 下面的代码是我对大家发布的做了点小修改   觉得没太大问题 package com.example.myscrollview; import android.content.Context; import android.graphics.Rect; import android.util

jquery仿新浪微博信息展播效果

jquery仿新浪微博信息展播效果:下面分享一个仿新浪微博的信息展播效果,具有缓冲效果,当然外观现在还不够美观,需要开发者执行再去完善.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <titl

jquery仿淘宝规格颜色选择效果

jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <style> dd,dl{zoom:1;ove