Abas dinâmicas com Boostrap – Abrir, fechar e arrastar

Plugin jQuery para manipular tabs do bootstrap de forma dinâmica, excelente para aplicações multitelas na WEB ou em runtimes como node-webkit ou electron.

DEMO

Dependencias

Para que o plugin funcione melhor é necessário o uso da biblioteca jQuery, do jQuery UI e do Font Awesome. Este último pode ser dispensado se você não pretende usar ícones.
E a dependencia mais importante obviamente é o Bootstrap

Usando

Para usar o plugin basta incluir as depencias citadas acima no seu documento HTML e incluir também os arquivos bootstrap-dynamic-tabs.js e bootstrap-dynamic-tabs.css. bootstrap-dynamic-tabs é escrito como um plugin jQuery, então a form de usar será a mesma.

Adicionando tabs

Para adicionar uma nova aba basta usar o metodo addTab(options), veja o exemplo:

Options (Opções)

As opções das abas são usadas para definir atributos como título, corpo, etc. Veja abaixo a lista dos atributos.

Atributo Tipo Descrição
title String Título da aba
id String Este será o id do elemento DOM da aba, caso não seja informado será usado o titulo sem acentos e espaços e em lowercase
text String Texto plano (sem HTML) que será mostrado no corpo da aba.
html String (código HTML) Texto em HTML que será interpretado e mostrado no corpo da aba
ajaxUrl String Url para realização do ajax. O retorno do ajax será mostrado no corpo da aba
loadScripts String ou array Neste parametro você pode informa o endereço de arquivos JavaScript para serem incluidos na página. Você pode informar 1 ou vários, sendo que acima de 1 eles devem estar em um JavaScript Array. Quando a aba que chamou os script for fechada eles serão removidos.
loadStyles String ou array Neste parametro você pode informa o endereço de arquivos de folha de estilo (.css) para serem incluidos na página. Você pode informar 1 ou vários, sendo que acima de 1 eles devem estar em um JavaScript Array. Quando a aba que chamou os estilos for fechada eles serão removidos.
closable boolean Neste atributo você pode informar se a aba criada pode ser fechada ou não. Default true
icon string Neste parametro você pode passar a clase de um icone Font Awesome, exemplo: ‘fa fa-user’. O icone será mostrado na aba. Você também pode usar os glyphicon do Bootstrap

Sortable

Além de tudo, você ainda pode mudar a posição das abas ao arrastar, por isso usamos jQuery UI.

DOWNLOAD

Obrigado e até a próxima.

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Postagens relacionadas:

6 respostas

  1. Djhonny Cley

    Ola, achei interessante suas abas, estou implementando elas, mas gostaria de saber se tem como abrir elas por link e não por botoes e como seria? Obrigado

    Responder
      • Djhonny Cley

        Consegui rodar aqui, abrindo por link , ficou bacana!
        Mas tive um problema, por algum motivo quando abro com ajax uma pagina, alguns .js nao sao carregados, mesmo eu chamando eles na pagina principal e nao pelo comando loadScripts. Os css nao precisou usar o loadStyles.

        tem alguma forma de eu abrir uma pagina em php por exemplo, sem ser da forma por ajax?

        Desde ja agradeço!

Deixe uma resposta

Seu e-mail não será publicado.