JQuery Layer应用示例
来源：互联网 发布：申请哥伦比亚大学知乎 编辑：程序博客网 时间：2024/06/05 15:15
文章参考自：http://sentsin.com/jquery/layer/，本文中所使用到的属性和方法具体含义及使用可通过此链接进行查看。
layer，是一个很实用的基于JQuery开发的web弹窗（层）插件。layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现各种交互。
本文中列举了几个比较常用的Layer示例，比如我们经常见到的页面弹出登陆窗口、页面中弹出广告窗口等等，页面为layerTest.html,详细代码如下：
<!doctype html><html><head> <title>layerTest....</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script src="layer/layer.min.js"></script> <style> body{margin-top: 40px;text-align: left} #about_hide{display:none} .btn{ padding:3px 18px; background-color: #32cd32 } </style> <script> function advDiv(){ $.layer({ type : 2, closeBtn : false, shadeClose: true, time : 2, iframe : { src:'http://www.baidu.com' }, title : false, area : ['500px','300px'], success : function(){ //层加载成功后进行的回调 layer.shift('right-bottom',1000); //layer.shift(type , rate),layer弹出时内置动画， //在success回调中使用,type：动画类型，rate:频率，单位：毫秒 //当前设置为：浏览器右下角弹出,速率为1000ms }, end : function(){ //层关闭后执行的回调 layer.msg("层已关闭") } }); } $(function(){ //信息窗示例 $("#infoWin").click(function(event){ event.preventDefault(); /*layer.alert(alertMsg , alertType, alertTit , alertYes), 对单按钮信息框的重新封装 alertMsg：信息内容（文本） alertType：提示图标（整数，0-16的选择）,若不需要显示，可设置为-1 alertTit：标题（文本）, alertYes：按钮的回调函数。 */ layer.alert('hello，welcome to layer', 9,'信息框'); }); //确认框示例 $("#confWin").click(function(event){ event.preventDefault(); /*layer.confirm(conMsg , conYes , conTit , conNo) 对询问框的重新封装， conMsg：信息内容（文本）,conYes：按钮一回调, conTit：标题（文本） conNo：按钮二的回调。 */ layer.confirm('确定要删除本条记录？',function(){ //layer.msg(msgText, msgTime, parme),对无标题栏信息框层的重新封装， // msgText：信息内容（文本）， // msgTime：自动关闭所需等待秒数（默认2秒）， // 如果parme是一个数字，则将作为msg的图标参数， // 如果parme是一个函数，则将作为层消失后的end的回调， // 如果parme是一个object， // 可配置{type:图标类型,shade：false//是否遮罩，如果是，不用配置, // rate:'top'//弹出的动画类型，具体值见layer.shift的参数说明} layer.msg('删除成功',1,{shade:true}); },'删除数据',function(){ layer.msg('取消操作',1,{shade:false}); }); }); //提示框示例 $("#tipsWin").mouseover(function(event){ event.preventDefault(); /*layer.tips(html, follow, parme),对tips层的重新封装， html：信息内容（文本），follow：触发事件对应的选择器， parme是一个对象，其中包含了{time:自动关闭所需等待秒数, maxWidth:最大宽度, guide:指引方向, style: tips样式（参加api表格一中的style属性）, closeBtn:关闭按钮，默认为false}等参数 */ layer.tips('tips的样式并非是固定的，您可自定义外观。', this, { maxWidth:185, guide:1, closeBtn:[0,true] //显示关闭按钮 }); }); $("#pageLayerBtn").click(function(){ $.layer({ shade : false, type : 1, area : ['auto','auto'], title : false, border :[1 , 0.3 , '#000', true], //page : {dom : '#layer_notice'},//dom方式显示页面层 page:{html:'<div style="background-color:#90ee90;" id="layer_notice">'+//html方式 '111111111111111111111111111111<br>'+ '222222222222222222222222222222<br>'+ '333333333333333333333333333333'+ '</div>'}, close : function(index){ layer.close(index); } }); }); //弹出iFrame层示例 $("#login").click(function(){ $.layer({//$.layer() 核心接口，参数是一个JSON对象 type : 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层， //3：加载层，4：tips层，调用时必须设置。 border : [1 , 1 , 'gray', true], shade : [0.5 , '#000' , true], title : ['<div style="text-align: center"> 登录</div >',true], iframe : {src : 'html/login.html'}, area : ['400px' , '250px'], offset : ['100px',''], move : ['.xubox_title' , false] }); }); }) </script></head><body onload="advDiv()"><div style="text-align:left;margin-left: 80px"> <a href="" id="infoWin">单击时弹出信息窗</a><br><br> <a href="" id="confWin">单击时弹出确认框</a><br><br> <label id="tipsWin">鼠标移过来时,弹出提示框</label><br><br> <input type="button" value="页面层" id="pageLayerBtn" title="页面层示例" class="btn"><br><br> <div style="background-color:green;display: none" id="layer_notice"> 111111111111111111111111111111<br> 222222222222222222222222222222<br> 3333333333333333333333333333333 </div> <input id="login" class="btn" type="button" value="登 录" title="iFrame层示例"/></div></body></html>上述示例的登录页面，为位于layerTest.html所在目录的html目录下的login.html，具体代码如下：
<!doctype html><html><head> <title>layerTest....</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script src="layer/layer.min.js"></script> <style> body{margin-top: 40px;text-align: left} #about_hide{display:none} .btn{ padding:3px 18px; background-color: #32cd32 } </style> <script> function advDiv(){ $.layer({ type : 2, closeBtn : false, shadeClose: true, time : 2, iframe : { src:'http://www.baidu.com' }, title : false, area : ['500px','300px'], success : function(){ //层加载成功后进行的回调 layer.shift('right-bottom',1000); //layer.shift(type , rate),layer弹出时内置动画， //在success回调中使用,type：动画类型，rate:频率，单位：毫秒 //当前设置为：浏览器右下角弹出,速率为1000ms }, end : function(){ //层关闭后执行的回调 layer.msg("层已关闭") } }); } $(function(){ //信息窗示例 $("#infoWin").click(function(event){ event.preventDefault(); /*layer.alert(alertMsg , alertType, alertTit , alertYes), 对单按钮信息框的重新封装 alertMsg：信息内容（文本） alertType：提示图标（整数，0-16的选择）,若不需要显示，可设置为-1 alertTit：标题（文本）, alertYes：按钮的回调函数。 */ layer.alert('hello，welcome to layer', 9,'信息框'); }); //确认框示例 $("#confWin").click(function(event){ event.preventDefault(); /*layer.confirm(conMsg , conYes , conTit , conNo) 对询问框的重新封装， conMsg：信息内容（文本）,conYes：按钮一回调, conTit：标题（文本） conNo：按钮二的回调。 */ layer.confirm('确定要删除本条记录？',function(){ //layer.msg(msgText, msgTime, parme),对无标题栏信息框层的重新封装， // msgText：信息内容（文本）， // msgTime：自动关闭所需等待秒数（默认2秒）， // 如果parme是一个数字，则将作为msg的图标参数， // 如果parme是一个函数，则将作为层消失后的end的回调， // 如果parme是一个object， // 可配置{type:图标类型,shade：false//是否遮罩，如果是，不用配置, // rate:'top'//弹出的动画类型，具体值见layer.shift的参数说明} layer.msg('删除成功',1,{shade:true}); },'删除数据',function(){ layer.msg('取消操作',1,{shade:false}); }); }); //提示框示例 $("#tipsWin").mouseover(function(event){ event.preventDefault(); /*layer.tips(html, follow, parme),对tips层的重新封装， html：信息内容（文本），follow：触发事件对应的选择器， parme是一个对象，其中包含了{time:自动关闭所需等待秒数, maxWidth:最大宽度, guide:指引方向, style: tips样式（参加api表格一中的style属性）, closeBtn:关闭按钮，默认为false}等参数 */ layer.tips('tips的样式并非是固定的，您可自定义外观。', this, { maxWidth:185, guide:1, closeBtn:[0,true] //显示关闭按钮 }); }); $("#pageLayerBtn").click(function(){ $.layer({ shade : false, type : 1, area : ['auto','auto'], title : false, border :[1 , 0.3 , '#000', true], //page : {dom : '#layer_notice'}, page:{html:'<div style="background-color:#90ee90;" id="layer_notice">'+ '111111111111111111111111111111<br>'+ '222222222222222222222222222222<br>'+ '333333333333333333333333333333'+ '</div>'}, close : function(index){ layer.close(index); } }); }); //弹出页面层示例 $("#login").click(function(){ $.layer({//$.layer() 核心接口，参数是一个JSON对象 type : 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层， //3：加载层，4：tips层，调用时必须设置。 border : [1 , 1 , 'gray', true], shade : [0.5 , '#000' , true], title : ['<div style="text-align: left"> 登录</div >',true], iframe : {src : 'html/login.html'}, area : ['400px' , '250px'], offset : ['100px',''], move : ['.xubox_title' , false] }); }); }) </script></head><body onload="advDiv()"><div style="text-align:left;margin-left: 80px"> <a href="" id="infoWin">单击时弹出信息窗</a><br><br> <a href="" id="confWin">单击时弹出确认框</a><br><br> <label id="tipsWin">鼠标移过来时,弹出提示框</label><br><br> <input type="button" value="页面层" id="pageLayerBtn" title="页面层示例" class="btn"><br><br> <div style="background-color:green;display: none" id="layer_notice"> 111111111111111111111111111111<br> 222222222222222222222222222222<br> 3333333333333333333333333333333 </div> <input id="login" class="btn" type="button" value="登 录" title="iFrame层示例"/></div></body></html><!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>登录</title> <style> body { font-size: 16px; vertical-align: middle; } .login_main_div { background-color: green; clear: both; } .login_main_table { float: left; padding-left: 30px;margin-bottom: 0px; } #erroDiv { height: 15px; padding-top: 5px; padding-bottom: 5px; } .username,.userPwd { width: 220px; } .rememberPass_td { height:55px; } .loginBtn { border:medium none; background:#3f89ec; margin-left: 60px; height:35px; color:#fff; font-size:16px; cursor:pointer; font-weight:bold; width: 220px;; } .reg { font-family:Arial, Helvetica, STHeiti, "宋体"; color: #1b66c7; font-size:12px; text-decoration:none; float: right; cursor: pointer; } </style></head><body> <div class="login_main_div"> <table class="login_main_table" width="350" border="0" align="right" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <div id="erroDiv"> </div> </td> </tr> <tr> <td> 用户名: <input class="username" name="tbUserName" type="text" maxlength="25" id="tbUserName"> </td> </tr> <tr> <td style="padding-top: 12px"> 密 码 <input class="userPwd" name="tbPassword" type="password" maxlength="50" id="tbPassword"> </td> </tr> <tr> <td class="rememberPass_td"> <input id="passCheckbox" type="checkbox" name="memberPass"> <label> 记住密码 </label> <a target="_blank" href="" class="reg"> 立即注册 </a> </td> </tr> <tr > <td > <input id="login" value=登录 type="submit" class="loginBtn"> </td> </tr> </tbody></table> </div></body></html>运行结果如下：
转载来源：http://blog.csdn.net/zlj_blog/article/details/24994799
阅读全文
0 0
- JQuery Layer应用示例
- JQuery Layer应用示例
- jquery ui tabs应用示例
- jquery.validate.js 应用示例
- JQuery下拉框应用示例
- jQuery pjax 应用简单示例
- jQuery pjax 应用简单示例
- layer 弹出层 示例
- .NET MVC Jquery EasyUI 联合应用示例
- jquery 中ajax的应用示例
- JQuery 弹出layer
- JQuery-layer web弹窗层
- jQuery layer弹出层
- layer jquery 弹出层使用。
- jquery 弹窗插件 layer
- jQuery Layer 弹层组件
- layer，jquery，laydate前端组件
- jquery 中 layer的用法
- 概率分析和随机算法
- 简单的viewPager和PhotoView的实现
- Android动态生成图片验证码
- NYOJ-数数小木块
- 判断CMS-暴库-密码猜想
- JQuery Layer应用示例
- 设计模式之观察者模式
- 特殊的Daemon线程
- 元素等待————显式等待二
- 数字电路时序分析（二）
- 排序算法
- fastjson的基本使用方法
- 强化学习简明教程
- 数据结构之哈夫曼树
