首页 > 代码库 > layui中的layer使用

layui中的layer使用

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7         <title>layui中的layer</title>
  8         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  9         <script type="text/javascript" src="layer-v3.0.3/layer/layer.js"></script>
 10     </head>
 11 
 12     <body>
 13 
 14         <button id="func1" onclick="func1();">初体验</button>
 15         <button id="func2" onclick="func2();">皮肤</button>
 16         <button id="func3" onclick="func3();">询问框</button>
 17         <button id="func4" onclick="func4();">提示层</button>
 18         <button id="func5" onclick="func5();">蓝色风格</button>
 19         <button id="func6" onclick="func6();">捕捉页</button>
 20         <button id="func7" onclick="func7();">页面层</button>
 21         <button id="func8" onclick="func8();">自定义</button>
 22         <button id="func9" onclick="func9();">tips层</button>
 23         <button id="func10" onclick="func10();">iframe层</button>
 24         <button id="func11" onclick="func11();">iframe窗</button>
 25         <button id="func12" onclick="func12();">加载层</button>
 26         <button id="func13" onclick="func13();">loading层</button>
 27         <button id="func14" onclick="func14();">小tips</button>
 28         <button id="func15" onclick="func15();">prompt层</button>
 29         <button id="func16" onclick="func16();">tab层</button>
 30         <button id="openpage" onclick="openpage();">openpage</button>
 31 
 32         
 33     </body>
 34     <script type="text/javascript">
 35         function func1() {
 36             layer.alert(内容);
 37         }
 38 
 39         function func2() {
 40             layer.alert(内容, {
 41                 icon: 1,
 42                 skin: layer-ext-moon //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅
 43             });
 44         }
 45 
 46         function func3() {
 47             //询问框
 48             layer.confirm(您是如何看待前端开发?, {
 49                 btn: [重要, 奇葩] //按钮
 50             }, function() {
 51                 layer.msg(的确很重要, {
 52                     icon: 1
 53                 });
 54             }, function() {
 55                 layer.msg(也可以这样, {
 56                     time: 2000, //2s后自动关闭
 57                     btn: [明白了, 知道了]
 58                 });
 59             });
 60         }
 61 
 62         function func4() {
 63             //提示层
 64             layer.msg(玩命提示中);
 65         }
 66 
 67         function func5() {
 68             //墨绿深蓝风
 69             layer.alert(墨绿风格,点击确认看深蓝, {
 70                 skin: layui-layer-molv //样式类名
 71                     ,
 72                 closeBtn: 0
 73             }, function() {
 74                 layer.alert(偶吧深蓝style, {
 75                     skin: layui-layer-lan,
 76                     closeBtn: 0,
 77                     shift: 4 //动画类型
 78                 });
 79             });
 80         }
 81 
 82         function func6() {
 83             //捕获页
 84             layer.open({
 85                 type: 1,
 86                 shade: false,
 87                 title: false, //不显示标题
 88                 content: $(.layer_notice), //捕获的元素
 89                 cancel: function(index) {
 90                     layer.close(index);
 91                     this.content.show();
 92                     layer.msg(捕获就是从页面已经存在的元素上,包裹layer的结构, {
 93                         time: 2000,
 94                         icon: 6
 95                     });
 96                 }
 97             });
 98         }
 99 
100         function func7() {
101             //页面层
102             layer.open({
103                 type: 1,
104                 skin: layui-layer-rim, //加上边框
105                 area: [420px, 240px], //宽高
106                 content: html内容
107             });
108         }
109 
110         function func8() {
111             //自定页
112             layer.open({
113                 type: 1,
114                 skin: layui-layer-demo, //样式类名
115                 closeBtn: 0, //不显示关闭按钮
116                 shift: 2,
117                 area: [420px, 240px], //宽高
118                 shadeClose: true, //开启遮罩关闭
119                 content: 内容
120             });
121         }
122 
123         function func9() {
124             //tips层
125             layer.tips(Hi,我是tips, $("#tips"));
126         }
127 
128         function func10() {
129             //iframe层
130             layer.open({
131                 type: 2,
132                 title: layer mobile页,
133                 shadeClose: true,
134                 shade: 0.8,
135                 area: [380px, 90%],
136                 content: http://m.baidu.com //iframe的url
137             });
138         }
139 
140         function func11() {
141             //iframe窗
142             layer.open({
143                 type: 2,
144                 title: false,
145                 closeBtn: 0, //不显示关闭按钮
146                 shade: [0],
147                 area: [340px, 215px],
148                 offset: auto, //右下角弹出
149                 time: 2000, //2秒后自动关闭
150                 shift: 2,
151                 content: [test/guodu.html, no], //iframe的url,no代表不显示滚动条
152                 end: function() { //此处用于演示
153                     layer.open({
154                         type: 2,
155                         title: 百度一下,你就知道,
156                         shadeClose: true,
157                         shade: false,
158                         maxmin: true, //开启最大化最小化按钮
159                         area: [1150px, 650px],
160                         content: http://www.baidu.com
161                     });
162                 }
163             });
164         }
165 
166         function func12() {
167             //加载层
168             var index = layer.load(0, {
169                 shade: false
170             }); //0代表加载的风格,支持0-2
171         }
172 
173         function func13() {
174             //loading层
175             var index = layer.load(1, {
176                 shade: [0.1, #fff] //0.1透明度的白色背景
177             });
178         }
179 
180         function func14() {
181             //小tips
182             layer.tips(我是另外一个tips,只不过我长得跟之前那位稍有些不一样。, $(#tips2), {
183                 tips: [1, #3595CC],
184                 time: 4000
185             });
186         }
187 
188         function func15() {
189 
190             //prompt层
191             layer.prompt({
192                 title: 输入任何口令,并确认,
193                 formType: 1 //prompt风格,支持0-2
194             }, function(pass) {
195                 layer.prompt({
196                     title: 随便写点啥,并确认,
197                     formType: 2
198                 }, function(text) {
199                     layer.msg(演示完毕!您的口令: + pass +  您最后写下了: + text);
200                 });
201             });
202         }
203 
204         function func16() {
205             //tab层
206             layer.tab({
207                 area: [600px, 300px],
208                 tab: [{
209                     title: TAB1,
210                     content: 内容1
211                 }, {
212                     title: TAB2,
213                     content: 内容2
214                 }, {
215                     title: TAB3,
216                     content: 内容3
217                 }]
218             });
219         }
220 
221         function openpage() {
222             layer.config({
223                 extend: extend/layer.ext.js
224             });
225             //页面一打开就执行,放入ready是为了layer所需配件(css、扩展模块)加载完毕
226             layer.ready(function() {
227                 //官网欢迎页
228                 layer.open({
229                     type: 2,
230                     skin: layui-layer-lan,
231                     title: layer弹层组件,
232                     fix: false,
233                     shadeClose: true,
234                     maxmin: true,
235                     area: [1000px, 500px],
236                     content: https://www.baidu.com
237                 });
238                 layer.msg(欢迎使用layer);
239             });
240         }
241     </script>
242 
243 </html>

 

layui中的layer使用