开发者

jQuery UI Tabs customization for many tabs

开发者 https://www.devze.com 2022-12-23 05:04 出处:网络
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:

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:

  1. Log in to your hootsuite.com account
  2. Click the + symbol to the right of your tabs
  3. Add tabs named "MMMMMMMMMMMMMMMMM" until a "More..." tab appears

You'll see this: hootsuite tab bar overflow http://issues.tauren.com/hootsuite-sample.png

HootSuite includes the following 开发者_如何学Gofeatures, all of which I would like to do:

  1. Fit as many tabs as possible onto the screen. Users with larger screens would see more tabs.
  2. If they run out of space, a "More..." tab would appear with a drop-down list
  3. Clicking onto the More tab would drop down a list of additional tabs
  4. Tabs can be dragged and rearranged.
  5. Tabs in the More drop-down list can be dragged to the tab bar
  6. Delete tabs with a small X next to the tab name
  7. 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!


what i did was to resize the tabs to squeeze to a certain point. I'd like to see who has the solution for this


I haven't done this yet, but I'm thinking about using Twitter Bootstrap to solve this. It looks like the Tabs with Dropdowns example might work. http://twitter.github.com/bootstrap/components.html#navs

I don't think it supports dragging and dropping tabs however.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号