欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

基于layui內(nèi)置模塊(element常用元素的操作)-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的十年時間我們累計服務(wù)了上千家以及全國政企客戶，如樓梯護欄等企業(yè)單位，完善的項目管理流程，嚴格把控項目進度與質(zhì)量監(jiān)控加上過硬的技術(shù)實力獲得客戶的一致夸獎。

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

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

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

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

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

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文名稱：基于layui內(nèi)置模塊(element常用元素的操作)-創(chuàng)新互聯(lián)
新聞來源：http://chinadenli.net/article24/dggpje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站營銷、定制開發(fā)、品牌網(wǎng)站建設(shè)、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化