Layuiまとめ

16050 ワード
フロントフレーム

Layuiの概要

layui                UI  ,    HTML/CSS/JS       ,    ,    .
                   ，         .

layuiの使用

  • layui
    • を取得
  • は、プロジェクトディレクトリ
    • に完全に配備する.
  • cssファイルおよびjsファイル
    • を参照

    初期化モジュール

            //        js   
        layui.use(['layer', 'form'], function(){
          var layer = layui.layer
          ,form = layui.form;
        });

    Layuiテーブルの動的操作

  • ページ構文
        <table id="demo" lay-filter="test">table>
  • js構文
            table.render({
            elem: '#demo'
            ,url: '/demo/table/user/' //    
            ,page: true //    
            ,cols: [[ //  
              {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
              ,{field: 'username', title: '   ', width:80}
            ]]
          });
  • インタフェースは、データ
        {
    "code": 0,
    "msg": "",
    "count": 1000,
    "data": [
        {
        "id": 10000,
        "username": "user-0"
        }
    ]
    }
    • を返す.
  • templetカスタム列テンプレート2.バインドテンプレートセレクタjavascript table.render({ cols: [[ {field:'title', title: ' ', width: 200, templet: '#titleTpl'} // templet ,{field:'id', title:'ID', width:100} ]] });.対応するテンプレートhtml <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
  • toolbarバインド列ツールバー(templetカスタム列テンプレートと似ています)js構文
            table.render({
          cols: [[
            {field:'id', title:'ID', width:100}
            ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //   toolbar          
          ]]
        });
  • ツールバーイベント
            table.on('tool(test)', function(obj){ // ：tool       ，test table        lay-filter="    "
          var data = obj.data; //       
          var layEvent = obj.event; //   lay-event     （        event       ）
          var tr = obj.tr; //      tr  DOM  
         
          if(layEvent === 'detail'){ //  
            //do somehing
          } 
          //           
          });
  • テーブル再ロード
            table.reload('idTest', {
          url: '/api/table/search'
          ,where: {} //             
          //,height: 300
          //,page:{curr:,}//        
        });
  • テーブルイベントリスニング
            //     
        table.on('checkbox(test)', function(obj){
          console.log(obj.checked); //        
            console.log(obj.data); //        
            console.log(obj.type); //        ，  ：all，        ，  ：one
        });
        //     
        table.on('toolbar(test)', function(obj){
          var checkStatus = table.checkStatus(obj.config.id);
        });

    • Layuiポップアップレイヤコンポーネント

  • 基本用法
            layui.use('layer', function(){
          var layer = layui.layer;
          layer.msg('hello');
        });
  • 基礎パラメータ2.type-基本層タイプ2.タイトル2.コンテンツ2.skin-スタイルクラス名2.area-幅2.offset-座標2.icon-アイコン2.btn-ボタン2.btnAlign-ボタン配列2.closeBtn-閉じるボタン2.shade-マスク2.time-自動オフに必要なミリ秒2.id-一意の識別2.anim-アニメーションをポップアップ2.Syccess-レイヤポップアップ後の正常なコールバック方法2.yes-ボタンコールバック方法2を決定する.cancel-右上隅の閉じるボタンによってトリガーされるコールバック
  • 基礎方法2.layer.config(options)-グローバル構成2を初期化します.layer.ready(callback)-初期化準備2.layer.Open(options)-元のコアメソッド2.layer.alert(content,options,yes)-一般情報ボックス2.layer.confirm(content,options,yes,cancel)-質問ボックス2.layer.msg(content,options,end)-プロンプトボックス2.layer.load(icon,options)-ロード層2.layer.tips(content,follow,options)-tips層2.layer.close(index)-特定のレイヤ2を閉じる.layer.closeAll(type)-すべてのレイヤを閉じる

    • Layuiフォームレイヤ

  • 基礎文法2.ページ要素html
    .js構文javascript layui.use('form', function(){ var form = layui.form; });
  • ベースメソッド
  • form.render()-全
    • を更新
  • form.on(‘event(フィルタ値)’,callback)-イベントリスニング
  • form.on(‘select(filter)’,function(data){})-傍受select選択
  • form.on(‘checkbox(filter)’,function(data){})-checkboxチェック
    • をリスニング
  • form.on(‘switch(filter)’,function(data){})-傍受switchスイッチ
  • form.on(‘radio(filter)’,function(data){})-radioラジオ
    • を傍受する
  • form.on(‘submit(*)’,function(data){})-傍受submitコミット
    • uniapp-iPhoneXとiPhoneX Maxの底の小さな黒い棒が底のtabを遮る
    System.Threading.Timerタイマ停止(失効)問題解決方法