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.
By the way, upon further examination, it doesn't look like HootSuite is using UI Tabs for this. I'd like to avoid creating a homebrew solution if there is already a jquery plugin that does this.
UPDATE: I've spent some more time on this, and now my custom solution does 1, 4, 6, and 7. However, if they run out of space, the default ui-tabs behavior occurs and a second row of tabs appears. I also found another scrolling solution that i might go with until I find time to build a hootsuite-like solution. Still, if anyone knows of other similar plugins, please let me know!