1. 程式人生 > >layui基礎總結

layui基礎總結

1.layui結構

     
    ├─css //css目錄
      │  │─modules //模組css目錄(一般如果模組相對較大,我們會單獨提取,比如下面三個:)
      │  │  ├─laydate
      │  │  ├─layer
      │  │  └─layim
      │  └─layui.css //核心樣式檔案
      ├─font  //字型圖示目錄
      ├─images //圖片資源目錄(目前只有layim和編輯器用到的GIF表情)
      │─lay //模組核心目錄
      │  └─modules //各模組元件
      │─layui.js //基礎核心庫
      └─layui.all.js //包含layui.js和所有模組的合併檔案

 2.layui彈層

我們也可以通過訪問Layer來獲取,獲取到layer元件後匯入專案中。具體步驟結構參考下圖:
1.在頁面中引入jQuery框架
2.將下載的layer資料夾完整複製到專案中
3.引入layer目錄下的layer.js檔案
4.開啟layer彈層之旅

這裡寫圖片描述

     <!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('您是如何看待前端開發?', {
                              btn: ['重要','奇葩'] //按鈕
                            }, function(){
                              layer.msg('的確很重要', {icon: 1});
                            }, function(){
                              layer.msg('也可以這樣', {
                                time: 20000, //20s後自動關閉
                                btn: ['明白了', '知道了']
                              });
                            });
            })
          })
    </script>
    <body>
        <input type="button" value="提交" id="btn"/>
    </body>
    </html>

 

    layer.alert('內容')
    //第三方擴充套件面板
    layer.alert('內容', {
      icon: 1,
      skin: 'layer-ext-moon' //該面板由layer.seaning.com友情擴充套件。關於面板的擴充套件規則,去這裡查閱
    })
    //詢問框
    layer.confirm('您是如何看待前端開發?', {
      btn: ['重要','奇葩'] //按鈕
    }, function(){
      layer.msg('的確很重要', {icon: 1});
    }, function(){
      layer.msg('也可以這樣', {
        time: 20000, //20s後自動關閉
        btn: ['明白了', '知道了']
      });
    });
    //提示層
    layer.msg('玩命提示中');
    //墨綠深藍風
    layer.alert('墨綠風格,點選確認看深藍', {
      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, //不顯示標題
      content: $('.layer_notice'), //捕獲的元素,注意:最好該指定的元素要存放在body最外層,否則可能被其它的相對元素所影響
      cancel: function(){
        layer.msg('捕獲就是從頁面已經存在的元素上,包裹layer的結構', {time: 5000, icon:6});
      }
    });
    //頁面層
    layer.open({
      type: 1,
      skin: 'layui-layer-rim', //加上邊框
      area: ['420px', '240px'], //寬高
      content: 'html內容'
    });
    //自定頁
    layer.open({
      type: 1,
      skin: 'layui-layer-demo', //樣式類名
      closeBtn: 0, //不顯示關閉按鈕
      anim: 2,
      shadeClose: true, //開啟遮罩關閉
      content: '內容'
    });
    //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, //不顯示關閉按鈕
      shade: [0],
      area: ['340px', '215px'],
      offset: 'rb', //右下角彈出
      time: 2000, //2秒後自動關閉
      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代表載入的風格,支援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: '內容1'
      }, {
        title: 'TAB2',
        content: '內容2'
      }, {
        title: 'TAB3',
        content: '內容3'
      }]
    });
    //相簿層
    $.getJSON('test/photos.json?v='+new Date, function(json){
      layer.photos({
        photos: json //格式見API文件手冊頁
        ,anim: 5 //0-6的選擇,指定彈出圖片動畫型別,預設隨機
      });
    });

3.layui常用按鈕

Layui的按鈕有多種樣式可供選擇,但是無論使用哪種樣式的按鈕時,都必須在該html標籤中加上一個名為layui-btn的class名。其次再新增你需要使用的按鈕樣式所對應的的class名。
各按鈕樣式class名,按照主題可分為:
原始(layui-btn-primary)background-color:#009688;
預設(layui-btn)background-color:#009688;
百搭(layui-btn-normal)background-color:#1E9FFF;
暖色(layui-btn-warm)background-color:#F7B824;
警告(layui-btn-danger)background-color:#FF5722;
禁用(layui-btn-disabled)background-color:#FBFBFB;

按鈕的預設樣式(layui-btn)在layui.css中的第370行至384行:

    .layui-btn {
        display: inline-block;
        height: 38px;
        line-height: 38px;
        padding: 0 18px;
        background-color: #009688;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        opacity: .9;
        filter: alpha(opacity=90)
    }   

圓角(layui-btn-radius)
大按鈕(layui-btn-big)
小按鈕(layui-btn-small)
迷你按鈕(layui-btn-mini)
4.表單元素

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui.form小例子</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    </head>
    <body>
    <form class="layui-form"> <!-- 提示:如果你不想用form,你可以換成div等任何一個普通元素 -->
      <div class="layui-form-item">
        <label class="layui-form-label">輸入框</label>
        <div class="layui-input-block">
          <input type="text" name="" placeholder="請輸入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">下拉選擇框</label>
        <div class="layui-input-block">
          <select name="interest" lay-filter="aihao">
            <option value="0">寫作</option>
            <option value="1">閱讀</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">複選框</label>
        <div class="layui-input-block">
          <input type="checkbox" name="like[write]" title="寫作">
          <input type="checkbox" name="like[read]" title="閱讀">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">開關關</label>
        <div class="layui-input-block">
          <input type="checkbox" lay-skin="switch">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">開關開</label>
        <div class="layui-input-block">
          <input type="checkbox" checked lay-skin="switch">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">單選框</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="0" title="男">
          <input type="radio" name="sex" value="1" title="女" checked>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">請填寫描述</label>
        <div class="layui-input-block">
          <textarea placeholder="請輸入內容" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
      <!-- 更多表單結構排版請移步文件左側【頁面元素-表單】一項閱覽 -->
    </form>
    <script src="layui/layui.js"></script>
    <script>
    layui.use('form', function(){
      var form = layui.form;
     
      //各種基於事件的操作,下面會有進一步介紹
    });
    </script>

注:如果需要用 js動態追加一些layui表單元素,必須加如下程式碼,執行到這一步才會將部分表單元素修飾成功,否則無

     layui.use('form', function(){
                    var form = layui.form; //只有執行了這一步,部分表單元素才會自動修飾成功
                    form.render();
                });

5.預設元素屬性

6.事件監聽

form模組在 layui 事件機制中註冊了專屬事件,所以當你使用layui.onevent()自定義模組事件時,請勿佔用form名。form支援的事件如下:
event     描述
select     監聽select下拉選擇事件
checkbox     監聽checkbox複選框勾選事件
switch     監聽checkbox複選框開關事件
radio     監聽radio單選框事件
submit     監聽表單提交事件

預設情況下,事件所監聽的是全部的form模組元素,但如果你只想監聽某一個元素,使用事件過濾器即可。

    form.on('select(test)', function(data){
      console.log(data);
    });

 監聽radio

 

      form.on('radio(agreeRadioA)', function(data){
                //選擇不同意
                if(data.value == 'step11'){
                    $("#approve_divA").slideDown();
                    $("#agreeContentA").val("");
                }else{
                    $("#approve_divA").slideUp();
                }
            });