学习android的时候感觉里面的Toast非常的方便,既可以清晰的提示用户当前操作的执行结果,又不会打断程序的正常运行,感觉在web里面加入这样一个功能也不错。
时间仓促,稍微写了一个简单的:
/**
* 模仿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();
效果图:
- 大小: 8.1 KB
分享到:
相关推荐
实现了一个类似android中toast效果
Android Toast 自定义背景、图片 随心使用
使用Qt Widget Application技术实现桌面操作系统下类似Android的toast控件效果。Demo中实现为多线程的单例模式。
JQuery信息提示框插件 jquery.toast.js 的使用,有详细的注释,可以直接使用
iOS中实现android中Toast的效果,封装的代码库,使用简单
Qt仿Android的toast控件效果,代码简明带有注释,低积分下载,可跨平台编译,已经在Windows以及Ubuntu Linux上亲测有效,适合初学者
Android Toast 工具类
android 带颜色的Toast效果+Toast位置设置
android Toast大全(五种情形)建立属于你自己的Toast
一个简单的Android样式MessageBox(Toast)。 依靠jQuery。 快速开始 记住要调用init函数以插入样式 Toast.init(); 那你可以试试 Toast("hello, world").show(); 更多 Toast({ text: "hello, world", time: ...
主要为大家详细介绍了android自定义Toast设定显示时间,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Android Toast各种使用方法及DEMO
前端版本的 Android Toast 效果.zip,Native-like toast notification but for the web.
全局Toast工具类,作用:连续显示toast提示时取消上一个toast 通过ToastUtil.toast(Context(), "文本")调用
React Native Toast 一个用于android和ios类似于android toast提示控件,android使用原生toast, ios使用UIView Toast
Android应用源码之五种效果的Toast.zip
一个简单的自定义Toast资源,您可以根据自己的需要更改我的代码即可实现您想要的效果(主要是更改xml文件的布局),这是androidstudio的项目,但是不妨碍在eclipse中使用,可以直接在eclipse中新建android项目,然后将...
最近在开发中我们经常会在适配5.0以后的机型遇到各种各样的问题,其中有一个不大不小的问题就是:Toast不显示问题,这篇文章就给大家总结了Android 5.0以上Toast不显示的原因与解决方法,有需要的朋友们可以参考借鉴...
Android Toast 大全 (五种形式) 建立属于自己的 Toast
Android Toast使用解析附代码,实现类似WEB开发中的弹出层效果,当用户点击一个链接或操作按钮时,会弹出一个操作层(浮动层)或浮动菜单,进而执行下一步操作。本源码是使用Android中的Toast对象来模拟实现网页中的...