当前位置:主页 > 网页特效 > TAB标签 >

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

发布时间:2018/07/05 来源:互联网 浏览: 关键词:jquery 选项卡 tab 扁平化 
jQuery轻量级响应式扁平风格tabs选项卡插件 jQuery轻量级响应式扁平风格tabs选项卡插件
阿里云

简要教程

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

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

pwstabs-tabs选项卡的响应式效果

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

$ bower install pwstabs

使用方法

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

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

HTML结构

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

<divclass="hello_world">
   <divdata-pws-tab="anynameyouwant1"data-pws-tab-name="Tab Title 1">Our first tab</div>
   <divdata-pws-tab="anynameyouwant2"data-pws-tab-name="Tab Title 2">Our second tab</div>
   <divdata-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字体图标的名称

<divclass="hello_world">
<divdata-pws-tab="anynameyouwant1"data-pws-tab-name="Tab Title 1"data-pws-tab-icon="fa-heart">Our first tab</div>;
<divdata-pws-tab="anynameyouwant2"data-pws-tab-name="Tab Title 2"data-pws-tab-icon="fa-star">Our second tab</div>
<divdata-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

共有人阅读,期待你的评论!评论
Top