web弹层组件-layer封装的工具类
来源:互联网 发布:带网络驱动精灵 编辑:程序博客网 时间:2024/05/16 17:42
var colseTime = 2000;//2s/** * layer 是提示消息封装工具类 */var Layer = { /** * 警告框 closeBtn:提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则closeBtn: 0 * @param {} content 警示的内容 * @param {} title 警示的标题,如果为空默认为提示信息 */ showAlert : function(content,title){ var options = {icon:0,time:colseTime,closeBtn:0,btn:0,title:"提示信息",skin:'layui-layer-molv'}; if(title==null){ layer.alert(content,options); }else{ $.extend(options.title,title); layer.alert(content,options); } }, /** * 操作成功提示框 * @param {} content 提示内容 默认:操作成功 * @param {} callback 回调方法 */ showSucAlert : function (content,callback){ var length = arguments.length ; // 实际传入参数的长度 var options = {icon:1,time:colseTime,btn:0,closeBtn:0,skin:'layui-layer-molv'}; if(length == 0){ // 没有传入任何参数 layer.alert("操作成功",options); }else if(length == 1){ // 传入了提示内容 layer.alert(content,options); }else if(length == 2){ // 有回调函数的,将不自动关闭 layer.alert(content,{icon:1},callback); } }, /** * 加载消息提示框 2s后自动关闭 * @param {} content 提示内容 * @param {} callback 回调函数 */ showLoad : function(){ layer.load(0, {shade: false,time:colseTime}); //0代表加载的风格,支持0-2 }, /** * tips消息提示框 * @param {} divId 绑定元素的id * @param {} content 提示内容 */ showTips : function(divId,content){ $('#'+divId).on('click', function(){ var that = this; layer.tips(content, that); //在元素的事件回调体中,follow直接赋予this即可 }); }, /** * 操作失败提示框 * @param {} content 提示内容 默认:操作失败 * @param {} time 关闭时间(单位毫秒) 默认:1S,0:表示不自动关闭 */ showFailAlert : function(content,time){ var length = arguments.length ; // 实际传入参数的长度 var options = {icon:2,time:colseTime}; if(length == 0){ // 没有传入任何参数 layer.alert("操作失败",options); }else if(length == 1){ // 传入了提示内容 layer.alert(content,options); }else if(length == 2){ // 传入了关闭时间 options.time = time ; layer.alert(content,options); } }, /** * 打开一个对话框(没有回调函数) * @param {} title 对话框标题(必须) * @param {} url 对话框URL(必须) * @param {} width 对话框宽度 默认:800px * @param {} height 对话框高低 默认:600px */ openDialogNoCallBack : function(title,url,width,height){ layer.open({ type : 2, title : title , content : url , maxmin: true, area: [width, height] }); }, /** * 获取当前的窗口对象 * @return {} */ getCurrentWin : function(){ return this.topWin.frames['ifr_center'] ; }, /** * 打开一个对话框(带回调函数) * @param {} title 对话框标题(必须) * @param {} url 对话框URL(必须) * @param {} width 对话框宽度 默认:800px * @param {} height 对话框高低 默认:600px */ openDialogWithCallBack : function(title,url,width,height,callback){ layer.open({ type : 2, title : title , content : url , area: [width, height], maxmin: true, end : callback }); }, /** * 打开一个对话框(没有回调函数) * @param {} title 对话框标题(必须) * @param {} url 对话框URL(必须) * @param {} width 对话框宽度 默认:800px * @param {} height 对话框高低 默认:600px * @param {} callback 窗口销毁时的回调方法 */ openDialog : function(title,url,width,height,callback){ var length = arguments.length ; // 实际传入参数的长度 if(length == 2){ // 默认宽高 this.openDialogNoCallBack(title,url,this.width,this.height) }else if(length == 3){ // 只传入宽度参数 width += this.px ; this.openDialogNoCallBack(title,url,width,this.height) }else if(length == 4){ // 传入宽度和高度 width += this.px ; height += this.px ; this.openDialogNoCallBack(title,url,width,height) }else if(length == 5){ // 带回调函数 width += this.px ; height += this.px ; this.openDialogWithCallBack(title,url,width,height,callback); } }, /** * 关闭弹出层 * @param {} index */ closeLayer : function(index){ layer.close(index); }, /** * 关闭所有的Dialog */ closeDialog : function(){ layer.closeAll('iframe'); }, /** * 关闭Dialog带有操作成功的提示 * @param {} content */ closeDialogWithMsg : function(content){ layer.closeAll('iframe'); if(!content) content = "操作成功" ; this.showSucMsg(content); }, /** * 显示提示框 * @param {} content */ showMsg : function(content,callback){ layer.msg(content,{time:colseTime},callback) ; }, /** * 显示操作成功的提示框 * @param {} content */ showSucMsg : function(content,callback){ if(!content) content = "操作成功" ; layer.msg(content,{icon: 1,time:colseTime},callback) ; }, /** * 显示验证框 * @param {} content 提示内容 * @param {} title 提示标题 * @param {} yesFunction 确定以后的回调函数 */ showConfirm : function(content,title,yesFunction){ var options = { btn: ['确定', '取消'], icon : 3, title:title, skin:'layui-layer-molv' }; layer.confirm(content,options,yesFunction); } };
0 0
- web弹层组件-layer封装的工具类
- web弹层组件layer
- Web 弹层组件-layer
- web弹层解决方案:layer组件
- layer.open web弹层组件
- layer 弹层WEB
- jQuery Layer 弹层组件
- 关闭layer组件当前的弹层的方法
- Layer 一款web弹层组件(弹出层、日期选择、分页、LayIM接口文档)
- layer 弹层组件下的 iframe 交互详细教程
- 谈层组件layer封装网页消息提示
- web弹出层组件之js组件layer
- 页面弹出层组件layer的用法
- layer弹层组件1.8发布
- layui.layer 弹层组件文档
- 前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)
- 非常好的web弹出层框架 -- layer
- 非常好的web弹出层框架 -- layer
- Mavlink地面站编写之五—MP源码多线程读写框架分析
- unable to load dynamic library php_curl.dll
- mysql 如何查询插入数据表和数据结构
- Jdbc 查询oracle数据时间错误
- springMVC利用WebArgumentResolver为controller注入当前用户对象参数
- web弹层组件-layer封装的工具类
- PHP开发起步
- 儿童写字桌的产品功能和环保性要求
- 更愉快的书写CSS
- echarts 鼠标悬浮提示
- Hibernate异常等问题
- Java容器类总结
- 分析:大数据失败案例及背后原因!
- 关于nginx反向代理后session问题