MENU

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.

1
  var tabs = $('#tabs').bootstrapDynamicTabs();

Adicionando tabs

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

1
2
3
4
5
6
7
  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.

COMMENTS: 1
  1. julho 21, 2017 by Walter Reply

    Muito massa seu projeto e essa ideia, parabéns, fico mais feliz em saber que foi alguém da minha região, pois sou de juazeiro e vi que você é de Barbalha, bom tou usando essa funcionalidade em um sistema meu e queria tirar uma duvida com você, se tem como ao fechar uma aba ele retornar para anterior e não pra home… e essa questão do jquery ui, como ativar no arquivo de download para arrastar?, pois só a home que muda de posição, bom é isso e parabéns novamente

Leave a Comment!

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *