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

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

发布时间:2018/07/07 来源:互联网 浏览: 关键词:jquery 选项卡 tab 
响应快速且易于使用的jQuery Tabs选项卡插件 响应快速且易于使用的jQuery Tabs选项卡插件
阿里云

简要教程

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

安装

可以通过bower或npm来安装该选项卡插件。

bower install pg-tab
npm install pg-tab   

使用方法

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

<linkrel="stylesheet"href="dist/css/pignose.tab.min.css"/>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="dist/js/pignose.tab.min.js"></script>   

HTML结构

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

<divclass="tab">
  <ul>
    <li>
      <ahref="#">TAB-1</a>
      <div>
        Hello i am normal tab!<br/>
        This usage so easy and simple.
      </div>
    </li>
    <li>
      <ahref="#">TAB-2</a>
      <div>
        Content2
      </div>
    </li>
    <li>
      <ahref="#">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 名称

PIGNOSE-Tab选项卡插件的github地址为:https://github.com/KennethanCeyer/PIGNOSE-Tab

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top