jQuery轻量级响应式扁平风格tabs选项卡插件

http://www./jQuery/Tabs/201504021612.html

PWS Tabs是一款轻量级jQuery tabs选项卡插件。它可以创建响应式的、扁平风格的标签式选项卡，并且可以定制选项卡的标签颜色，并且tabs进行切换的时候还带有CSS3动画效果。

你可以在tabs选项卡中嵌入视频、谷歌地图、图片和文本等内容，甚至可以将这些内容混合放置在一个选项卡页上。下图是它的响应式效果预览图：

可以通过bower来安装这个tabs选项卡插件：

$ bower install pwstabs

使用方法

使用这个tabs选项卡插件首先要引入必要的文件：

<link type="text/css" rel="stylesheet" href="jquery.pwstabs.css"> <script src="//code.jquery.com/jquery-1.11.2.min.js"</script> <script src="jquery.pwstabs-1.2.1.js"></script>

HTML结构

该选项卡插件的html结构可以使用一个<div>作为包裹容器，里面的每一个子元素<div>是一个选项卡选项页，使用HTML5的data-pws-*首先来为每一个选项页指定它的ID和名称。

<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上显示的名称。

JAVASCRIPT

通过父元素选择器进行调用可以生成一个100%父容器宽度和带缩放动画效果的基本tabs选项卡。

jQuery(document).ready(function($){    $('.hello_world').pwstabs(); });

下面是通过参数来调用插件的方式：

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选项卡插件支持Font Awesome 4.2.0。

要使用Font Awesome字体图标，首先要引入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首先来设置你想要的图标。你可以在这里找到你想要的Font Awesome字体图标的名称

<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>

配置参数

参数选项	默认值	描述	可用值	类型
effect	scale	Transition effect	scale / slideleft / slideright / slidetop / slidedown / none	string
defaultTab	1	默认选择哪一个tab	Tab的ID号，从1开始。（1,2,3...）	number
containerWidth	100%	选项卡容器的宽度	可以是任何尺寸单位（px,pt,em,%,cm...）	string
horizontalPosition	top	定义水平tabs的位置	top / bottom	string
verticalPosition	left	定义垂直tabs的位置	left / right	string
theme	''	改变tabs选项卡的主题	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选项卡具有响应式效果（BETA功能）	true / false	boolean
rtl	false	支持从右向左显示	true / false	boolean