plusTabs

plugin to interact with jQuery UI tabs when there are too many tabs.

Plugin only renders "see more" tab/behavior when there are enough tabs to break to a second line - otherwise, tabs render normally.

Demo:

http://jsfiddle.net/jasonday/fdhaS/embedded/result/

Usage:

$("#tabs").plusTabs({     className: "plusTabs",    // allows for css scoping, default to .plusTabs     seeMore: true,            // the seeMore functionality - set to false to manually trigger later     seeMoreText: "More",      // configure "see more" copy     showCount: true,          // show total count of tabs     expandIcon: "▼ ",   // default is caret - can use other html elements. If using image, put image width inline     dropWidth: "66%",         // width of dropdown list     sizeTweak: 0              // # of pixels to subtract from active tab to adjust placement of "see more" }); 

TODO:

• default selected tab option
• remove dropwidth option (leave width to css styling)
• add option - only move tabs to dropdown if they break to a second line ( versus current state, where all tabs move to dropdown if any tabs break to second line )
• move drop placement out of plugin and into css (originally in code due to my own needs)
• include cursor tabbing behavior for drop
• Others? Unicorns?

License

Dual licensed under the MIT and GPL licenses:

http://www.opensource.org/licenses/mit-license.php

http://www.gnu.org/licenses/gpl.html

(c) Jason Day 2012