Preciso saber, para que servem esses dois atributos data-target e data-toggle que ficam em inputs, buttons e semelhantes no HTML?
2 Respostas
Sobre os atributos data-*
O HTML5 foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido.
Atributos data-*
, habitualmente usados juntamente com o framework Bootstrap, permitem armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como classList
, atributos fora do padrão, propriedades extras no DOM ou o obsoleto método setUserData
.
Veja um exemplo abaixo de uso na tag <article>
:
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>
Veja que foi criado atributos extras para o elemento em questão e adicionado vários valores a ele, sem a necessidade de fazer algo estranho e/ou não semântico.
Leitura recomendada e interessante sobre o assunto nesta outra resposta.
Data Toggle
O data-toggle
é um atributo de dados do HTML5 que liga automaticamente o elemento ao tipo correspondente.
Por exemplo, se você tem um dropdown, como nesta outra resposta:
<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>
Pode perceber que através do uso do data-toggle
é reafirmado, que o elemento em questão é um dropdown.
Alguns outros elementos que são mais comumente usados:
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"
data-toggle
, nesses exemplos citados, declaram que o elemento, respectivamente é um modal, accordion, dropdown, e estrutura de abas.
Data Target
O data-target
geralmente utilizado no Bootstrap, está junto aos modais, mas não somente. Pelo próprio nome, subentende-se que irá fazer referência ao seu alvo, objetivo. Este atributo deve conter um seletor CSS que aponte para o elemento HTML que irá participar do evento.
Veja um exemplo, utilizando um modal:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Quando você clicar no botão (e se tudo estiver correto), irá abrir um modal box com o id que seja igual à myModal
. Sem muito esforço você estará utilizando através do data-target
mais um dos componentes pré-desenvolvidos JavaScript.
Adendo
Você pode perceber a diferença quando se compara o código acima, que abrirá um modal com id myModal, utilizando os atributos data-*
e tendo que fazer a codificação manual, veja abaixo:
- Usando atributos data-*
<button data-toggle="modal" data-target="#myModal">
Novo
</button>
- Sem usar os atributos data-*
<button id="btnModal">
Novo
</button>
E então na tag script, teria que codificar algo semelhante a isso para abrir o modal:
$("#btnModal").click(function(){
$("#myModal").modal();
});
Temos perguntas respondidas sobre esse assunto no nosso Grande Irmão SO, mais especificamente aqui e aqui. Também tem este artigo do MDN, ao qual tirei a maioria das informações.
Nota sobre os atributos data-*:
O atributo data-*
, como foi dito é usando com maior frequência juntamente com o framework Bootstrap. Entretanto, é possível utilizar suas funções através de JavaScript somente:
var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
Ou através deste exemplo:
var button = document.getElementById('your-button-id');
var cmd = button.getAttribute('data-cmd');
var id = button.getAttribute('data-id');
button.setAttribute('data-cmd', yourNewCmd);
button.setAttribute('data-id', yourNewId);
Mas, como foi dito pela própria W3C:
Os atributos de dados personalizados destinam-se a armazenar dados personalizados privados para a página ou aplicativo, para os quais não há mais atributos ou elementos apropriados.
Dito isso, é possível compreender que o atributo data-*
destina-se a armazenar pequenas quantidades de dados invisíveis que não são cruciais para o usuário e podem se tornar visíveis posteriormente. Se os dados forem cruciais para o usuário, ele deve ser apresentado de forma visível e mais acessível. Lembrando também que semanticamente falando, existem elementos mais apropriados para casos como esses.
E apesar de ser possível manipular os dados com JavaScript, não é recomendado.
-
4Apenas uma nota sobre o uso da palavra: «depreciado» em inglês é «depreciated» e não «deprecated». A palavra «deprecated» que seria a correta para se referir a isto seria traduzida como «obsoleto», «desaprovado», «censurado»– Reptile ♦16/09/2017 às 21:14
-
2Creio que a resposta está falando de bootstrap ou algum framework similar, não? afinal, a função do "data-*" é dependente da aplicação. não tem significado especificado para o navegador (o que seria a parte mais importante da resposta). Corrija-me se eu estiver errado, não parei pra revisar com base técnica.– Largato ♦19/10/2017 às 20:46
Como muito bem explicado pelo colega UzumakiArtanis, os atributos data-*
são criados para adicionarmos mais informações relacionadas ao elemento, e isto é muito utilizado em diversas bibliotecas e plugins.
No caso de data-target
e data-toggle
, isso também acontece. Muito provavelmente você está falando do plugin para diálogos modal do Bootstrap. Este plugin é que define qual o significado desses atributos, não a especificação HTML5.
O bootstrap definiu que o plugin Modal vai localizar todos os data-toggle="modal"
e trabalhar com este elemento para poder abrir a janela de diálogo, que é ligada a ele pelo atributo data-target
.
Fontes: