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.
var tabs = $('#tabs').bootstrapDynamicTabs();
Adicionando tabs
Para adicionar uma nova aba basta usar o metodo addTab(options), veja o exemplo:
var tabs = $('#tabs').bootstrapDynamicTabs();
tabs.addTab({
title: "Home",
text: "Seja bem-vindo",
icon: 'fa fa-home',
closable: false
});
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.
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
Coloca no onClick do link e retorna false.
tem como fazer um ex pra mim por favor?
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!
Não tem como. Não conseguiu usar nem o JS que tá na página principal, o do Bootstrap por exemplo?