js外掛---layer.js使用體驗是怎樣

weixin_33816946發表於2018-09-03
JS

js外掛---layer.js使用體驗是怎樣

一、總結

一句話總結：只有jquery和js，沒有css，使用各種彈出層掉用各種函式特別方便，特別簡單，特別好用。

引入只需要引入這兩個，css都不需要，真方便（手機端用的話好像有自己的js和css）

 6     <script src="layer/jquery.min.js"></script>
 7     <script src="layer/layer.js"></script>

比如下面的彈出一個提示層

20   //彈出一個提示層
21   $('#test1').on('click', function(){
22     layer.msg('hello');
23   });

 

二、最簡單使用程式碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="layer/jquery.min.js"></script>
 7     <script src="layer/layer.js"></script>
 8 </head>
 9 <body>
10 
11 
12 <div id="test1">彈出一個提示層</div>
13 <div id="test2">彈出一個頁面層</div>
14 <div id="parentIframe">彈出一個iframe層</div>
15 <div id="test4">彈出一個loading層</div>
16 <div id="test5">彈出一個tips層</div>
17 
18 </body>
19 <script>
20   //彈出一個提示層
21   $('#test1').on('click', function(){
22     layer.msg('hello');
23   });
24   //彈出一個頁面層
25   $('#test2').on('click', function(){
26     layer.open({
27       type: 1,
28       area: ['600px', '360px'],
29       shadeClose: true, //點選遮罩關閉
30       content: '\<\div style="padding:20px;">自定義內容\<\/div>'
31     });
32   });
33   //彈出一個iframe層
34   $('#parentIframe').on('click', function(){
35     layer.open({
36       type: 2,
37       title: 'iframe父子操作',
38       maxmin: true,
39       shadeClose: true, //點選遮罩關閉層
40       area : ['800px' , '520px'],
41       content: 'test/iframe.html'
42     });
43   });
44   //彈出一個loading層
45   $('#test4').on('click', function(){
46     var ii = layer.load();
47     //此處用setTimeout演示ajax的回撥
48     setTimeout(function(){
49       layer.close(ii);
50     }, 1000);
51   });
52   //彈出一個tips層
53   $('#test5').on('click', function(){
54     layer.tips('向上的', '#test5', {
55       tips: 1
56     });
57   });
58 </script>
59 </html>

 

 

 

 

 

相關文章