Bug Tracker

Ticket #2470 (closed feature: duplicate)

Opened 7 years ago

Last modified 3 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:

Description

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.

Attachments

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 7 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.

Specifics:

  • 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 6 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 6 years ago by mdalessio

Any feedback from the core team on this patch?

Bueller? Bueller? :)

comment:8 Changed 6 years ago by klaus

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

moved to jQuery UI bug tracker

Note: See TracTickets for help on using tickets.