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

Documentation

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.