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.
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.
Respostas:
É 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:
Mas existem algumas desvantagens importantes nesse método:
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
data-não é analisado pelo analisador HTML5.data-toggleatributo para criar a funcionalidade de recolhimento.Como usar : Apenas 2 etapas
class="collapse"ao elemento que #Avocê deseja recolher.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.
O Bootstrap utiliza os padrões HTML5 para acessar facilmente os atributos do elemento DOM no javascript.
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.