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