layui選項(xiàng)卡效果實(shí)現(xiàn)代碼
更新時間：2017年05月19日 10:30:01 作者：廣信_劉東君
這篇文章主要為大家詳細(xì)介紹了layui彈出層效果的實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了layui選項(xiàng)卡的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選項(xiàng)卡</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>默認(rèn)風(fēng)格的Tab</legend>
</fieldset>
<div class="layui-tab">
<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 layui-show">
1. 高度默認(rèn)自適應(yīng)，也可以隨意固寬。
<br>2. Tab進(jìn)行了響應(yīng)式處理，所以無需擔(dān)心數(shù)量多少。
</div>
<div class="layui-tab-item">內(nèi)容2</div>
<div class="layui-tab-item">內(nèi)容3</div>
<div class="layui-tab-item">內(nèi)容4</div>
<div class="layui-tab-item">內(nèi)容5</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>動態(tài)操作Tab</legend>
</fieldset>
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11">網(wǎng)站設(shè)置</li>
<li lay-id="22">用戶管理</li>
<li lay-id="33">權(quán)限分配</li>
<li lay-id="44">商品管理</li>
<li lay-id="55">訂單管理</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 class="layui-tab-item">內(nèi)容4</div>
<div class="layui-tab-item">內(nèi)容5</div>
</div>
</div>
<div class="site-demo-button" style="margin-bottom: 0;">
<button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab項(xiàng)</button>
<button class="layui-btn site-demo-active" data-type="tabDelete">刪除：商品管理</button>
<button class="layui-btn site-demo-active" data-type="tabChange">切換到：用戶管理</button>
</div>
<!-- 通用-970*90 -->
<div>
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="6835627838"></ins>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>Hash地址定位</legend>
</fieldset>
<div class="layui-tab" lay-filter="test">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11">網(wǎng)站設(shè)置</li>
<li lay-id="22">用戶管理</li>
<li lay-id="33">權(quán)限分配</li>
<li lay-id="44">商品管理</li>
<li lay-id="55">訂單管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
點(diǎn)擊該Tab的任一標(biāo)題，觀察地址欄變化，再刷新頁面。選項(xiàng)卡將會自動定位到上一次切換的項(xiàng)
</div>
<div class="layui-tab-item">內(nèi)容2</div>
<div class="layui-tab-item">內(nèi)容3</div>
<div class="layui-tab-item">內(nèi)容4</div>
<div class="layui-tab-item">內(nèi)容5</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>簡潔風(fēng)格的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<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: 100px;">
<div class="layui-tab-item layui-show">內(nèi)容不一樣是要有，因?yàn)槟憧梢员O(jiān)聽tab事件（閱讀下文檔就是了）</div>
<div class="layui-tab-item">內(nèi)容2</div>
<div class="layui-tab-item">內(nèi)容3</div>
<div class="layui-tab-item">內(nèi)容4</div>
<div class="layui-tab-item">內(nèi)容5</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>卡片風(fēng)格的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-card">
<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: 100px;">
<div class="layui-tab-item layui-show">默認(rèn)寬度是相對于父元素100%適應(yīng)的，你也可以固定寬度。</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>當(dāng)Tab數(shù)超過一定寬度</legend>
</fieldset>
<div class="layui-tab layui-tab-card" style="width: 290px;">
<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: 100px;">
<div class="layui-tab-item layui-show">
1. 寬度足夠，就不會出現(xiàn)右上圖標(biāo)；寬度不夠，就會開啟展開功能。
<br>2. 如果你的寬度是自適應(yīng)的，Tab會自動判斷是否需要展開，并適用于所有風(fēng)格。
</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>帶刪除功能的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-card" lay-allowclose="true">
<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: 150px;">
<div class="layui-tab-item layui-show">
1. 我個人比較喜歡卡片風(fēng)格的，所以你發(fā)現(xiàn)又是以卡片的風(fēng)格舉例
2. 刪除功能適用于所有風(fēng)格
</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
var $ = layui.jquery
,element = layui.element(); //Tab的切換功能，切換事件監(jiān)聽等，需要依賴element模塊
//觸發(fā)事件
var active = {
tabAdd: function(){
//新增一個Tab項(xiàng)
element.tabAdd('demo', {
title: '新選項(xiàng)'+ (Math.random()*1000|0) //用于演示
,content: '內(nèi)容'+ (Math.random()*1000|0)
,id: new Date().getTime() //實(shí)際使用一般是規(guī)定好的id，這里以時間戳模擬下
})
}
,tabDelete: function(othis){
//刪除指定Tab項(xiàng)
element.tabDelete('demo', '44'); //刪除：“商品管理”
othis.addClass('layui-btn-disabled');
}
,tabChange: function(){
//切換到指定Tab項(xiàng)
element.tabChange('demo', '22'); //切換到：用戶管理
}
};
$('.site-demo-active').on('click', function(){
var othis = $(this), type = othis.data('type');
active[type] ? active[type].call(this, othis) : '';
});
//Hash地址的定位
var layid = location.hash.replace(/^#test=/, '');
element.tabChange('test', layid);
element.on('tab(test)', function(elem){
location.hash = 'test='+ $(this).attr('lay-id');
});
});
</script>
</body>
</html>
效果圖：
官網(wǎng)Tab
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在下面介紹一款jQuery的模板插件 tmpl，是由微軟想jQuery官方貢獻(xiàn)的模板插件2011-10-10
利用JQuery制作符合Web標(biāo)準(zhǔn)的QQ彈出消息
本篇文章主要介紹了利用JQuery制作符合Web標(biāo)準(zhǔn)的QQ彈出消息。這里所說的彈出消息指的是在網(wǎng)頁右下角升起又下去的那種框框,在這里用到了jQuery的自定義動畫2014-01-01
用jquery獲取select標(biāo)簽中選中的option值及文本的示例
下面小編就為大家分享一篇用jquery獲取select標(biāo)簽中選中的option值及文本的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
jQuery 技巧，以前發(fā)布了很多了，具體的可以參考腳本之家以前發(fā)布的文章。2010-04-04
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡單拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
jQuery實(shí)現(xiàn)的購物車物品數(shù)量加減功能代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的購物車物品數(shù)量加減功能,涉及jQuery針對鼠標(biāo)事件的響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
checkbox想必大家對這個控件并不陌生吧，畢竟在網(wǎng)頁制作過程中經(jīng)常會使用到，下面與大家分享個示例主要介紹checkbox的使用，感興趣的朋友可以參考下2013-08-08
詳解Bootstrap的iCheck插件checkbox和radio
這篇文章主要詳細(xì)介紹了Bootstrap的iCheck插件checkbox和radio的知識及bootstrap icheck獲取radio的value值的方法，非常不錯，具有參考借鑒價值，感興趣的朋友一起看下吧2016-08-08
網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理，是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)2017-03-03
瀑布流布局在目前貌似很火爆，具體的分析、原理、用到的知識等等可以看看以下幾位牛人寫的東西2012-10-10