|
http://www./jQuery/Tabs/201504021612.html
PWS Tabs是一款輕量級(jí)jQuery tabs選項(xiàng)卡插件,。它可以創(chuàng)建響應(yīng)式的,、扁平風(fēng)格的標(biāo)簽式選項(xiàng)卡,，并且可以定制選項(xiàng)卡的標(biāo)簽顏色，并且tabs進(jìn)行切換的時(shí)候還帶有CSS3動(dòng)畫(huà)效果,。
你可以在tabs選項(xiàng)卡中嵌入視頻,、谷歌地圖、圖片和文本等內(nèi)容,，甚至可以將這些內(nèi)容混合放置在一個(gè)選項(xiàng)卡頁(yè)上,。下圖是它的響應(yīng)式效果預(yù)覽圖：
可以通過(guò)bower來(lái)安裝這個(gè)tabs選項(xiàng)卡插件：
使用方法
使用這個(gè)tabs選項(xiàng)卡插件首先要引入必要的文件：
<link type="text/css" rel="stylesheet" href="jquery.pwstabs.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"</script>
<script src="jquery.pwstabs-1.2.1.js"></script>
|
HTML結(jié)構(gòu)
該選項(xiàng)卡插件的html結(jié)構(gòu)可以使用一個(gè)<div>作為包裹容器，里面的每一個(gè)子元素<div>是一個(gè)選項(xiàng)卡選項(xiàng)頁(yè),，使用HTML5的data-pws-*首先來(lái)為每一個(gè)選項(xiàng)頁(yè)指定它的ID和名稱(chēng),。
<div class="hello_world">
<div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1">Our first tab</div>
<div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2">Our second tab</div>
<div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3">Our third tab</div>
</div>
|
data-pws-tab屬性用于指定ID和初始化tab。
data-pws-tab-name屬性用于tab上顯示的名稱(chēng),。
JAVASCRIPT
通過(guò)父元素選擇器進(jìn)行調(diào)用可以生成一個(gè)100%父容器寬度和帶縮放動(dòng)畫(huà)效果的基本tabs選項(xiàng)卡,。
jQuery(document).ready(function($){
$('.hello_world').pwstabs();
});
|
下面是通過(guò)參數(shù)來(lái)調(diào)用插件的方式：
jQuery(document).ready(function($){
$('.hello_world').pwstabs({
// scale / slideleft / slideright / slidetop / slidedown / none
effect: 'scale',
// The tab to be opened by default
defaultTab: 1,
// Set custom container width
// Any size value (1,2,3.. / px,pt,em,%,cm..)
containerWidth: '100%',
// Tabs position: horizontal / vertical
tabsPosition: 'horizontal',
// Tabs horizontal position: top / bottom
horizontalPosition: 'top',
// Tabs vertical position: left / right
verticalPosition: 'left',
// BETA: Make tabs container responsive: true / false (!!! BETA)
responsive: false,
// Themes available: default: '' / pws_theme_violet / pws_theme_green / pws_theme_yellow
// pws_theme_gold / pws_theme_orange / pws_theme_red / pws_theme_purple / pws_theme_grey
theme: '',
// Right to left support: true/ false
rtl: false
});
});
|
CSS樣式
該tabs選項(xiàng)卡插件支持Font Awesome 4.2.0。
要使用Font Awesome字體圖標(biāo),，首先要引入font-awesome.min.css文件：
<link type="text/css" rel="stylesheet" href="../assets/font-awesome-4.2.0/css/font-awesome.min.css">
|
然后可以使用data-pws-tab-icon首先來(lái)設(shè)置你想要的圖標(biāo),。你可以在這里找到你想要的Font Awesome字體圖標(biāo)的名稱(chēng)
<div class="hello_world">
<div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1" data-pws-tab-icon="fa-heart">Our first tab</div>;
<div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2" data-pws-tab-icon="fa-star">Our second tab</div>
<div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3" data-pws-tab-icon="fa-map-marker">Our third tab</div>
</div>
|
配置參數(shù)
| 參數(shù)選項(xiàng) |
默認(rèn)值 |
描述 |
可用值 |
類(lèi)型 |
| effect |
scale |
Transition effect |
scale / slideleft / slideright / slidetop / slidedown / none |
string |
| defaultTab |
1 |
默認(rèn)選擇哪一個(gè)tab |
Tab的ID號(hào)，從1開(kāi)始,。（1,2,3...） |
number |
| containerWidth |
100% |
選項(xiàng)卡容器的寬度 |
可以是任何尺寸單位（px,pt,em,%,cm...） |
string |
| horizontalPosition |
top |
定義水平tabs的位置 |
top / bottom |
string |
| verticalPosition |
left |
定義垂直tabs的位置 |
left / right |
string |
| theme |
'' |
改變tabs選項(xiàng)卡的主題 |
pws_theme_violet / pws_theme_green
pws_theme_yellow / pws_theme_gold
pws_theme_orange / pws_theme_red
pws_theme_purple / pws_theme_grey |
string |
| responsive |
false |
使tabs選項(xiàng)卡具有響應(yīng)式效果（BETA功能） |
true / false |
boolean |
| rtl |
false |
支持從右向左顯示 |
true / false |
boolean |
|
