#2470 closed feature (duplicate)
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)
Change History (10)
comment:1 Changed 15 years ago by
Owner: | changed from paul to klaus |
---|
comment:2 Changed 15 years ago by
comment:3 Changed 15 years ago by
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 optioncloseTemplate
.
Specifics:
- New creation option
closable
can be set tofalse
,'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.
- default is
- New creation options
closeTemplate
andcloseText
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'
- this tag is only added to the DOM if
- 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
- Note that this patch is backwards-compatible with CSS as long as the
Changed 15 years ago by
Attachment: | jquery-ui-2470-closable.patch added |
---|
Patch to jquery.ui-1.5b4 for closable tabs
Changed 15 years ago by
Attachment: | examples.tar.gz added |
---|
Sample html, css and modified js - self contained in examples.tar.gz
comment:4 Changed 15 years ago by
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:6 Changed 14 years ago by
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 14 years ago by
Any feedback from the core team on this patch?
Bueller? Bueller? :)
comment:8 Changed 14 years ago by
Resolution: | → duplicate |
---|---|
Status: | new → closed |
moved to jQuery UI bug tracker
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 [email protected]…).