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>