弹出框layer的使用封装
layer弹出框官方网址：http://layer.layui.com/
layer常用方法的封装：layerTool.jsp
layer.config({ extend: 'extend/layer.ext.js', //注意，目录是相对layer.js根目录。如果加载多个，则 [a.js, b.js, …] shift: 0//默认动画风格 }); function Layer(){} ; Layer.prototype = { toplayer : window.top.layer , // 获取顶层窗口的layer对象 topWin : window.top , // 获取顶层窗口对象 colseTime : 1000 , // 关闭弹出框的默认时间 1S width : '800px', // 默认窗口的宽度 height : '600px', // 默认窗口的高度 px : 'px' , // 对话框宽高单位 /** * 警告框 * @param {} content 警示的内容 */ showAlert : function(content){ this.toplayer.alert(content,{icon:0}); }, /** * 操作成功提示框 * @param {} content 提示内容 默认：操作成功 * @param {} callback 回调方法 */ showSucAlert : function (content,callback){ var length = arguments.length ; // 实际传入参数的长度 var options = {icon:1,time:this.colseTime}; if(length == 0){ // 没有传入任何参数 this.toplayer.alert("操作成功",options); }else if(length == 1){ // 传入了提示内容 this.toplayer.alert(content,options); }else if(length == 2){ // 有回调函数的,将不自动关闭 this.toplayer.alert(content,{icon:1},callback); } }, /** * 操作失败提示框 * @param {} content 提示内容 默认：操作失败 * @param {} time 关闭时间(单位毫秒) 默认：1S,0:表示不自动关闭 */ showFailAlert : function(content,time){ var length = arguments.length ; // 实际传入参数的长度 var options = {icon:2,time:this.colseTime}; if(length == 0){ // 没有传入任何参数 this.toplayer.alert("操作失败",options); }else if(length == 1){ // 传入了提示内容 this.toplayer.alert(content,options); }else if(length == 2){ // 传入了关闭时间 options.time = time ; this.toplayer.alert(content,options); } }, /** * 打开一个对话框(没有回调函数) * @param {} title 对话框标题(必须) * @param {} url 对话框URL(必须) * @param {} width 对话框宽度 默认：800px * @param {} height 对话框高低 默认：600px */ openDialogNoCallBack : function(title,url,width,height){ this.toplayer.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){ this.toplayer.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){ this.toplayer.close(index); }, /** * 关闭所有的Dialog */ closeDialog : function(){ this.toplayer.closeAll('iframe'); }, /** * 关闭Dialog带有操作成功的提示 * @param {} content */ closeDialogWithMsg : function(content){ this.toplayer.closeAll('iframe'); if(!content) content = "操作成功" ; this.showSucMsg(content); }, /** * 显示提示框 * @param {} content */ showMsg : function(content){ this.toplayer.msg(content,{time:this.colseTime}) ; }, /** * 显示操作成功的提示框 * @param {} content */ showSucMsg : function(content){ if(!content) content = "操作成功" ; this.toplayer.msg(content,{icon: 1,time:this.colseTime}) ; }, /** * 显示验证框 * @param {} content 提示内容 * @param {} yesFunction 确定以后的回调函数 */ showConfirm : function(content,yesFunction){ this.toplayer.confirm(content,{ btn: ['确定', '取消'], icon : 3 },yesFunction); } }; var Layer = new Layer();
<!--Demo-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>LayerDemo演示</title> <script type="text/javascript" src="/ydzf/scripts/plugin/jquery/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="/ydzf/scripts/plugin/layer/layer.js"></script> <script type="text/javascript" src="/ydzf/scripts/plugin/layer/layerTool.js"></script> </head> <body> <h2>LayerDemo演示</h2> Alter <button onclick="Layer.showAlert('有问题了啊');">alert</button> <button onclick="Layer.showSucAlert();">操作成功提示框</button> <button onclick="Layer.showSucAlert('我成功了',showCall);">操作成功提示框+自定义提示内容+回调方法</button> <button onclick="Layer.showFailAlert();">操作失败提示框</button> <button onclick="Layer.showFailAlert('我失败了',0);">操作失败提示框+自定义提示内容+不自动关闭</button> <br/> OpenDialog <button onclick="Layer.openDialog('我是Open窗口','demo02Edit.jsp');">对话框</button> <button onclick="Layer.openDialog('我是Open窗口','demo02Edit.jsp',400);">对话框+自定义宽</button> <button onclick="Layer.openDialog('我是Open窗口','demo02Edit.jsp',500,500);">对话框+自定义宽高</button> <br/> Message <button onclick="Layer.showMsg('我只是简单的提示一下');">对话框</button> <button onclick="Layer.showSucMsg('我是成功的提示框')">成功的提示框</button> <br/> Confirm <button onclick="Layer.showConfirm('你确定要这样操作吗',function(index){alert('是的')});">Confirm对话框</button> <script type="text/javascript"> function showCall(index){ alert("我是回调奥"+index); Layer.closeLayer(index); } </script> </body> </html>
