<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 常用元素操作 - layui.element

      頁面中有許多元素需要自動去完成一些處理,譬如導航菜單的小滑塊、Tab的切換等操作,他們往往不需要去單獨調用一個方法來開啟一項功能,而頁面上恰恰有太多這樣的小交互,所以我們統一歸類為element組件。跟表單一樣,基于元素屬性和事件驅動的接口書寫方式。
      模塊加載名稱:element

      元素功能的開啟只需要加載element模塊即會自動完成,所以不用跟其它模塊一樣為某一個功能而調用一個方法。她只需要找到她支持的元素,如你的頁面存在一個 Tab元素塊,那么element模塊會自動賦予她該有的功能。

      <div class="layui-tab" lay-filter="demo">
        <ul class="layui-tab-title">
          <li class="layui-this">網站設置</li>
          <li>商品管理</li>
          <li>訂單管理</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">內容1</div>
          <div class="layui-tab-item">內容2</div>
          <div class="layui-tab-item">內容3</div>
        </div>
      </div>
            

      前提是你要加載element模塊

      layui.use('element', function(){
        var element = layui.element;
        
        //一些事件監聽
        element.on('tab(demo)', function(data){
          console.log(data);
        });
      });
            

      我們通過自定義元素屬性來作為元素的功能參數,他們一般配置在容器外層,如:

      <div class="layui-tab" lay-allowClose="true" lay-filter="demo">…</div>      
      <span class="layui-breadcrumb" lay-separator="|"></span>
       
       And So On
            

      element 模塊支持的元素如下表:

      屬性名 可選值 說明
      lay-filter 任意字符 事件過濾器(公用屬性),主要用于事件的精確匹配,跟選擇器是比較類似的。
      lay-allowClose true 針對于Tab容器,是否允許選項卡關閉。默認不允許,即不用設置該屬性
      lay-separator 任意分隔符 針對于面包屑容器

      基礎方法允許你在外部主動對元素發起一起操作,目前element模塊提供的方法如下:

      方法名 描述
      var element = layui.element; element模塊的實例
      返回的element變量為該實例的對象,攜帶一些用于元素操作的基礎方法
      element.on(filter, callback); 用于元素的一些事件監聽
      element.tabAdd(filter, options); 用于新增一個Tab選項
      參數filter:tab元素的 lay-filter="value" 過濾器的值(value)
      參數options:設定可選值的對象,目前支持的選項如下述示例:
      element.tabAdd('demo', {
        title: '選項卡的標題'
        ,content: '選項卡的內容' //支持傳入html
        ,id: '選項卡標題的lay-id屬性值'
      });             
                    
      element.tabDelete(filter, layid); 用于刪除指定的Tab選項
      參數filter:tab元素的 lay-filter="value" 過濾器的值(value)
      參數layid:選項卡標題列表的 屬性 lay-id 的值
      element.tabDelete('demo', 'xxx'); //刪除 lay-id="xxx" 的這一項  
                    
      element.tabChange(filter, layid); 用于外部切換到指定的Tab項上,參數同上,如:
      element.tabChange('demo', 'layid'); //切換到 lay-id="yyy" 的這一項
      element.tab(options); 用于綁定自定義 Tab 元素(即非 layui 自帶的 tab 結構)。該方法為 layui 2.1.6 新增
      參數options:設定可選值的對象,目前支持的選項如下述示例:
      //HTML
      <ul id="tabHeader">
        <li>標題1</li>
        <li>標題2</li>
        <li>標題3</li>
      </ul>
      <div id="tabBody">
        <div class="xxx">內容1</div>
        <div class="xxx">內容2</div>
        <div class="xxx">內容4</div>
      </div>
                    
      //JavaScript              
      element.tab({
        headerElem: '#tabHeader>li' //指定tab頭元素項
        ,bodyElem: '#tabBody>.xxx' //指定tab主體元素項
      });             
                    
      element.progress(filter, percent); 用于動態改變進度條百分比:
      element.progress('demo', '30%');
      更新渲染

      跟表單元素一樣,很多時候你的頁面元素可能是動態生成的,這時element的相關功能將不會對其有效,你必須手工執行 element.init(type, filter) 方法即可。注意:2.1.6 開始,可以用 element.render(type, filter); 方法替代

      第一個參數:type,為表單的type類型,可選。默認對全部類型的表單進行一次更新。可局部刷新的type如下表:

      參數(type)值 描述
      tab 重新對tab選項卡進行初始化渲染
      nav 重新對導航進行渲染
      breadcrumb 重新對面包屑進行渲染
      progress 重新對進度條進行渲染
      collapse 重新對折疊面板進行渲染
      element.init(); //更新全部  2.1.6 可用 element.render() 方法替代
      element.render('nav'); //重新對導航進行渲染。注:layui 2.1.6 版本新增
      //……
            

      第二個參數:filter,為元素的 lay-filter="" 的值。你可以借助該參數,完成指定元素的局部更新。

      【HTML】
      <div class="layui-nav" lay-filter="test1">
        …
      </div>
       
      <div class="layui-nav" lay-filter="test2">
        …
      </div>
            
      【JavaScript】
      //比如當你對導航動態插入了二級菜單,這時你需要重新去對它進行渲染
      element.render('nav', 'test1'); //對 lay-filter="test1" 所在導航重新渲染。注:layui 2.1.6 版本新增
      //……      
            

      語法:element.on('event(過濾器值)', callback);

      element 模塊在 layui 事件機制中注冊了element 模塊事件,所以當你使用 layui.onevent() 自定義模塊事件時,請勿占用 element 名。目前 element 模塊所支持的事件如下表:

      event 描述
      tab 監聽 Tab 選項卡切換事件
      tabDelete 監聽 Tab 監聽選項卡刪除事件
      nav 監聽導航菜單的點擊事件
      collapse 監聽折疊面板展開或收縮事件

      默認情況下,事件所監聽的是全部的元素,但如果你只想監聽某一個元素,使用事件過濾器即可。
      如:<div class="layui-tab" lay-filter="test"></div>

      element.on('tab(test)', function(data){
        console.log(data);
      });
            

      Tab選項卡點擊切換時觸發,回調函數返回一個object參數,攜帶兩個成員:

      element.on('tab(filter)', function(data){
        console.log(this); //當前Tab標題所在的原始DOM元素
        console.log(data.index); //得到當前Tab的所在下標
        console.log(data.elem); //得到當前的Tab大容器
      });
            

      Tab選項卡被刪除時觸發,回調函數返回一個object參數,攜帶兩個成員:

      element.on('tabDelete(filter)', function(data){
        console.log(this); //當前Tab標題所在的原始DOM元素
        console.log(data.index); //得到當前Tab的所在下標
        console.log(data.elem); //得到當前的Tab大容器
      });
            

      注:該事件為 layui 2.1.6 新增

      監聽導航菜單的點擊

      當點擊導航父級菜單和二級菜單時觸發,回調函數返回所點擊的菜單DOM對象:

      element.on('nav(filter)', function(elem){
        console.log(elem); //得到當前點擊的DOM對象
      });
            
      監聽折疊面板

      當折疊面板點擊展開或收縮時觸發,回調函數返回一個object參數,攜帶三個成員:

      element.on('collapse(filter)', function(data){
        console.log(data.show); //得到當前面板的展開狀態,true或者false
        console.log(data.title); //得到當前點擊面板的標題區域DOM對象
        console.log(data.content); //得到當前點擊面板的內容區域DOM對象
      });
            

      你肯定不僅僅是滿足于進度條的初始化顯示,通常情況下你需要動態改變它的進度值,element模塊提供了這樣的基礎方法:element.progress(filter, percent);

      <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
        <div class="layui-progress-bar" lay-percent="0%"></div>
      </div>
       
      上述是一個已經設置了過濾器(lay-filter="demo")的進度條
      現在你只需要在某個事件或者語句中執行方法:element.progress('demo', '50%');
      即可改變進度
            

      如果你需要進度條更直觀的例子,建議瀏覽:進度條演示頁面

      事實上元素模塊的大部分操作都是內部自動完成的,所以目前你發現他的接口很少呢。當然,我們也會不斷增加element模塊所支持的頁面元素。

      layui - 用心與你溝通

      亚洲图色