| name | value | default | description |
|---|---|---|---|
| callback | function |
null | If tab button is clicked, this callback will called. |
| animation | string |
static | You can trun on/off animation to set this property, false mean static. |
| children | string |
.sub-tab | If you use sub tab, you need to choose children's class name. |
| animationTime | number |
300 | This option can set animation time. (ms) |
| animationEasing | function |
easeInOutCubic | You can use jQuery animation easing. |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
| Article title | 2014-03-31 |
If you use bower.
bower install pg-tabIf you use npm.
npm install pg-tab<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>$(function() {
$('.tab').pignoseTab({
animation: true,
children: '.tab'
});
});.tab {
width: 100%;
max-width: 600px;
margin: 20px auto;
border: 1px solid #e7e7e7;
padding: 5px;
}