jquery layer弹窗弹层插件 (转)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery layer弹窗弹层插件 (转)相关的知识,希望对你有一定的参考价值。

  1. /* 
  2. 先去官网下载最新的js  http://sentsin.com/jquery/layer/ 
  3. ①引用jquery 
  4. ②引用layer.min.js 
  5. */  
  6.   
  7. 触发弹层的事件可自由绑定,如:  
  8. $(‘#id‘).on(‘click‘, function(){  
  9.     layer.msg(‘test‘);  
  10. });  
  11. 下面主要贴出上述例子的调用代码:  
  12. 【信息框】:  
  13. layer.alert(‘白菜级别前端攻城师贤心‘, 8); //风格一  
  14. layer.msg(‘前端攻城师贤心‘); //风格二  
  15. //当然,远远不止这两种风格。  
  16.   
  17. 【询问框】:  
  18. $.layer({  
  19.     shade: [0],  
  20.     area: [‘auto‘,‘auto‘],  
  21.     dialog: {  
  22.         msg: ‘您是如何看待前端开发?‘,  
  23.         btns: 2,                      
  24.         type: 4,  
  25.         btn: [‘重要‘,‘奇葩‘],  
  26.         yes: function(){  
  27.             layer.msg(‘重要‘, 1, 1);  
  28.         }, no: function(){  
  29.             layer.msg(‘奇葩‘, 1, 13);  
  30.         }  
  31.     }  
  32. });  
  33. //还可用layer.confirm()快捷调用  
  34.   
  35. 【页面层一】  
  36. $.layer({  
  37.     type: 1,  
  38.     shade: [0],  
  39.     area: [‘auto‘, ‘auto‘],  
  40.     title: false,  
  41.     border: [0],  
  42.     page: {dom : ‘.layer_notice‘}  
  43. });  
  44.   
  45. 【页面层二】  
  46. var pageii = $.layer({  
  47.     type: 1,  
  48.     title: false,  
  49.     area: [‘auto‘, ‘auto‘],  
  50.     border: [0], //去掉默认边框  
  51.     shade: [0], //去掉遮罩  
  52.     closeBtn: [0, false], //去掉默认关闭按钮  
  53.     shift: ‘left‘, //从左动画弹出  
  54.     page: {  
  55.         html‘<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; "><p>我从左边来,我自定了风格。</p><button id="pagebtn" class="btns" onclick="">关闭</button></div>‘  
  56.     }  
  57. });  
  58. //自设关闭  
  59. $(‘#pagebtn‘).on(‘click‘, function(){  
  60.     layer.close(pageii);  
  61. });  
  62.   
  63. 【iframe层一】  
  64. $.layer({  
  65.     type: 2,  
  66.     shadeClose: true,  
  67.     title: false,  
  68.     closeBtn: [0, false],  
  69.     shade: [0.8, ‘#000‘],  
  70.     border: [0],  
  71.     offset: [‘20px‘,‘‘],  
  72.     area: [‘1000px‘, ($(window).height() - 50) +‘px‘],  
  73.     iframe: {src: ‘http://f2e.sentsin.com/chat‘}  
  74. });   
  75.   
  76. 【iframe层二】  
  77. layer.tips(‘5秒后右下角窗口自动关闭,并生成一个新的iframe‘, this, {  
  78.     time: 5,  
  79.     maxWidth: 260  
  80. });  
  81. $.layer({  
  82.     type: 2,  
  83.     closeBtn: false,  
  84.     shadeClose: true,  
  85.     shade: [0.1, ‘#fff‘],  
  86.     border: [0],  
  87.     time: 5,  
  88.     iframe: {  
  89.         src: ‘test/guodu.html‘  
  90.     },  
  91.     title: false,  
  92.     area: [‘300px‘,‘250px‘],  
  93.     shift: ‘right-bottom‘,  
  94.     end: function(){  
  95.         $.layer({  
  96.             type : 2,  
  97.             title: ‘贤心博客 - sentsin.com‘,  
  98.             shadeClose: true,  
  99.             maxmin: true,  
  100.             fix : false,    
  101.             area: [‘1024px‘, 500],                       
  102.             iframe: {  
  103.                 src : ‘http://sentsin.com/‘  
  104.             }   
  105.         });  
  106.     }  
  107. });  
  108.   
  109. 【加载层一】  
  110. layer.load(3);  
  111.   
  112. 【加载层二】  
  113. layer.load(‘加载带文字‘, 3);  
  114.   
  115. 【tips层一】  
  116. layer.tips(‘tips的样式并非是固定的,您可自定义外观。‘, this, {  
  117.     style: [‘background-color:#78BA32; color:#fff‘, ‘#78BA32‘],  
  118.     maxWidth:185,  
  119.     time: 3,  
  120.     closeBtn:[0, true]  
  121. });  
  122.   
  123. 【tips层二】  
  124. layer.tips(‘默认没有关闭按钮‘, this , {guide: 1, time: 2});  
  125.   
  126. 【输入/文件层】  
  127. //普通文本  
  128. layer.prompt({title: ‘您的名字?‘}, function(name){  
  129.     alert(name);  
  130. });  
  131. //密码文本  
  132. layer.prompt({title: ‘输入任何口令,并确认‘,type: 1}, function(pass){  
  133.     alert(pass);  
  134. });  
  135. //文件上传  
  136. layer.prompt({title: ‘随便上传个东东,并确认‘,type: 2}, function(file){  
  137.     alert(file);  
  138. });  
  139. //多行文本  
  140. layer.prompt({title: ‘随便写点啥,并确认‘,type: 3}, function(val){  
  141.     alert(val);  
  142. });  
  143.   
  144. 【tab层】  
  145. layer.tab({  
  146.     area: [‘1000px‘, ‘500px‘],  
  147.     data: [  
  148.         {title: ‘Say‘, content:‘Hi,Main‘},  
  149.         {title: ‘无题‘, content:‘支持html传入‘}                      
  150.     ]  
  151. });  
  152.   
  153. 【相册层】  
  154. //此处为异步请求模式,具体的json格式,请等待文档更新。或者你直接通过请求看photos.json  
  155. var conf = {};  
  156. $.getJSON(‘ajax地址‘, {}, function(json){  
  157.     conf.photoJSON = json; //保存json,以便下次直接读取内存数据  
  158.     layer.photos({  
  159.         html: ‘这里传入自定义的html,也可以不用传入(这意味着不会输出右侧区域)。相册支持左右方向键、Esc关闭‘,  
  160.         json: json  
  161.     });  
  162. });  

以上是关于jquery layer弹窗弹层插件 (转)的主要内容,如果未能解决你的问题,请参考以下文章

入门layer

jquery 弹窗插件 layer 常见接口

layer(jQuery弹出层插件)

layer插件使用教程初步

jquery layer插件 ,拓展模块layer.ext.js没正确加载 不能调用layer.prompt方法。到底要怎么正确加载啊?

页面显示问题用layer插件