溫馨提示×

溫馨提示×

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

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

layui的使用方法

發(fā)布時間：2020-09-21 09:59:55 來源：億速云 閱讀：308 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了layui的使用方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

layui是什么

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

　　根據(jù)layer組件使用人數(shù)，就可以看出layui框架是非常不錯的，接下來我們就開啟layui之旅吧！

layui的使用方法

Layui的結(jié)構(gòu)

├─css //css目錄
  │  │─modules //模塊css目錄（一般如果模塊相對較大，我們會單獨提取，比如下面三個：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心樣式文件
  ├─font  //字體圖標(biāo)目錄
  ├─images //圖片資源目錄（目前只有l(wèi)ayim和編輯器用到的GIF表情）
  │─lay //模塊核心目錄
  │  └─modules //各模塊組件
  │─layui.js //基礎(chǔ)核心庫
  └─layui.all.js //包含layui.js和所有模塊的合并文件

layui內(nèi)置模塊

layui的使用方法

下面列出我感覺比較重要的幾個組件模塊，畢竟不是專門從事前端的。

layui的使用方法

獲取Layui

通過Layui官網(wǎng)獲取,詳情請參考layui官網(wǎng)。

Layer彈層之美

我們也可以通過訪問Layer來獲取，獲取到layer組件后導(dǎo)入項目中。具體步驟結(jié)構(gòu)參考下圖：

　　1.在頁面中引入jQuery框架

　　2.將下載的layer文件夾完整復(fù)制到項目中

　　3.引入layer目錄下的layer.js文件

　　4.開啟layer彈層之旅

layui的使用方法

初體驗

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layer彈層之美</title>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
  <script type="text/javascript" src="layer/layer.js" ></script>
</head>
<script type="text/javascript">
      $(function(){
        $("#btn").click(function(){
             //詢問框
                        layer.confirm('您是如何看待前端開發(fā)？', {
                          btn: ['重要','奇葩'] //按鈕
                        }, function(){
                          layer.msg('的確很重要', {icon: 1});
                        }, function(){
                          layer.msg('也可以這樣', {
                            time: 20000, //20s后自動關(guān)閉
                            btn: ['明白了', '知道了']
                          });
                        });
        })
      })
</script>
<body>
    <input type="button" value="提交" id="btn"/>
</body>
</html>

這里只做了簡單的演示，更多彈層實現(xiàn)請參考Layer官網(wǎng) 具體代碼貼出。

//初體驗
layer.alert('內(nèi)容')
//第三方擴展皮膚
layer.alert('內(nèi)容', {
  icon: 1,
  skin: 'layer-ext-moon' //該皮膚由layer.seaning.com友情擴展。關(guān)于皮膚的擴展規(guī)則，去這里查閱
})
//詢問框
layer.confirm('您是如何看待前端開發(fā)？', {
  btn: ['重要','奇葩'] //按鈕
}, function(){
  layer.msg('的確很重要', {icon: 1});
}, function(){
  layer.msg('也可以這樣', {
    time: 20000, //20s后自動關(guān)閉
    btn: ['明白了', '知道了']
  });
});
//提示層
layer.msg('玩命提示中');
//墨綠深藍風(fēng)
layer.alert('墨綠風(fēng)格，點擊確認看深藍', {
  skin: 'layui-layer-molv' //樣式類名
  ,closeBtn: 0
}, function(){
  layer.alert('偶吧深藍style', {
    skin: 'layui-layer-lan'
    ,closeBtn: 0
    ,anim: 4 //動畫類型
  });
});
//捕獲頁
layer.open({
  type: 1,
  shade: false,
  title: false, //不顯示標(biāo)題
  content: $('.layer_notice'), //捕獲的元素，注意：最好該指定的元素要存放在body最外層，否則可能被其它的相對元素所影響
  cancel: function(){
    layer.msg('捕獲就是從頁面已經(jīng)存在的元素上，包裹layer的結(jié)構(gòu)', {time: 5000, icon:6});
  }
});
//頁面層
layer.open({
  type: 1,
  skin: 'layui-layer-rim', //加上邊框
  area: ['420px', '240px'], //寬高
  content: 'html內(nèi)容'
});
//自定頁
layer.open({
  type: 1,
  skin: 'layui-layer-demo', //樣式類名
  closeBtn: 0, //不顯示關(guān)閉按鈕
  anim: 2,
  shadeClose: true, //開啟遮罩關(guān)閉
  content: '內(nèi)容'
});
//tips層
layer.tips('Hi，我是tips', '吸附元素選擇器，如#id');
//iframe層
layer.open({
  type: 2,
  title: 'layer mobile頁',
  shadeClose: true,
  shade: 0.8,
  area: ['380px', '90%'],
  content: 'mobile/' //iframe的url
}); 
//iframe窗
layer.open({
  type: 2,
  title: false,
  closeBtn: 0, //不顯示關(guān)閉按鈕
  shade: [0],
  area: ['340px', '215px'],
  offset: 'rb', //右下角彈出
  time: 2000, //2秒后自動關(guān)閉
  anim: 2,
  content: ['test/guodu.html', 'no'], //iframe的url，no代表不顯示滾動條
  end: function(){ //此處用于演示
    layer.open({
      type: 2,
      title: '很多時候，我們想最大化看，比如像這個頁面。',
      shadeClose: true,
      shade: false,
      maxmin: true, //開啟最大化最小化按鈕
      area: ['893px', '600px'],
      content: '//fly.layui.com/'
    });
  }
});
//加載層
var index = layer.load(0, {shade: false}); //0代表加載的風(fēng)格，支持0-2
//loading層
var index = layer.load(1, {
  shade: [0.1,'#fff'] //0.1透明度的白色背景
});
//小tips
layer.tips('我是另外一個tips，只不過我長得跟之前那位稍有些不一樣。', '吸附元素選擇器', {
  tips: [1, '#3595CC'],
  time: 4000
});
//prompt層
layer.prompt({title: '輸入任何口令，并確認', formType: 1}, function(pass, index){
  layer.close(index);
  layer.prompt({title: '隨便寫點啥，并確認', formType: 2}, function(text, index){
    layer.close(index);
    layer.msg('演示完畢！您的口令：'+ pass +'<br>您最后寫下了：'+text);
  });
});
//tab層
layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '內(nèi)容1'
  }, {
    title: 'TAB2', 
    content: '內(nèi)容2'
  }, {
    title: 'TAB3', 
    content: '內(nèi)容3'
  }]
});
//相冊層
$.getJSON('test/photos.json?v='+new Date, function(json){
  layer.photos({
    photos: json //格式見API文檔手冊頁
    ,anim: 5 //0-6的選擇，指定彈出圖片動畫類型，默認隨機
  });
});

感謝你能夠認真閱讀完這篇文章，希望小編分享layui的使用方法內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學(xué)習(xí)!

向AI問一下細節(jié)

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

AI
助
手