快捷導(dǎo)航

基于layui內(nèi)置模塊(element常用元素的操作)

更新時(shí)間：2019年09月20日 11:02:36 作者：小巷下起了雨

今天小編就為大家分享一篇基于layui內(nèi)置模塊(element常用元素的操作)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

常用元素操作是個(gè)什么鬼，從官方解釋簡(jiǎn)單來(lái)說(shuō)就是在頁(yè)面中有一些動(dòng)態(tài)的效果，當(dāng)然不是我們說(shuō)的動(dòng)態(tài)網(wǎng)頁(yè)那個(gè)動(dòng)態(tài)，這些動(dòng)態(tài)效果呢，就是通過(guò)我們?nèi)ゼ虞delement模塊以后，默認(rèn)為頁(yè)面的這些元素添加的一些動(dòng)態(tài)效果，比如layui文檔頂部的導(dǎo)航下部的小滑塊的效果,看下圖：

當(dāng)然不僅僅包含這些，還有其他的一些比如tab的切換、折疊面板的展開(kāi)與合并、二級(jí)導(dǎo)航的的展開(kāi)與合并等等。

默認(rèn)效果當(dāng)然不用多說(shuō)，只要我們能實(shí)現(xiàn)element元素的加載，也就是一步搞定的事情，重點(diǎn)還是看看element中一些常用的方法和簡(jiǎn)單的使用，方法總結(jié)如下：

下面是對(duì)監(jiān)聽(tīng)事件的簡(jiǎn)單使用，效果圖如下（注意console控制臺(tái)的輸出變化）：

實(shí)現(xiàn)效果的代碼如下：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script type="application/javascript" src="jquery-3.2.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" >
<script type="application/javascript" src="layui/lay/dest/layui.all.js"></script>
</head>
<body>
<div class="layui-main" style="margin-bottom: 30px;margin-top: 20px">
<ul class="layui-nav" lay-filter="bigData">
<li class="layui-nav-item"><a href="">最新活動(dòng)</a></li>
<li class="layui-nav-item layui-this"><a href="">產(chǎn)品</a></li>
<li class="layui-nav-item" href="">大數(shù)據(jù)</a></li>
<li class="layui-nav-item">
<a href="javascript:;" rel="external nofollow" >解決方案</a>
<dl class="layui-nav-child"> <!-- 二級(jí)菜單 -->
<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>
</div>
<div class="layui-main" style="margin-bottom: 30px;">
<div class="layui-tab" lay-filter="test">
<ul class="layui-tab-title">
<li class="layui-this">網(wǎng)站設(shè)置</li>
<li>用戶管理</li>
<li>權(quán)限分配</li>
<li>商品管理</li>
<li>訂單管理</li>
</ul>
<div class="layui-tab-content" style=" height: 120px;width: 100%;">
<div class="layui-tab-item">網(wǎng)站設(shè)置</div>
<div class="layui-tab-item">用戶管理</div>
<div class="layui-tab-item">權(quán)限分配</div>
<div class="layui-tab-item">商品管理</div>
<div class="layui-tab-item">訂單管理</div>
</div>
</div>
</div>
<div class="layui-main" style="margin-bottom: 30px;margin-top: 20px">
<div class="layui-collapse" lay-filter="collapseFilter" lay-accordion>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">
杜甫的思想核心是儒家的仁政思想，他有“致君堯舜上，再使風(fēng)俗淳”的宏偉抱負(fù)。杜甫雖然在世時(shí)名聲并不顯赫，但后來(lái)聲名遠(yuǎn)播，
對(duì)中國(guó)文學(xué)和日本文學(xué)都產(chǎn)生了深遠(yuǎn)的影響。杜甫共有約1500首詩(shī)歌被保留了下來(lái)，大多集于《杜工部集》。
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content">
李清照出生于書(shū)香門(mén)第，早期生活優(yōu)裕，其父李格非藏書(shū)甚富，她小時(shí)候就在良好的家庭環(huán)境中打下文學(xué)基礎(chǔ)。出嫁后與夫趙明誠(chéng)共同致力于書(shū)畫(huà)金石的搜集整理。
金兵入據(jù)中原時(shí)，流寓南方，境遇孤苦。所作詞，前期多寫(xiě)其悠閑生活，后期多悲嘆身世，情調(diào)感傷。形式上善用白描手法，自辟途徑，語(yǔ)言清麗。
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content">
魯迅一生在文學(xué)創(chuàng)作、文學(xué)批評(píng)、思想研究、文學(xué)史研究、翻譯、美術(shù)理論引進(jìn)、基礎(chǔ)科學(xué)介紹和古籍校勘與研究等多個(gè)領(lǐng)域具有重大貢獻(xiàn)。
他對(duì)于五四運(yùn)動(dòng)以后的中國(guó)社會(huì)思想文化發(fā)展具有重大影響，蜚聲世界文壇，尤其在韓國(guó)、日本思想文化領(lǐng)域有極其重要的地位和影響，被譽(yù)為“二十世紀(jì)東亞文化地圖上占最大領(lǐng)土的作家”。
</div>
</div>
</div>
</div>
<div class="layui-main" style="margin-bottom: 30px;margin-top: 20px">
<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
<div class="layui-progress-bar layui-bg-blue" lay-percent="20%"></div>
</div>
<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
<button class="layui-btn site-demo-active" data-type="setPercent">設(shè)置50%</button>
<!-- <button class="layui-btn site-demo-active" data-type="loading">模擬loading</button>-->
</div>
</div>
<script>
layui.use('element',function () {
//實(shí)例化element
var element = layui.element();
//初始化動(dòng)態(tài)元素，一些動(dòng)態(tài)生成的元素如果不設(shè)置初始化，將不會(huì)有默認(rèn)的動(dòng)態(tài)效果
element.init();
//導(dǎo)航條點(diǎn)擊監(jiān)聽(tīng)
element.on('nav(bigData)',function (elem) {
console.log(elem);
});
//tab切換監(jiān)聽(tīng)
element.on('tab(test)',function (data) {
console.log(data);
});
//手風(fēng)琴折疊面板開(kāi)啟關(guān)閉監(jiān)聽(tīng)
element.on('collapse(collapseFilter)',function (data) {
console.log(data.show);
console.log(data.title);
console.log(data.content)
});
//觸發(fā)的事件
var active = {
setPercent: function () {
//設(shè)置50%進(jìn)度
element.progress('demo', '50%')
}
}
//點(diǎn)擊事件的監(jiān)聽(tīng)
$('.site-demo-active').on('click', function(){
var othis = $(this);
var type = $(this).data('type');
active[type] ? active[type].call(this, othis) : '';
});
})
</script>
</body>
</html>

內(nèi)置模塊element就簡(jiǎn)單學(xué)習(xí)這么多，更多學(xué)習(xí)請(qǐng)參看官方的文檔：http://www.layui.com/doc/modules/element.html#on

以上這篇基于layui內(nèi)置模塊(element常用元素的操作) 就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: