常用元素操作 - 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 - 用心與你溝通

                    亚洲图色