溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-06-17 17:57:05 來源：億速云 閱讀：158 作者：元一 欄目：web開發(fā)

【layer簡介】

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

【注意事項(xiàng)】

一、使用時(shí)，請(qǐng)把文件夾layer整個(gè)放置在您站點(diǎn)的任何一個(gè)目錄，只需引入layer.js即可，除jQuery外，其它文件無需再引入。

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

三、jquery需1.8+

下載layer后，把它部署到你項(xiàng)目中的任何一個(gè)目錄（當(dāng)然，我們推薦放在前端相關(guān)目錄里），你不能去挪動(dòng)layer里面的文件結(jié)構(gòu)，因?yàn)樗鼈兪遣豢刹鹕⒌慕M合。就像這樣：(特別說明：需要把整個(gè)layer文件夾引入你的文件中，而不是單單引入layer.js文件)

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

你不必去管那些文件是干嘛的，你只需要認(rèn)準(zhǔn)一個(gè)文件：layer.js 沒錯(cuò)，當(dāng)你試圖在頁面呈現(xiàn)layer的時(shí)候，你應(yīng)該這樣去做：（最簡單的示例）

<!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">點(diǎn)我</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('點(diǎn)我的人最美！');
            });
        </script>
    </body>
</html>
$("#btn").bind("click",function(){
        //layer.msg('點(diǎn)我的人最美！');
        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">點(diǎn)我.btn</div>
        <div class="btn" id="test2">點(diǎn)我test2</div>
        <div class="btn" id="parentIframe">點(diǎn)我parentIframe</div>
        <div class="btn" id="test4">點(diǎn)我test4</div>
        <div class="btn" id="test5">點(diǎn)我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('點(diǎn)我的人最美！');
            });
            
            //彈出一個(gè)頁面層
            $('#test2').on('click', function(){
              layer.open({
              type: 1,
              area: ['600px', '360px'],
              shadeClose: true,   //點(diǎn)擊遮罩關(guān)閉
              content: '\<\div style="padding:20px;">自定義內(nèi)容--添加自己需要的描述內(nèi)容\<\/div>'
              });
            });
            
            //彈出一個(gè)iframe層
            $('#parentIframe').on('click', function(){
              layer.open({
              type: 2,
              title: 'iframe父子操作',
              maxmin: true,
              shadeClose: true, //點(diǎn)擊遮罩關(guān)閉層
              area : ['800px' , '520px'],
              content: 'parentIframe.html'
              });
            });

            //彈出一個(gè)loading層
            $('#test4').on('click', function(){
              var ii = layer.load();
              //此處用setTimeout演示ajax的回調(diào)
              setTimeout(function(){
              layer.close(ii);
              }, 1000);
            });
            
            //彈出一個(gè)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">點(diǎn)我.btn</div>
        <div class="btn" id="test2">點(diǎn)我test2</div>
        <div class="btn" id="parentIframe">點(diǎn)我parentIframe</div>
        <div class="btn" id="test4">點(diǎn)我test4</div>
        <div class="btn" id="test5">點(diǎn)我test5</div>
        
        <div class="btn" id="test6">點(diǎn)我test6</div>
        <div class="btn" id="test7">點(diǎn)我test7</div>
        <div class="btn" id="test8">點(diǎn)我test8</div>
        <div class="btn" id="test9">點(diǎn)我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('點(diǎn)我的人最美！');
            });
            
            //彈出一個(gè)頁面層
            $('#test2').on('click', function(){
              layer.open({
              type: 1,
              area: ['600px', '360px'],
              shadeClose: true,   //點(diǎn)擊遮罩關(guān)閉
              content: '\<\div style="padding:20px;">自定義內(nèi)容--添加自己需要的描述內(nèi)容\<\/div>'
              });
            });
            
            //彈出一個(gè)iframe層
            $('#parentIframe').on('click', function(){
              layer.open({
              type: 2,
              title: 'iframe父子操作',
              maxmin: true,
              shadeClose: true, //點(diǎn)擊遮罩關(guān)閉層
              area : ['800px' , '520px'],
              content: 'parentIframe.html'
              });
            });

            //彈出一個(gè)loading層
            $('#test4').on('click', function(){
              var ii = layer.load();
              //此處用setTimeout演示ajax的回調(diào)
              setTimeout(function(){
                  layer.close(ii);
              }, 1000);
            });
            
            //彈出一個(gè)tips層
            $('#test5').on('click', function(){
              layer.tips('Hello tips!', '#test5');
            });
            
            //======================================
            //多窗口模式，層疊置頂
            $('#test6').on('click', function(){
                layer.open({
                  type: 2 //此處以iframe舉例
                  ,title: '當(dāng)你選擇該窗體時(shí)，即會(huì)在最頂端'
                  ,area: ['390px', '330px']
                  ,shade: 0
                  ,offset: [ //為了演示，隨機(jī)坐標(biāo)
                    Math.random()*($(window).height()-300)
                    ,Math.random()*($(window).width()-390)
                  ]
                  ,maxmin: true
                  ,content: 'settop.html'
                  ,btn: ['繼續(xù)彈出', '全部關(guān)閉'] //只是為了演示
                  ,yes: function(){
                    $(that).click(); //此處只是為了演示，實(shí)際使用可以剔除
                  }
                  ,btn2: function(){
                    layer.closeAll();
                  }
                  
                  ,zIndex: layer.zIndex //重點(diǎn)1
                  ,success: function(layero){
                    layer.setTop(layero); //重點(diǎn)2
                  }
                });
            });
            
            
            
            //配置一個(gè)透明的詢問框
            $('#test7').on('click', function(){
                layer.msg('大部分參數(shù)都是可以公用的<br>合理搭配，展示不一樣的風(fēng)格', {
                  time: 20000, //20s后自動(dòng)關(guān)閉
                  btn: ['明白了', '知道了', '哦']
                });
            });
                
            
            //示范一個(gè)公告層
            $('#test8').on('click', function(){
                layer.open({
                  type: 1
                  ,title: false //不顯示標(biāo)題欄
                  ,closeBtn: false
                  ,area: '300px;'
                  ,shade: 0.8
                  ,id: 'LAY_layuipro' //設(shè)定一個(gè)id，防止重復(fù)彈出
                  ,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ù)項(xiàng)(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獨(dú)立組件-彈出層介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手