元素功能的開啟只需要加載element模塊即會自動完成，譬如tab選項卡切換、導航菜單滑動切換效果、面包屑導航、進度條等，使用這些小交互功能的前提就是：擁有符合這些小功能的所需正確的HTML結構，以及加載element模塊；如下：tab選項卡的使用示例：

• 網站設置
• 商品管理
• 訂單管理

內容1內容2內容3

加載element模塊使得tab選項卡切換生效layui.use('element', function(){

var element = layui.element;

//一些事件監聽

element.on('tab(demo)', function(data){

console.log(data);

});

});

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

…

..........

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

• 標題1
• 標題2
• 標題3

內容1內容2內容4

//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】

…

…

【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選項卡切換事件

默認情況下，事件所監聽的是全部的元素，但如果你只想監聽某一個元素，使用事件過濾器即可。

如：

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);。

上述是一個已經設置了過濾器(lay-filter="demo")的進度條

現在你只需要在某個事件或者語句中執行方法：element.progress('demo', '50%');

即可改變進度

總結

以上是生活随笔為你收集整理的layui 如何去dom_常用元素操作 - layui.element的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。