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タイマ停止(失効)問題解決方法