layui選項(xiàng)卡效果實(shí)現(xiàn)代碼
更新時(shí)間：2017年05月19日 10:30:01 作者：廣信_(tái)劉東君
這篇文章主要為大家詳細(xì)介紹了layui彈出層效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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)式處理，所以無(wú)需擔(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>動(dòng)態(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)題，觀察地址欄變化，再刷新頁(yè)面。選項(xiàng)卡將會(huì)自動(dò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>簡(jiǎn)潔風(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)寬度是相對(duì)于父元素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ù)超過(guò)一定寬度</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. 寬度足夠，就不會(huì)出現(xiàn)右上圖標(biāo)；寬度不夠，就會(huì)開啟展開功能。
<br>2. 如果你的寬度是自適應(yīng)的，Tab會(huì)自動(dòng)判斷是否需要展開，并適用于所有風(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. 我個(gè)人比較喜歡卡片風(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(){
//新增一個(gè)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，這里以時(shí)間戳模擬下
})
}
,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
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jquery實(shí)現(xiàn)模擬百分比進(jìn)度條漸變效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)模擬百分比進(jìn)度條漸變效果代碼,涉及jQuery基于時(shí)間函數(shù)操作頁(yè)面元素樣式變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了jQuery中:checked選擇器用法,實(shí)例分析了:checked選擇器的功能、定義及選取選中的復(fù)選框或單選按鈕時(shí)的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery復(fù)選框多選賦值給文本框的方法,涉及jQuery相關(guān)選擇器的使用技巧,需要的朋友可以參考下2015-01-01
jquery實(shí)現(xiàn)垂直和水平菜單導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)垂直和水平菜單導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
jquery編寫Tab選項(xiàng)卡滾動(dòng)導(dǎo)航切換特效
這篇文章主要為大家詳細(xì)介紹了jquery編寫Tab選項(xiàng)卡滾動(dòng)導(dǎo)航切換特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
jquery中取消和綁定hover事件的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery中取消和綁定hover事件的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
ajax俗稱無(wú)刷新登錄或局部刷新登錄，這樣可以提高用戶體驗(yàn)了，文章講到了關(guān)于基于jquery ajax用法返回?cái)?shù)據(jù)與實(shí)例2用戶無(wú)刷新登錄2012-04-04
jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法分析
這篇文章主要介紹了jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法,結(jié)合實(shí)例形式分析了動(dòng)態(tài)添加元素?zé)o法綁定事件的原因與相關(guān)解決方法,需要的朋友可以參考下2018-01-01
實(shí)例講解JQuery中this和$(this)區(qū)別
這篇文章主要介紹了實(shí)例講解JQuery中this和$(this)的區(qū)別,this表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象,可以調(diào)用html對(duì)象所擁有的屬性和方法,$(this),代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象,可以調(diào)用jquery的方法和屬性值,需要的朋友可以參考下2014-12-12
獲取復(fù)選框的值的方法有很多，舉不勝舉，在本文將為大家介紹下jquery是如何獲取復(fù)選框的值的，感興趣的朋友不要錯(cuò)過(guò)2013-12-12