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

当前位置:主页 > jQuery库 > 选项卡 > jQuery轻量级响应式扁平风格tabs选项卡插件
jQuery轻量级响应式扁平风格tabs选项卡插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-04-02
    阅读:
简要教程

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

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

pwstabs-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>是一个选项卡选项页,使用HTML5data-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