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
This is content for tab 1
This is content for tab 2
This is content for tab 3
This is content for tab 4
$example1 = $(".example1").hashTabs()
Allowsmooth scrollingon the tabs. This is great for when you want to programmatically select a tab, and then show this to the user.
It's smooth time. Check out how smooth scrolling makes the experience nicer.
Bagels are awesome. But in other countries outside North America, the concept of the 'bagel' is not very well-known.
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
})
Animations can be easily customized usingcompanimation framework. Using the@extend
directive, you can easily change the way your tabs appear:
This is content for tab 1
This is content for tab 2
This is content for tab 3
This is content for tab 4
This is content for tab 1
This is content for tab 2
This is content for tab 3
This is content for tab 4
This is content for tab 1
This is content for tab 2
This is content for tab 3
This is content for tab 4
This is content for tab 1
This is content for tab 2
This is content for tab 3
This is content for tab 4
This is content for tab 1
This is content for tab 2
This is content for tab 3
This is content for tab 4
This is content for tab 1
This is content for tab 2
This is content for tab 3
This is content for tab 4
This is content for tab 1
This is content for tab 2
This is content for tab 3
This is content for tab 4
This is content for tab 1
This is content for tab 2
This is content for tab 3
This is content for tab 4
(AKA trigger tab byid
)
$(".myTabs").hashTabs("triggerTab", "chocolates") // triggers tab with id #chocolates
$(".myTabs").hashTabs("triggerTabByIndex", 1) // triggers second tab (with index 1) in tab set
$(".myTabs").hashTabs("selectNext") // triggers right-most tab to current tab
$(".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
First, make sure to install allbowerdependencies:
bower install
Next, install node dependencies:
npm install
Currently, I am using the built-ingruntsettings which ship with theyeomangenerator I used.
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.html
file.