layui中l(wèi)ayer彈層組件的應用

【layer簡介】

10年積累的網(wǎng)站制作、做網(wǎng)站經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有明水免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

layer，一個可以讓你想到即可做到的web彈窗（層）解決方案（js組件）。layer側(cè)重于用戶靈活的自定義，為不同人的使用習慣提供動力。其意義在于，可以讓您的頁面擁有更豐富與便捷的操作體驗，而您只需在調(diào)用時簡單地配置相關(guān)參數(shù)，即可輕松實現(xiàn)。

【注意事項】

一、使用時，請把文件夾layer整個放置在您站點的任何一個目錄，只需引入layer.js即可，除jQuery外，其它文件無需再引入。

二、如果您的js引入是通過合并處理或者您不想采用layer自動獲取的絕對路徑，您可以通過layer.config()來配置（詳見官網(wǎng)API頁）

三、jquery需1.8+

下載layer后，把它部署到你項目中的任何一個目錄（當然，我們推薦放在前端相關(guān)目錄里），你不能去挪動layer里面的文件結(jié)構(gòu)，因為它們是不可拆散的組合。就像這樣：(特別說明：需要把整個layer文件夾引入你的文件中，而不是單單引入layer.js文件)

layui中l(wèi)ayer彈層組件的應用

你不必去管那些文件是干嘛的，你只需要認準一個文件：layer.js 沒錯，當你試圖在頁面呈現(xiàn)layer的時候，你應該這樣去做：（最簡單的示例）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/layer.css"/>
        <style type="text/css">
            .btn{
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: magenta;
                text-align: center;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div class="btn">點我</div>
        <!--你必須先引入jQuery1.8或以上版本-->
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/layer/layer.js"></script>
        <script>
            $(".btn").bind("click",function(){
                layer.msg('點我的人最美！');
            });
        </script>
    </body>
</html>

$("#btn").bind("click",function(){
        //layer.msg('點我的人最美！');
        layer.msg('此商品不存在或者已下架，看看其他商品吧！', {
        time: 3000
    });
});

更多示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/layer.css"/>
        <style type="text/css">
            .btn:nth-child(odd){
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: magenta;
                text-align: center;
                font-size: 15px;
            }
            .btn:nth-child(even){
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: aqua;
                text-align: center;
                font-size: 15px;
            }
            #test5{
                text-align: center;
                width: 500px;
                margin-left: 500px;
            }
        </style>
    </head>
    <body>
        <div class="btn" id="btn">點我.btn</div>
        <div class="btn" id="test2">點我test2</div>
        <div class="btn" id="parentIframe">點我parentIframe</div>
        <div class="btn" id="test4">點我test4</div>
        <div class="btn" id="test5">點我test5</div>
        <!--你必須先引入jQuery1.8或以上版本-->
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/layer/layer.js"></script>
        <script>
        $(function(){
            $("#btn").bind("click",function(){
                layer.msg('點我的人最美！');
            });
            
            //彈出一個頁面層
            $('#test2').on('click', function(){
              layer.open({
              type: 1,
              area: ['600px', '360px'],
              shadeClose: true,   //點擊遮罩關(guān)閉
              content: '\<\div style="padding:20px;">自定義內(nèi)容--添加自己需要的描述內(nèi)容\<\/div>'
              });
            });
            
            //彈出一個iframe層
            $('#parentIframe').on('click', function(){
              layer.open({
              type: 2,
              title: 'iframe父子操作',
              maxmin: true,
              shadeClose: true, //點擊遮罩關(guān)閉層
              area : ['800px' , '520px'],
              content: 'parentIframe.html'
              });
            });

            //彈出一個loading層
            $('#test4').on('click', function(){
              var ii = layer.load();
              //此處用setTimeout演示ajax的回調(diào)
              setTimeout(function(){
              layer.close(ii);
              }, 1000);
            });
            
            //彈出一個tips層
            $('#test5').on('click', function(){
              layer.tips('Hello tips!', '#test5');
            });
            
        });
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/layer.css"/>
        <style type="text/css">
            .btn:nth-child(odd){
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: magenta;
                text-align: center;
                font-size: 15px;
            }
            .btn:nth-child(even){
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: aqua;
                text-align: center;
                font-size: 15px;
            }
            #test5{
                text-align: center;
                width: 100px;
                margin-left: 100px;
            }
        </style>
    </head>
    <body>
        <div class="btn" id="btn">點我.btn</div>
        <div class="btn" id="test2">點我test2</div>
        <div class="btn" id="parentIframe">點我parentIframe</div>
        <div class="btn" id="test4">點我test4</div>
        <div class="btn" id="test5">點我test5</div>
        
        <div class="btn" id="test6">點我test6</div>
        <div class="btn" id="test7">點我test7</div>
        <div class="btn" id="test8">點我test8</div>
        <div class="btn" id="test9">點我test9</div>
        
        <!--你必須先引入jQuery1.8或以上版本-->
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/layer/layer.js"></script>
        <script>
        $(function(){
            $("#btn").bind("click",function(){
                layer.msg('點我的人最美！');
            });
            
            //彈出一個頁面層
            $('#test2').on('click', function(){
              layer.open({
              type: 1,
              area: ['600px', '360px'],
              shadeClose: true,   //點擊遮罩關(guān)閉
              content: '\<\div style="padding:20px;">自定義內(nèi)容--添加自己需要的描述內(nèi)容\<\/div>'
              });
            });
            
            //彈出一個iframe層
            $('#parentIframe').on('click', function(){
              layer.open({
              type: 2,
              title: 'iframe父子操作',
              maxmin: true,
              shadeClose: true, //點擊遮罩關(guān)閉層
              area : ['800px' , '520px'],
              content: 'parentIframe.html'
              });
            });

            //彈出一個loading層
            $('#test4').on('click', function(){
              var ii = layer.load();
              //此處用setTimeout演示ajax的回調(diào)
              setTimeout(function(){
                  layer.close(ii);
              }, 1000);
            });
            
            //彈出一個tips層
            $('#test5').on('click', function(){
              layer.tips('Hello tips!', '#test5');
            });
            
            //======================================
            //多窗口模式，層疊置頂
            $('#test6').on('click', function(){
                layer.open({
                  type: 2 //此處以iframe舉例
                  ,title: '當你選擇該窗體時，即會在最頂端'
                  ,area: ['390px', '330px']
                  ,shade: 0
                  ,offset: [ //為了演示，隨機坐標
                    Math.random()*($(window).height()-300)
                    ,Math.random()*($(window).width()-390)
                  ]
                  ,maxmin: true
                  ,content: 'settop.html'
                  ,btn: ['繼續(xù)彈出', '全部關(guān)閉'] //只是為了演示
                  ,yes: function(){
                    $(that).click(); //此處只是為了演示，實際使用可以剔除
                  }
                  ,btn2: function(){
                    layer.closeAll();
                  }
                  
                  ,zIndex: layer.zIndex //重點1
                  ,success: function(layero){
                    layer.setTop(layero); //重點2
                  }
                });
            });
            
            
            
            //配置一個透明的詢問框
            $('#test7').on('click', function(){
                layer.msg('大部分參數(shù)都是可以公用的<br>合理搭配，展示不一樣的風格', {
                  time: 20000, //20s后自動關(guān)閉
                  btn: ['明白了', '知道了', '哦']
                });
            });
                
            
            //示范一個公告層
            $('#test8').on('click', function(){
                layer.open({
                  type: 1
                  ,title: false //不顯示標題欄
                  ,closeBtn: false
                  ,area: '300px;'
                  ,shade: 0.8
                  ,id: 'LAY_layuipro' //設(shè)定一個id，防止重復彈出
                  ,resize: false
                  ,btn: ['火速圍觀', '殘忍拒絕']
                  ,btnAlign: 'c'
                  ,moveType: 1 //拖拽模式，0或者1
                  ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">內(nèi)容<br>內(nèi)容</div>'
                  ,success: function(layero){
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                      href: 'http://www.layui.com/'
                      ,target: '_blank'
                    });
                  }
                });
            });
             
            //邊緣彈出
            $('#test9').on('click', function(){
                layer.open({
                   type: 1
                   ,offset: 'c' //具體配置參考：offset參數(shù)項(t、r、b、l、c)
                   ,content: '<div style="padding: 20px 80px;">內(nèi)容</div>'
                   ,btn: '關(guān)閉全部'
                   ,btnAlign: 'c' //按鈕居中
                   ,shade: 0 //不顯示遮罩
                   ,yes: function(){
                       layer.closeAll();
                  }
                });
            });


        });
        </script>
    </body>
</html>

以上就是layui-layer獨立組件-彈出層介紹的詳細內(nèi)容，更多請關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

網(wǎng)站標題：layui中l(wèi)ayer彈層組件的應用
標題網(wǎng)址：http://www.chinadenli.net/article30/iigopo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供解決方案、python、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、網(wǎng)站策劃、標簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

layui中l(wèi)ayer彈層組件的應用