bootstrap-dynamic-tabs

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.

Métodos

closeById(tabid)

Além do addTab, bootstrap-dynamic-tabs possuí o método closeById(tabid), que como o nome sugere serve para remover uma aba pelo id dela. Usando:

  
  var tabs = $('#tabs').bootstrapDynamicTabs();
  tabs.addTab({
    text: "Close by id",
    id: "test"
  });
tabs.closeById('teste');

closeThis()

Para fechar a aba ativa, basta chamar este método dentro da aba no script.

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

Quer mais

Visite: Meu site
Clube dos Geeks

deawx / bootstrap-dynamic-tabs Goto Github PK