Bug Tracker


Ticket #2470 (closed feature: duplicate)

Opened 6 years ago

Last modified 2 years ago

Having tabs limit, sortable, and closable.

Reported by: k776 Owned by: klaus
Priority: minor Milestone: 1.2.4
Component: ui Version: 1.2.3
Keywords: Cc:
Blocking: Blocked by:


I have a script that you add a new tab/div when you press something. Trouble is, after a while these pile up.

Is there way to close a tab, make them sortable and also have them limited like Firefox does (if you have 100 tabs open, you get arrows to scroll through them)?

I looked at ExtJS but its too complicated. Ultimately it would be neat to do something like (combining with other plugins and such):

$('#tab_uls').setuptabs(closable, limit, sortable);

That would setup all li items in a ul tag into divs, with the div inside each li made into the content, then I could add a new li item using dom, and refresh tabs. The functionality of close/reorder would instantly become available.

Maybe perhaps for a future version? Would be VERY useful.


jquery-ui-2470-closable.patch Download (4.6 KB) - added by mdalessio 6 years ago.
Patch to jquery.ui-1.5b4 for closable tabs
examples.tar.gz Download (49.1 KB) - added by mdalessio 6 years ago.
Sample html, css and modified js - self contained in examples.tar.gz

Change History

comment:1 Changed 6 years ago by paul

  • Owner changed from paul to klaus

comment:2 Changed 6 years ago by mdalessio

Klaus, I'd like to work on the "closable" requirement. If you have any strong opinions on the code or HTML/CSS designs, please let me know (you can reach me at mike@…).

comment:3 Changed 6 years ago by mdalessio

Attaching patch (apply to 1.5b4) that implements closable tabs.

Attaching "examples.tar.gz" which contains Klaus's examples from  http://stilbuero.de/jquery/tabs_3/ with different 'closable' options applied, along with an appropriately modified CSS theme.

General Description:

  • A clickable "button" (really an <A> tag) appears on the tab. When the button is clicked, the tab is removed.
  • <LI> tags are dynamically modified to contain a second tag:
    <a onclick="return false;"><span>#{text}</span></a>
  • The #{text} snippet will be replaced by the configuration option closeText (which is '(x)' by default), and the snippet itself can be set via the configuration option closeTemplate.


  • New creation option closable can be set to false, 'all' or 'selected'
    • default is false, meaning no closable tabs.
    • 'all' means all tabs have are closable.
    • 'selected' means only the selected tab is closable.
  • New creation options closeTemplate and closeText allow overriding default markup.
  • When a tab is closable, a second <A> is dynamically added to the tab <LI> after the normal <A>
    • this tag is only added to the DOM if options.closable is non-false
    • this tag is hidden in unselected tabs if options.closable is 'selected'
  • CSS / styles
    • Note that this patch is backwards-compatible with CSS as long as the closable option is not turned on.
    • Close-button tag has class ui-tabs-close
    • However, existing CSS will probably need to be modified to support the new close button.
    • A new class, ui-tabs-tab is associated with the normal <A> to allow differentiation for themes/styles.
    • see examples.tar.gz for example CSS support

Changed 6 years ago by mdalessio

Patch to jquery.ui-1.5b4 for closable tabs

Changed 6 years ago by mdalessio

Sample html, css and modified js - self contained in examples.tar.gz

comment:4 Changed 6 years ago by mdalessio

I've posted a live demo of the "closable tabs" patch.

Please try it out at  http://pharos-ei.com/mike/jquery/examples/index.html

comment:5 Changed 6 years ago by mdalessio

Any feedback on this patch? Good or bad?

comment:6 Changed 5 years ago by jitzzz

mdalessio: your patch is GREAT. I wish that it could be a formal part of the official UI-Tabs release. IMHO, people are expecting a certain behavior from a tabbed interface... given that - the current version of the official Tabs plugin is not perfect yet, as it lacks the features mentioned in the ticket, especially the close button and the tabs scroll. Therefore, I would like to thank mdalession for picking up the gauntlet and writing the patch for us, the jQuery UI users.

please note: It's not supported by the new version of UI, and only works with the version included in the patch... I sure hope that it will be updated anytime soon... since I'm using the current version of jQuery UI...

comment:7 Changed 5 years ago by mdalessio

Any feedback from the core team on this patch?

Bueller? Bueller? :)

comment:8 Changed 5 years ago by klaus

  • Status changed from new to closed
  • Resolution set to duplicate

moved to jQuery UI bug tracker

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.


Add a comment

Modify Ticket

as closed

E-mail address and user name can be saved in the Preferences.

Note: See TracTickets for help on using tickets.