jQuery UI Tabs customization for many tabs
- by Tauren
I'd like to implement a tab bar using jquery-ui-tabs that has been customised to work like it does on HootSuite. Try this on HootSuite to see what I mean:
Log in to your hootsuite.com account
Click the + symbol to the right of your tabs
Add tabs named "MMMMMMMMMMMMMMMMM" until a "More..." tab appears
You'll see this:
HootSuite includes the following features, all of which I would like to do:
Fit as many tabs as possible onto the screen. Users with larger screens would see more tabs.
If they run out of space, a "More..." tab would appear with a drop-down list
Clicking onto the More tab would drop down a list of additional tabs
Tabs can be dragged and rearranged.
Tabs in the More drop-down list can be dragged to the tab bar
Delete tabs with a small X next to the tab name
Add tabs with a + icon to the right of the last tab
I already have a tab bar working that does 4 and 6. I found a Paging Tab Plugin which is pretty cool, but works differently. Does anyone know of plugins or techniques that would help me accomplish the above?
My thought is to not really make the More tab a real tab, but just an object that looks like a tab. I'd add logic to the tabs.add method to calculate if another tab can fit. If it can't, then I would add the details of the tab to my separate "More" list. There'd be a fair amount of effort to get this all working, so if there are any plugins that would help, I'd love to hear about them.
