Os atributos de alternância de dados no Twitter Bootstrap

O que os data-toggleatributos fazem no Twitter Bootstrap? Não consegui encontrar uma resposta na API do Bootstrap.

Já vi uma pergunta semelhante antes, link . Mas isso não me ajudou muito.

É um atributo de dados do Bootstrap que conecta automaticamente o elemento ao tipo de widget que é. Data- * faz parte da especificação html5 e a alternância de dados é específica para o Bootstrap.

Alguns exemplos:

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

Acesse os documentos JavaScript do Bootstrap e pesquise a alternância de dados e você a verá usada nos exemplos de código.

Um exemplo de trabalho:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Item</a></li>
  </ul>
</div>

Qualquer atributo que começa com data-é o prefixo dos atributos customizados usados ​​para algum propósito específico (esse objetivo depende do aplicativo). Foi adicionado como um remédio semântico para o uso pesado rele outros atributos das pessoas para outros fins que não os propósitos originais pretendidos ( relera frequentemente usado para armazenar dados para coisas como dicas de ferramentas avançadas).

No caso do Bootstrap, não estou familiarizado com o funcionamento interno, mas, a julgar pelo nome, acho que é um gancho permitir alternar a visibilidade ou talvez um modo do elemento ao qual está conectado (como o recolhível barra lateral em Octopress.org ).

html5doctor tem um bom artigo sobre o atributo de dados .

O ciclo 2 é outro exemplo de uso extensivo do atributo de dados .

Por exemplo, digamos que você estivesse criando um aplicativo da web para listar e exibir receitas. Você pode desejar que seus clientes possam classificar a lista, exibir os recursos das receitas etc. antes de escolherem a receita a ser aberta. Para fazer isso, você precisa associar itens como tempo de cozimento, ingrediente principal, posição da refeição etc. nos elementos da lista das receitas.

<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>

Para colocar essas informações na página, você pode fazer muitas coisas diferentes. Você pode adicionar comentários a cada elemento LI, adicionar atributos rel aos itens da lista, colocar todas as receitas em pastas separadas, com base no tempo, refeição e ingrediente (por exemplo). A solução que a maioria dos desenvolvedores adotou foi usar atributos de classe para armazenar informações sobre o elemento atual. Isso tem várias vantagens:

• Você pode armazenar várias classes em um elemento
• Os nomes das classes podem ser legíveis por humanos
• É fácil acessar classes com JavaScript (className)
• A classe está associada ao elemento em que está

Mas existem algumas desvantagens importantes nesse método:

• Você precisa se lembrar do que as aulas fazem. Se você esquecer ou um novo desenvolvedor assumir o projeto, as classes poderão ser removidas ou alteradas sem perceber que isso afeta a maneira como o aplicativo é executado.
• As classes também são usadas para estilizar com CSS, e você pode duplicar classes CSS com classes de dados por engano, terminando com estilos estranhos em suas páginas ativas.
• É mais difícil adicionar vários elementos de dados. Se você tiver vários elementos de dados, precisará acessá-los de alguma forma com seu JavaScript, seja pelo nome da classe ou pela posição na lista de classes. Mas é fácil estragar tudo.

Todos os outros métodos que sugeri apresentavam esses problemas e outros. Mas como era a única maneira de incluir dados de maneira rápida e fácil, foi o que fizemos. Atributos de dados HTML5 para o Rescue

O HTML5 adicionou um novo tipo de atributo a qualquer elemento - o elemento de dados personalizado (data- *). Esses são atributos personalizados (indicados pelo *) que você pode adicionar aos seus elementos HTML para definir qualquer tipo de dados que você deseja. Eles consistem em duas partes:

Nome do atributo Este é o nome do atributo. Ele deve ter pelo menos um caractere minúsculo e ter o prefixo data-. Por exemplo: ingrediente principal de dados, tempo de cozimento de dados, refeição de dados. Este é o nome dos seus dados.

Vaule de atributo Como qualquer outro atributo HTML, você inclui os próprios dados entre aspas separadas por um sinal de igual. Esses dados podem ser qualquer sequência válida em uma página da web. Por exemplo: data-main-ingrediente = "chocolate".

Você pode aplicar esses atributos de dados a qualquer elemento HTML que desejar. Por exemplo, você pode definir as informações na lista de exemplos acima:

<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>

Depois de ter essas informações em seu HTML, você poderá acessá-las com JavaScript e manipular a página com base nesses dados.

Nos documentos do Bootstrap:

<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a 
controller element, like a button, along with a data-target="#foo" or href="#foo" 
to target a specific modal to toggle.-->

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Tantas respostas foram dadas, mas elas não chegam ao ponto. Vamos consertar isso.

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

Ao ponto

1. Qualquer atributo que começa com data-não é analisado pelo analisador HTML5.
2. O Bootstrap usa o data-toggleatributo para criar a funcionalidade de recolhimento.

Como usar : Apenas 2 etapas

1. Adicione class="collapse"ao elemento que #Avocê deseja recolher.
2. Adicione data-target="#A"e data-toggle="collapse".

Objetivo: o data-toggleatributo nos permite criar um controle para recolher / expandir um div(bloco) se usarmos o Bootstrap.

A presença desse atributo de dados informa ao Bootstrap para alternar entre estados visuais ou lógicos de outro elemento na interação do usuário.

É usado para mostrar modais, conteúdo da guia, dicas de ferramentas e menus popover, além de definir um estado pressionado para um botão de alternância. É usado de várias maneiras sem uma documentação clara.

O objetivo da alternância de dados no bootstrap é para que você possa usar o jQuery para encontrar todas as tags de um determinado tipo. Por exemplo, você coloca data-toggle = "popover" em todas as tags popover e, em seguida, pode usar um seletor JQuery para encontrar todas essas tags e executar a função popover () para inicializá-las. Você também pode colocar class = "myPopover" na tag e usar o seletor .myPopover para fazer a mesma coisa. A documentação é confusa, porque faz parecer que algo especial está acontecendo com esse atributo.

este

<div class="container">
    <h3>Popover Example</h3>
    <a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
    <a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>

<script>
    $(document).ready(function(){
        $('.myPop').popover();   
    });
</script>

funciona muito bem.

É um atributo de dados HTML5 definido pelo Bootstrap. Liga um botão a um evento.

Aqui você também pode encontrar mais exemplos de valores que data-togglepodem ter sido atribuídos. Basta visitar a página e depois CTRL+Fprocurar data-toggle.

O Bootstrap utiliza os padrões HTML5 para acessar facilmente os atributos do elemento DOM no javascript.

dados-*

Forma uma classe de atributos, chamados atributos de dados personalizados, que permitem que informações proprietárias sejam trocadas entre o HTML e sua representação DOM que pode ser usada por scripts. Todos esses dados personalizados estão disponíveis através da interface HTMLElement do elemento em que o atributo está definido. A propriedade HTMLElement.dataset fornece acesso a eles.

Referência