#2470 closed feature (duplicate)

Opened March 07, 2008 04:44AM UTC

Closed January 23, 2009 09:16PM UTC

Last modified October 11, 2012 09:15PM UTC

Having tabs limit, sortable, and closable.

Reported by: k776 Owned by: klaus.hartl
Priority: minor Milestone:
Component: ui.tabs Version: 1.5
Keywords: Cc:
Blocked by: Blocking:
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 (0)
Change History (11)

Changed March 11, 2008 10:10AM UTC by paul comment:1

owner: paul → klaus

Changed May 15, 2008 01:58PM UTC by mdalessio comment:2

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@csa.net).

Changed May 15, 2008 08:44PM UTC by mdalessio comment:3

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 May 17, 2008 12:01PM UTC by mdalessio comment:4

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

Changed May 21, 2008 05:12PM UTC by mdalessio comment:5

Any feedback on this patch? Good or bad?

Changed May 24, 2008 03:39AM UTC by comment:6

milestone: 1.2.4

Milestone 1.2.4 deleted

Changed May 24, 2008 07:32PM UTC by paul comment:7

component: ui.core → ui.tabs
version: 1.2.3 → 1.5b4

Changed June 11, 2008 02:16AM UTC by klaus.hartl comment:8

owner: klaus → klaus.hartl
status: new → assigned
version: 1.5b4 → 1.5

Changed August 17, 2008 10:22AM UTC by Cloudream comment:9

milestone: → TDB

Changed January 23, 2009 09:16PM UTC by klaus.hartl comment:10

resolution: → duplicate
status: assigned → closed

Broke this ticket down into smaller tasks.

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:11

milestone: TBD

Milestone TBD deleted