032-element模块
1. 頁(yè)面中有許多元素需要自動(dòng)去完成一些處理, 譬如導(dǎo)航菜單的點(diǎn)擊、Tab的切換、進(jìn)度條的動(dòng)態(tài)改變、面板的展開或收縮等操作, 他們往往不需要去單獨(dú)調(diào)用一個(gè)方法來(lái)開啟一項(xiàng)功能, 而頁(yè)面上恰恰有太多這樣的小交互, 所以我們統(tǒng)一歸類為element組件。
2. 基礎(chǔ)方法
2.1. 基礎(chǔ)方法允許你在外部主動(dòng)對(duì)元素發(fā)操作, 目前element模塊提供的方法如下:
3. 更新渲染
3.1. 很多時(shí)候你的頁(yè)面元素可能是動(dòng)態(tài)生成的, 這時(shí)element的相關(guān)功能將不會(huì)對(duì)其有效, 你必須手工執(zhí)行element.init(type, filter)方法即可。可以用element.render(type, filter);方法替代。
3.2. 第一個(gè)參數(shù): type為表單的type類型, 可選。默認(rèn)對(duì)全部類型的表單進(jìn)行一次更新。可局部刷新的type如下表:
3.3. 第二個(gè)參數(shù): filter, 為元素的lay-filter=""的值。你可以借助該參數(shù), 完成指定元素的局部更新。
element.init(); // 更新全部 element.render('nav'); // 重新對(duì)導(dǎo)航進(jìn)行渲染。[HTML] <div class="layui-nav" lay-filter="test1">... </div><div class="layui-nav" lay-filter="test2">... </div>[JavaScript] // 比如當(dāng)你對(duì)導(dǎo)航動(dòng)態(tài)插入了二級(jí)菜單, 這時(shí)你需要重新去對(duì)它進(jìn)行渲染 element.render('nav', 'test1'); // 對(duì)lay-filter="test1"所在導(dǎo)航重新渲染。4. 事件監(jiān)聽
4.1. 語(yǔ)法: element.on('event(過(guò)濾器值)', callback);
4.2. element模塊在layui事件機(jī)制中注冊(cè)了element模塊事件, 所以當(dāng)你使用layui.onevent()自定義模塊事件時(shí), 請(qǐng)勿占用element名。目前element模塊所支持的事件如下表:
4.3. 默認(rèn)情況下, 事件所監(jiān)聽的是全部的元素, 但如果你只想監(jiān)聽某一個(gè)元素, 使用事件過(guò)濾器即可。
5. 監(jiān)聽選項(xiàng)卡切換
5.1. Tab選項(xiàng)卡點(diǎn)擊切換時(shí)觸發(fā), 回調(diào)函數(shù)返回一個(gè)object參數(shù), 攜帶兩個(gè)成員:
element.on('tab(myTab)', function(data){console.log(this); // 當(dāng)前Tab標(biāo)題所在的原始DOM元素console.log(data.index); // 得到當(dāng)前Tab的所在下標(biāo)console.log(data.elem); // 得到當(dāng)前的Tab大容器 });6. 監(jiān)聽選項(xiàng)卡刪除
6.1. Tab選項(xiàng)卡被刪除時(shí)觸發(fā), 回調(diào)函數(shù)返回一個(gè)object參數(shù), 攜帶兩個(gè)成員:
element.on('tabDelete(myTab)', function(data){console.log(this); // 當(dāng)前Tab標(biāo)題所在的原始DOM元素console.log(data.index); // 得到當(dāng)前Tab的所在下標(biāo)console.log(data.elem); // 得到當(dāng)前的Tab大容器 });7. 監(jiān)聽導(dǎo)航菜單的點(diǎn)擊
7.1. 當(dāng)點(diǎn)擊導(dǎo)航父級(jí)菜單和二級(jí)菜單時(shí)觸發(fā), 回調(diào)函數(shù)返回所點(diǎn)擊的菜單DOM對(duì)象:
element.on('nav(myNav)', function(dom){console.log(dom); // 得到當(dāng)前點(diǎn)擊的DOM對(duì)象 });8. 監(jiān)聽折疊面板
8.1. 當(dāng)折疊面板點(diǎn)擊展開或收縮時(shí)觸發(fā), 回調(diào)函數(shù)返回一個(gè)object參數(shù), 攜帶三個(gè)成員:
element.on('collapse(myCollapse)', function(data){console.log(data.show); // 得到當(dāng)前面板的展開狀態(tài), true或者falseconsole.log(data.title); // 得到當(dāng)前點(diǎn)擊面板的標(biāo)題區(qū)域DOM對(duì)象console.log(data.content); // 得到當(dāng)前點(diǎn)擊面板的內(nèi)容區(qū)域DOM對(duì)象 });9. 動(dòng)態(tài)操作進(jìn)度條
9.1. 你肯定不僅僅是滿足于進(jìn)度條的初始化顯示, 通常情況下你需要?jiǎng)討B(tài)改變它的進(jìn)度值, element模塊提供了這樣的基礎(chǔ)方法: element.progress(filter, percent);。
function loading(){var n = 0,timer = setInterval(function(){n = n + Math.random()*10|0; if(n > 100){n = 100;clearInterval(timer);}element.progress('myProgress', n + '%');}, 300 + Math.random() * 1000); } loading();10. 例子
10.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>元素 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><h1>導(dǎo)航</h1><ul class="layui-nav layui-bg-cyan" lay-filter="myNav"><li class="layui-nav-item"><a href="">最新活動(dòng)</a></li><li class="layui-nav-item"><a href="">產(chǎn)品</a></li><li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li><li class="layui-nav-item layui-this"><a href="">解決方案</a><dl class="layui-nav-child"> <dd><a href="">移動(dòng)模塊</a></dd><dd><a href="">后臺(tái)模版</a></dd><dd><a href="">電商平臺(tái)</a></dd></dl></li><li class="layui-nav-item"><a href="">社區(qū)</a></li></ul><br /><br /><h1>選項(xiàng)卡</h1><div class="layui-tab" lay-allowClose="true" lay-filter="myTab"><ul class="layui-tab-title"><li class="layui-this" lay-id="myTab1">網(wǎng)站設(shè)置</li><li lay-id="myTab2">商品管理</li><li lay-id="myTab3">訂單管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">內(nèi)容1</div><div class="layui-tab-item">內(nèi)容2</div><div class="layui-tab-item">內(nèi)容3</div></div></div><br /><br /><h1>面板</h1><div class="layui-collapse" lay-filter="myCollapse"><div class="layui-colla-item"><h2 class="layui-colla-title">杜甫</h2><div class="layui-colla-content layui-show">內(nèi)容區(qū)域</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">李清照</h2><div class="layui-colla-content">內(nèi)容區(qū)域</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">魯迅</h2><div class="layui-colla-content">內(nèi)容區(qū)域</div></div></div><br /><br /><h1>進(jìn)度條</h1><div class="layui-progress layui-progress-big" lay-filter="myProgress" lay-showPercent="true"><div class="layui-progress-bar" lay-percent="0%"></div></div><br /><br /><div id="createElement"></div><br /><br /><button class="layui-btn" onclick="layui.element.tabChange('myTab', 'myTab3')">手工切換到"訂單管理"</button><button class="layui-btn" onclick="layui.element.tabAdd('myTab', {title:'新標(biāo)題', content:'新內(nèi)容', id: +new Date})">添加Tab</button><button class="layui-btn" onclick="layui.element.tabDelete('myTab', 'myTab3')">刪除"訂單管理"</button><button class="layui-btn" lay-active="createProgress">手動(dòng)添加一個(gè)進(jìn)度條</button><script type="text/javascript">layui.use(['element', 'util'], function(){var element = layui.element,util = layui.util;element.on('nav(myNav)', function(dom){console.log(dom); // 得到當(dāng)前點(diǎn)擊的DOM對(duì)象});// 監(jiān)聽選項(xiàng)卡切換事件element.on('tab(myTab)', function(data){console.log(this); // 當(dāng)前Tab標(biāo)題所在的原始DOM元素console.log(data.index); // 得到當(dāng)前Tab的所在下標(biāo)console.log(data.elem); // 得到當(dāng)前的Tab大容器});// 監(jiān)聽選項(xiàng)卡刪除事件element.on('tabDelete(myTab)', function(data){console.log(this); // 當(dāng)前Tab標(biāo)題所在的原始DOM元素console.log(data.index); // 得到當(dāng)前Tab的所在下標(biāo)console.log(data.elem); // 得到當(dāng)前的Tab大容器});element.on('collapse(myCollapse)', function(data){console.log(data.show); // 得到當(dāng)前面板的展開狀態(tài), true或者falseconsole.log(data.title); // 得到當(dāng)前點(diǎn)擊面板的標(biāo)題區(qū)域DOM對(duì)象console.log(data.content); // 得到當(dāng)前點(diǎn)擊面板的內(nèi)容區(qū)域DOM對(duì)象});// 模擬loadingfunction loading(){var n = 0,timer = setInterval(function(){n = n + Math.random()*10|0; if(n > 100){n = 100;clearInterval(timer);}element.progress('myProgress', n + '%');}, 300 + Math.random() * 1000);}loading();util.event('lay-active', {createProgress: function(){var pgs = '<div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="createElement"><div class="layui-progress-bar layui-bg-blue" lay-percent="100%"></div></div>';layui.jquery('#createElement').html(pgs);element.render('progress', 'createElement');}}); });</script></body> </html>10.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的032-element模块的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 031-表单元素
- 下一篇： 001_Servlet简介