jQuery UI Closable Tabs

There is a feature request at ticket #3924, but I wanted it to be more flexible and compatible with jQuery UI 1.4.2. So I modified it. You can get the file at gist:

http://gist.github.com/506264

To create a closable tab panel, just call tabs with the close option properly set. You can also set it as a callback that return boolean. A simple example of use would be:

$(document).ready(function() {
    $('#tabs').tabs({
        closeTemplate: '<span><img src="/images/icons/close.png" /></span>',
        close: function(ui) {
            return confirm('Are you sure you want to remove ' + ui.tab.text + '?');
        }
    });
});

To make it look better, use the following CSS:

.ui-tabs-close { float: left; margin: 0.5em 0.4em 0 0;  }

Available options:

• closeTemplate: the close “button” template. Default is <span>(x)</span>.
• close: simply set to true to allow tabs to be closed or to a callback that will be called with a ui argument when the close button is pressed.

Update: there is a simpler and smarter example of closable tabs at http://www.stilbuero.de/jquery/tabs_3/close.html.