032-element模块
1. 頁面中有許多元素需要自動去完成一些處理, 譬如導(dǎo)航菜單的點擊、Tab的切換、進度條的動態(tài)改變、面板的展開或收縮等操作, 他們往往不需要去單獨調(diào)用一個方法來開啟一項功能, 而頁面上恰恰有太多這樣的小交互, 所以我們統(tǒng)一歸類為element組件。
2. 基礎(chǔ)方法
2.1. 基礎(chǔ)方法允許你在外部主動對元素發(fā)操作, 目前element模塊提供的方法如下:
3. 更新渲染
3.1. 很多時候你的頁面元素可能是動態(tài)生成的, 這時element的相關(guān)功能將不會對其有效, 你必須手工執(zhí)行element.init(type, filter)方法即可。可以用element.render(type, filter);方法替代。
3.2. 第一個參數(shù): type為表單的type類型, 可選。默認(rèn)對全部類型的表單進行一次更新。可局部刷新的type如下表:
3.3. 第二個參數(shù): filter, 為元素的lay-filter=""的值。你可以借助該參數(shù), 完成指定元素的局部更新。
element.init(); // 更新全部 element.render('nav'); // 重新對導(dǎo)航進行渲染。[HTML] <div class="layui-nav" lay-filter="test1">... </div><div class="layui-nav" lay-filter="test2">... </div>[JavaScript] // 比如當(dāng)你對導(dǎo)航動態(tài)插入了二級菜單, 這時你需要重新去對它進行渲染 element.render('nav', 'test1'); // 對lay-filter="test1"所在導(dǎo)航重新渲染。4. 事件監(jiān)聽
4.1. 語法: element.on('event(過濾器值)', callback);
4.2. element模塊在layui事件機制中注冊了element模塊事件, 所以當(dāng)你使用layui.onevent()自定義模塊事件時, 請勿占用element名。目前element模塊所支持的事件如下表:
4.3. 默認(rèn)情況下, 事件所監(jiān)聽的是全部的元素, 但如果你只想監(jiān)聽某一個元素, 使用事件過濾器即可。
5. 監(jiān)聽選項卡切換
5.1. Tab選項卡點擊切換時觸發(fā), 回調(diào)函數(shù)返回一個object參數(shù), 攜帶兩個成員:
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)聽選項卡刪除
6.1. Tab選項卡被刪除時觸發(fā), 回調(diào)函數(shù)返回一個object參數(shù), 攜帶兩個成員:
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)航菜單的點擊
7.1. 當(dāng)點擊導(dǎo)航父級菜單和二級菜單時觸發(fā), 回調(diào)函數(shù)返回所點擊的菜單DOM對象:
element.on('nav(myNav)', function(dom){console.log(dom); // 得到當(dāng)前點擊的DOM對象 });8. 監(jiān)聽折疊面板
8.1. 當(dāng)折疊面板點擊展開或收縮時觸發(fā), 回調(diào)函數(shù)返回一個object參數(shù), 攜帶三個成員:
element.on('collapse(myCollapse)', function(data){console.log(data.show); // 得到當(dāng)前面板的展開狀態(tài), true或者falseconsole.log(data.title); // 得到當(dāng)前點擊面板的標(biāo)題區(qū)域DOM對象console.log(data.content); // 得到當(dāng)前點擊面板的內(nèi)容區(qū)域DOM對象 });9. 動態(tài)操作進度條
9.1. 你肯定不僅僅是滿足于進度條的初始化顯示, 通常情況下你需要動態(tài)改變它的進度值, 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="">最新活動</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="">移動模塊</a></dd><dd><a href="">后臺模版</a></dd><dd><a href="">電商平臺</a></dd></dl></li><li class="layui-nav-item"><a href="">社區(qū)</a></li></ul><br /><br /><h1>選項卡</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>進度條</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">手動添加一個進度條</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)前點擊的DOM對象});// 監(jiān)聽選項卡切換事件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)聽選項卡刪除事件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)前點擊面板的標(biāo)題區(qū)域DOM對象console.log(data.content); // 得到當(dāng)前點擊面板的內(nèi)容區(qū)域DOM對象});// 模擬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模块的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 031-表单元素
- 下一篇： 001_Servlet简介