gerhobbelt / plustabs

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

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