web js的alert弹出框,有时候并不是我们想要的,但是有时候又想给用户友好的提示,看了android的toast提示框也可在web前端实现,下面是参考一个人的源码稍作修改做的
// JavaScript Document
// prompt message
function warn(msg,opt,left,top){
if(opt){
var obj = $("#"+opt);
}
new Toast({context:$('body'),message:msg},obj,left,top).show();
}
var Toast = function(config,obj,left,top){
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 = (screen.availHeight/4)*3;//距容器上方的距离
if(obj){
this.left = obj.offset().left + left;
this.top = obj.offset().top + 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':'12px',padding:'5px',margin:'5px','border-radius':'4px','-moz-border-radius':'4px','-webkit-border-radius':'4px',opacity:'0.5','font-family':'微软雅黑'});
//msgEntity.addClass(".toast");
msgEntity.hide();
},
//显示动画
show :function(){
msgEntity.fadeIn(this.time/2);
msgEntity.fadeOut(this.time/2);
}
}
分享到:
相关推荐
c# winform 类似android toast消息功能 超级强大,多个项目在用,可插拔,封装好了,拿去就可以用了
Toast 实现了类似 Android Toast 风格的弹出提示信息框,支持图片。
Android 统一管理项目中的Toast弹出框,这样项目中的弹出框就不会重复
React Native Toast 一个用于android和ios类似于android toast提示控件,android使用原生toast, ios使用UIView Toast
IOS上类似android上得toast第三方工具,
Android Toast使用解析附代码,实现类似WEB开发中的弹出层效果,当用户点击一个链接或操作按钮时,会弹出一个操作层(浮动层)或浮动菜单,进而执行下一步操作。本源码是使用Android中的Toast对象来模拟实现网页中的...
常常开发都需要用到Toast提示框 可以优化系统自带的Toast提示框
Android Toast 自定义背景、图片 随心使用
主要完成3中形式的Toast: 1、标准形式 2、设置位置形式 3、带图片的Toast
类似于Android的toas,支持更新显示的内容
Android Toast 工具类
使用Qt Widget Application技术实现桌面操作系统下类似Android的toast控件效果。Demo中实现为多线程的单例模式。
vue 类似安卓 IOS的toast 提示框 比如 登录成功后就可以使用
android Toast大全(五种情形)建立属于你自己的Toast
全局Toast工具类,作用:连续显示toast提示时取消上一个toast 通过ToastUtil.toast(Context(), "文本")调用
多次点击Toast只弹一次提示
1、Toast Handler handler = new Handler(Looper.getMainLooper()); handler.post(new Runnable() { @Override public void run() { ...2、弹出框 2.1默认样式 android.support.v7.app.AlertDialog.Builder b