Tab overflow

jQuery UI is very solid and comes with a lot of great functionality. For anything that's not included there is usually a plug-in to fill the gap. ShiftEdit has some quite demanding requirements especially for the tabs component. For most sites showing a tabbed layout with various content is probably all they need. For ShiftEdit on the other hand, we need to be able to add and close tabs, drag tabs between panels, and right click them to see a tab menu. One thing I found lacking was how jQuery handles tab overflow. By default if you add too many tabs than can phystically fit then they will fall onto the next line:

The existing plug-ins I found either implement a scroller or a dropdown menu. This is ok in principle but I found the implementations to be quite buggy in the latest jQuery UI - especially when you throw in drag-drop re-ordering. I really wanted an implementation that uses Chrome's method of shrinking down tabs so that they fit in the tab bar. I couldn't find anything like this so I created a new plug-in.

Check out my chrome style tab overflow demo and tab overflow github repo.

This method has usability advantages as there isn't the disconnect when using a menu or scroller and accessing the tab. It's also easier to implement, as I don't have to worry about positioning any extra buttons or do anything special for tab re-ordering. Throw in a jQuery animation and it looks pretty swish too.

I hope somebody finds this useful as it's good to give back after making use of so many great jQuery plug-ins.

15/11/2015 permalink | Posted in web development | 115 Comments »

Bookmark and Share

About me

Adam Jimenez is a freelance web developer who has been professionally developing websites since 2000.

Find me