PIGNOSE Tab

View project on Github Download Zip

Normal Tab

  • TAB-1
    Hi there!
    This is PIGNOSE-Tab
    If you any question about the plugin
    Use Issue page.
  • TAB-2
    Content2
  • TAB-3
    Content3

Sub Tab

Multiple depth Tab

Board Tab

  • TAB-1
    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
    More article1
  • TAB-2
    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
    More article2
  • TAB-3
    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
    More article3

Styled Tab

  • TAB-1
    You can customize tab style by edit style sheet easily.
  • TAB-2
    You can customize tab style by edit style sheet easily.
  • TAB-3
    You can customize tab style by edit style sheet easily.

Response tab

Mobile tab

  • TAB-1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
    Long Content1
  • TAB-2
    Content2
  • TAB-3
    Content3

bower

If you use bower.

bower install pg-tab

npm

If you use npm.

npm install pg-tab

options

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.

example

HTML Javascript CSS 
<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;
}