jQuery UI and Closable Tabs Thursday, May 15, 2008

So last week I decided (at my company, Pharos) to dump Ext-JS in favor of jQuery.

The short version is that Ext-JS is hard to style with CSS, plus I was getting odd sizing of objects in my (pretty complicated) layouts that I just couldn't figure out. (The longer version has to do with how easy (hard) it is to write and find contributed extensions.)

Anyway, I'm getting off-topic. jQuery rocks. And the jQuery-UI project is really coming along, in terms of functionality. They're pushing hard to get the 1.5 release candidate out the door.

There are some missing pieces, though, as in any young GUI project. But because I'm betting on jQuery, I'm willing to work to make it do what I want. Until today, this meant contributing some (very) minor bugfixes.

But this afternoon, I implemented closable tabs. Check out jQuery trac 2470 for the patch and working examples (including CSS).

Here's a couple of screenshots showing the closable tabs in 'all' mode, and 'selected' mode. And you can play around with it on the demo page!

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.

Some 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 tab anchor
  • 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

So, if you find the code useful, let me know! It's attached to jQuery trac 2470, along with the sample CSS and code in the snapshot. And don't forget to test drive it at the demo page!