http://jquery.aamirafridi.com/jst/
Problem:
Using jQuery-ui tabs we should know the number of tabs so that we can adjust the width of the tabs wrapper so all the tabs can adjust itself. But what if we want to add the tabs dynamically with javascript? To solve this problem I google for some sort of plugins but I found no proper jQuery plugin so that we can have two arrows (next and previous) to navigate through tabs.
I found two links:
- http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html - not jQuery
- http://www.seyfertdesign.com/jquery/ui.tabs.paging.html - jQuery but with no animations and works with window.resize only? What if I add new tab with javascript?
Solution:
The solution is jQuery scrollableTabs with many features you might need.Main features:
- make tabs closable
- control animation speed
- control easing
- can make the wrapper resizable (depends on jQueryUi.resizable plugin)
- navigate to last tab onload
- Support jQuery themeroller
- No extra CSS code/file needed
- Automatically navigate and show the full tab if clicked on partially hidden tab
- Built-in event to add new tab
Plugin options:
You start plugin without any of these features i.e Plugin is capable of being start without any options provided with default options.- animationSpeed (default: 100) Length of the animation.
- closable (default: false) User can close the tab / but cannot close if there is only one tab remaining
- resizable (default: false) User can resize the tabs wrapper
- resizeHandles (default: 'e,s,se') The directions that user can resize the tabs wrapper in.(http://jqueryui.com/demos/resizable/#option-handles)
- loadLastTab (default: false) If true than tabs will animate to the last tab when loaded.
- easing (default: 'swing') Name of the easing equation.
- Event: 'addTab' an event to add new tab which tabs the label and content element as arguments (see examples for details)
