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.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s