jQuery封裝的tab選項(xiàng)卡插件分享
在網(wǎng)站開(kāi)發(fā)中經(jīng)常會(huì)用到選項(xiàng)卡功能,為了節(jié)省一下寫(xiě)代碼時(shí)間,封裝了一下tab插件,方便調(diào)用。
創(chuàng)建選項(xiàng)卡組件
使用方法: html結(jié)構(gòu)
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="#tabs-2">tab-2</a></li> <li><a href="#tabs-3">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> <div id="tabs-2">tabs-2-panel</div> <div id="tabs-3">tabs-3-panel</div> </div>
js調(diào)用
$('#tab').tabs();
相關(guān)參數(shù)說(shuō)明:
初始化參數(shù)
參數(shù) 默認(rèn)值 參數(shù)說(shuō)明
active null 設(shè)置被選中的選項(xiàng)卡的索引,默認(rèn)值為null,例如設(shè)置選中第一個(gè)選項(xiàng)卡則設(shè)置為0
event click 選項(xiàng)卡的切換事件,默認(rèn)為點(diǎn)擊事件,可以設(shè)置mouseover
添加選項(xiàng)卡參數(shù)
參數(shù) 默認(rèn)值 參數(shù)說(shuō)明
title 空 選項(xiàng)卡顯示的文本,默認(rèn)為空
href 空 選項(xiàng)卡鏈接,如果為靜態(tài)數(shù)據(jù)則填入對(duì)應(yīng)的字符串(#str),遠(yuǎn)程數(shù)據(jù)則為對(duì)應(yīng)的url
content 空 選項(xiàng)卡為靜態(tài)數(shù)據(jù)時(shí)的內(nèi)容,動(dòng)態(tài)數(shù)據(jù)則無(wú)需填寫(xiě)
iconCls true 選項(xiàng)卡關(guān)閉按鈕,默認(rèn)為顯示true,不顯示則為false
Demo:
例子1: 靜態(tài)數(shù)據(jù):
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="#tabs-2">tab-2</a></li> <li><a href="#tabs-3">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> <div id="tabs-2">tabs-2-panel</div> <div id="tabs-3">tabs-3-panel</div> </div>
js調(diào)用:
$('#tabs').tabs();
例子2: 通過(guò)遠(yuǎn)程數(shù)據(jù)加載頁(yè)面,則動(dòng)態(tài)創(chuàng)建panel,
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="index.jsp">tab-2</a></li> <li><a href="index.html">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> </div>
js調(diào)用:
$('#tabs').tabs();
例子3: 傳入?yún)?shù),設(shè)置選項(xiàng)卡切換事件為mouseover
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="index.jsp">tab-2</a></li> <li><a href="index.html">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> </div>
js調(diào)用:
$('#tabs').tabs({event:'mouseover'});
例子4: 添加選項(xiàng)卡:
<input type="button" value="添加選項(xiàng)卡" onclick="addTab()"> <div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="index.jsp">tab-2</a></li> <li><a href="index.html">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> </div>
js調(diào)用:
$('#tabs').tabs(); var tabCount =4; function addTab(){ tab.tabs('add',{ title:'tab-'+tabCount+'', href:'#tab-'+tabCount+'', content:'Tab----'+tabCount+'', iconCls:true }); tabCount++; }
總結(jié):
通過(guò)不同的Id調(diào)用,就可以創(chuàng)建不同的tab結(jié)構(gòu),樣式則通過(guò)id來(lái)自定義不同的樣式即可。
小弟不才.歡迎各位大神指教....
Demo下載地址: MyUI-tabs
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- 基于JQuery的6個(gè)Tab選項(xiàng)卡插件
- JQuery Tab選項(xiàng)卡效果代碼改進(jìn)版
- jQuery實(shí)現(xiàn)TAB選項(xiàng)卡切換特效簡(jiǎn)單演示
- jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果簡(jiǎn)單演示
- jquery實(shí)現(xiàn)超簡(jiǎn)潔的TAB選項(xiàng)卡效果代碼
- jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼
- jQuery實(shí)現(xiàn)移動(dòng)端Tab選項(xiàng)卡效果
- jquery實(shí)現(xiàn)tab選項(xiàng)卡切換效果(懸停、下方橫線(xiàn)動(dòng)畫(huà)位移)
- 動(dòng)感效果的TAB選項(xiàng)卡jquery 插件
- 基于jquery實(shí)現(xiàn)的tab選項(xiàng)卡功能示例【附源碼下載】
相關(guān)文章
jQuery窗口、文檔、網(wǎng)頁(yè)各種高度的精確理解
這篇文章主要幫助大家快速理解jQuery瀏覽器窗口、網(wǎng)頁(yè)文檔及可視窗口的各種高度,需要的朋友可以參考下2014-07-07舉例講解jQuery對(duì)DOM元素的向上遍歷、向下遍歷和水平遍歷
使用jQuery可以更加容易地遍歷DOM的父級(jí)、子級(jí)和同級(jí)元素,這里我們就來(lái)舉例講解jQuery對(duì)DOM元素的向上遍歷、向下遍歷和水平遍歷:2016-07-07js頁(yè)面滾動(dòng)時(shí)層智能浮動(dòng)定位實(shí)現(xiàn)(jQuery/MooTools)
關(guān)于層的智能浮動(dòng)效果早在幾年前我就在國(guó)外的一些個(gè)人網(wǎng)站的垂直導(dǎo)航上見(jiàn)到了,現(xiàn)在似乎在國(guó)內(nèi)一些商業(yè)網(wǎng)站上也屢見(jiàn)此效果2011-08-08jQuery截取指定長(zhǎng)度字符串的實(shí)現(xiàn)原理及代碼
截取指定長(zhǎng)度字符串操作在新聞列表這種類(lèi)型的操作中大量應(yīng)用,下面有個(gè)示例,大家可以參考下2014-07-07jQuery使用animate實(shí)現(xiàn)ul列表項(xiàng)相互飄動(dòng)效果示例
這篇文章主要介紹了jQuery使用animate實(shí)現(xiàn)ul列表項(xiàng)相互飄動(dòng)效果,結(jié)合實(shí)例形式分析了jQuery使用animate動(dòng)畫(huà)切換的操作技巧,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)帶延遲效果的滑動(dòng)菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶延遲效果的滑動(dòng)菜單,涉及jquery鼠標(biāo)事件操作頁(yè)面屬性定時(shí)變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09分享10篇優(yōu)秀的jQuery幻燈片制作教程及應(yīng)用案例
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架,使用簡(jiǎn)單靈活,同時(shí)還有許多成熟的插件可供選擇,它可以幫助你在項(xiàng)目中加入一些非常好的效果。2011-04-04