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:
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 (2)

examples.tar.gz (49.1 KB) - added by mdalessio May 16, 2008 03:23AM UTC.

Sample html, css and modified js - self contained in examples.tar.gz
jquery-ui-2470-closable.patch (4.6 KB) - added by mdalessio May 15, 2008 08:45PM UTC.

Patch to jquery.ui-1.5b4 for closable tabs

Change History (8)

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 October 27, 2008 01:56PM UTC by jitzzz comment:6

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

Changed October 27, 2008 09:48PM UTC by mdalessio comment:7

Any feedback from the core team on this patch?

Bueller? Bueller? :)

Changed January 16, 2009 07:28AM UTC by klaus comment:8

resolution:	→ duplicate
status:	new → closed

moved to jQuery UI bug tracker

Side navigation

#2470 closed feature (duplicate)