响应快速且易于使用的jQuery Tabs选项卡插件

pignose.tab.js是一款响应快速且易于使用的jquery Tabs选项卡插件。该选项卡插件支持多种样式的选项卡：普通选项卡，带子选项的选项卡，扁平风格的选项卡，响应式选项卡和手机选项卡等。

预览    下载

使用方法

在页面中引入jquery、pignose.tab.min.js和pignose.tab.min.css文件。

<link rel="stylesheet" href="dist/css/pignose.tab.min.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="dist/js/pignose.tab.min.js"></script>              

HTML结构

该选项卡的基本HTML结构如下：

<div class="tab">

  <ul>

    <li>

      <a href="#">TAB-1</a>

      <div>

        Hello i am normal tab!<br />

        This usage so easy and simple.

      </div>

    </li>

    <li>

      <a href="#">TAB-2</a>

      <div>

        Content2

      </div>

    </li>

    <li>

      <a href="#">TAB-3</a>

      <div>

        Content3

      </div>

    </li>

  </ul>

</div>                

初始化插件

在页面DOM元素加载完毕之后，可以通过pignoseTab()方法来初始化该选项卡插件。

$(function() {

  $('.tab').pignoseTab({

    animation: true,

    children: '.tab'

  });

});                 

配置参数

该Tabs选项卡可用的配置参数有：

参数	名称	默认值	描述
callback	null	function	当Tabs选项卡按钮被点击时触发的回调函数
animation	static	static, true, false	该选项用于开启和关闭动画，false相当于static
children	string	.sub-tab	如果使用子选项卡，你需要选择子选项卡的class名称
animationTime	300	毫秒时间	动画的时间
animationEasing	easeInOutCubic	Easing的名称	动画的 jQuery animation easing 名称