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">網站設置</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">網站設置</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">網站設置</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">網站設置</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">網站設置</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">網站設置</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">網站設置</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>
效果圖：
官網Tab
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了jquery實現(xiàn)模擬百分比進度條漸變效果代碼,涉及jQuery基于時間函數(shù)操作頁面元素樣式變換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了jQuery中:checked選擇器用法,實例分析了:checked選擇器的功能、定義及選取選中的復選框或單選按鈕時的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery復選框多選賦值給文本框的方法,涉及jQuery相關選擇器的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了jquery實現(xiàn)垂直和水平菜單導航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細介紹了jquery編寫Tab選項卡滾動導航切換特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
jquery中取消和綁定hover事件的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query中取消和綁定hover事件的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
ajax俗稱無刷新登錄或局部刷新登錄，這樣可以提高用戶體驗了，文章講到了關于基于jquery ajax用法返回數(shù)據(jù)與實例2用戶無刷新登錄2012-04-04
jQuery動態(tài)添加元素無法觸發(fā)綁定事件的解決方法分析
這篇文章主要介紹了jQuery動態(tài)添加元素無法觸發(fā)綁定事件的解決方法,結合實例形式分析了動態(tài)添加元素無法綁定事件的原因與相關解決方法,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了實例講解JQuery中this和$(this)的區(qū)別,this表示當前的上下文對象是一個html對象,可以調用html對象所擁有的屬性和方法,$(this),代表的上下文對象是一個jquery的上下文對象,可以調用jquery的方法和屬性值,需要的朋友可以參考下2014-12-12
獲取復選框的值的方法有很多，舉不勝舉，在本文將為大家介紹下jquery是如何獲取復選框的值的，感興趣的朋友不要錯過2013-12-12