Examples

Simple

Tab 1

This is content for tab 1

Tab 2

This is content for tab 2

Tab 3

This is content for tab 3

Tab 4

This is content for tab 4

$example1 = $(".example1").hashTabs()

Smooth Scrolling

Allowsmooth scrollingon the tabs. This is great for when you want to programmatically select a tab, and then show this to the user.

Smooth

It's smooth time. Check out how smooth scrolling makes the experience nicer.

Cream Cheese

Bagels are awesome. But in other countries outside North America, the concept of the 'bagel' is not very well-known.

Milk

Milk may taste good. But recent studies are finding that consuming more than 1 cup a day may cause serious risk for heart disease.

$example2 = $(".example2").hashTabs({
 smoothScroll:
  enabled: on
})

Animation Examples

Animations can be easily customized usingcompanimation framework. Using the@extenddirective, you can easily change the way your tabs appear:

bounce
- bounce
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
fade
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
filters (experimental)
- blurIn
- blurInDown
- blurInLeft
- blurInRight
- blurInUp
- blurOut
- blurOutDown
- blurOutLeft
- blurOutRight
- blurOutUp
- greyscaleIn
- greyscaleOut
flip
- flip
- flipInX
- flipInY
- flipOutX
- flipOutY
roll
- rollIn
- rollOut
rotate
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
special
- flash
- hinge
- lightSpeedIn
- lightSpeedOut
- pulse
- shake
- swing
- tada
- wiggle
- wobble

Fade In

Tab 1

This is content for tab 1

Tab 2

This is content for tab 2

Tab 3

This is content for tab 3

Tab 4

This is content for tab 4

Fade In Up

Tab 1

This is content for tab 1

Tab 2

This is content for tab 2

Tab 3

This is content for tab 3

Tab 4

This is content for tab 4

Rotate in

Tab 1

This is content for tab 1

Tab 2

This is content for tab 2

Tab 3

This is content for tab 3

Tab 4

This is content for tab 4

Bounce In

Tab 1

This is content for tab 1

Tab 2

This is content for tab 2

Tab 3

This is content for tab 3

Tab 4

This is content for tab 4

Flip In

Tab 1

This is content for tab 1

Tab 2

This is content for tab 2

Tab 3

This is content for tab 3

Tab 4

This is content for tab 4

Roll In

Tab 1

This is content for tab 1

Tab 2

This is content for tab 2

Tab 3

This is content for tab 3

Tab 4

This is content for tab 4

Blur In

Tab 1

This is content for tab 1

Tab 2

This is content for tab 2

Tab 3

This is content for tab 3

Tab 4

This is content for tab 4

Light Speed In

Tab 1

This is content for tab 1

Tab 2

This is content for tab 2

Tab 3

This is content for tab 3

Tab 4

This is content for tab 4

Icons

Becausehash-tabsuses my sass boilerplate, you get a wealth ofvector icomoon icons. Check them out:

Profile

You could put a profile form here.

Contact Information

Please update your contact information.

Settings

Your settings have been modified. Please update them.

Quick Start

Download theproduction versionor thedevelopment version.

In your web page:

<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/hash-tabs/dist/jquery.hash-tabs.min.js"></script>
<script>
jQuery(function($) {
	$(".myTabContainer").hashTabs(); // "create hash tabs off of all elements with class myTabContainer"
});
</script>

Documentation

Documentation is generated usingcodoc.Please refer to the API docs.

API

Trigger A Given Tab

(AKA trigger tab byid)

$(".myTabs").hashTabs("triggerTab", "chocolates") // triggers tab with id #chocolates

Trigger A Given Tab by Index

$(".myTabs").hashTabs("triggerTabByIndex", 1) // triggers second tab (with index 1) in tab set

Trigger Next Tab (to Right)

$(".myTabs").hashTabs("selectNext") // triggers right-most tab to current tab

Trigger Previous Tab (to Left)

$(".myTabs").hashTabs("selectPrevious") // triggers left-most tab to current tab

NOTE: tabs willcyclein a clockwise direction. For example, if you are on the last tab to the right, selecting next will fold back over to the first tab (0) to the left

Contributing

First, make sure to install allbowerdependencies:

bower install

Next, install node dependencies:

npm install

Building

Currently, I am using the built-ingruntsettings which ship with theyeomangenerator I used.

Unit Tests

Unit tests are written usingqunit. Ajs test driverconfiguration is also included for in-IDE testing (can use PHPStorm), but tests can also be run from thetest/hash-tabs.htmlfile.