Los atributos de alternancia de datos en Twitter Bootstrap

¿Qué hacen los data-toggleatributos en Twitter Bootstrap? No pude encontrar una respuesta en Bootstrap API.

He visto una pregunta similar antes también, enlace . Pero no me ayudó mucho.

Es un atributo de datos Bootstrap que conecta automáticamente el elemento al tipo de widget que es. Data- * es parte de la especificación html5, y el cambio de datos es específico de Bootstrap.

Algunos ejemplos:

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

Ir a través de los documentos Bootstrap de JavaScript y la búsqueda de datos de palanca y verá que utiliza en los ejemplos de código.

Un ejemplo de trabajo:

<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>

Cualquier atributo que comience con data-es el prefijo para los atributos personalizados utilizados para algún propósito específico (ese propósito depende de la aplicación). Se agregó como un remedio semántico para el uso intensivo de la gente rely otros atributos para fines distintos de sus propósitos originales (rel menudo se usaba para contener datos para cosas como información sobre herramientas avanzadas).

En el caso de Bootstrap, no estoy familiarizado con su funcionamiento interno, pero a juzgar por el nombre, supongo que es un gancho que permite alternar la visibilidad o tal vez un modo del elemento al que está unido (como el plegable barra lateral en Octopress.org ).

html5doctor tiene un buen artículo sobre el atributo de datos .

El ciclo 2 es otro ejemplo de uso extenso del atributo de datos .

Por ejemplo, supongamos que estaba creando una aplicación web para enumerar y mostrar recetas. Es posible que desee que sus clientes puedan ordenar la lista, mostrar las características de las recetas, etc., antes de elegir la receta para abrir. Para hacer esto, debe asociar cosas como el tiempo de cocción, el ingrediente principal, la posición de la comida, etc. dentro de los elementos de la lista para las recetas.

<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 obtener esa información en la página, puede hacer muchas cosas diferentes. Puede agregar comentarios a cada elemento LI, puede agregar atributos rel a los elementos de la lista, puede colocar todas las recetas en carpetas separadas según el tiempo, la comida y el ingrediente (es decir). La solución que tomaron la mayoría de los desarrolladores fue usar atributos de clase para almacenar información sobre el elemento actual. Esto tiene varias ventajas:

• Puedes almacenar múltiples clases en un elemento
• Los nombres de las clases pueden ser legibles por humanos
• Es fácil acceder a clases con JavaScript (className)
• La clase está asociada con el elemento en el que se encuentra.

Pero hay algunos inconvenientes importantes para este método:

• Tienes que recordar lo que hacen las clases. Si olvida o un nuevo desarrollador se hace cargo del proyecto, las clases pueden eliminarse o cambiarse sin darse cuenta de que eso afecta la forma en que se ejecuta la aplicación.
• Las clases también se usan para diseñar con CSS, y puede duplicar las clases CSS con clases de datos por error, terminando con estilos extraños en sus páginas en vivo.
• Es más difícil agregar múltiples elementos de datos. Si tiene varios elementos de datos, debe acceder a ellos de alguna manera con su JavaScript, ya sea por el nombre de la clase o la posición en la lista de clases. Pero es fácil equivocarse.

Todos los otros métodos que sugerí tenían estos problemas, así como otros. Pero como era la única forma de incluir datos de manera rápida y sencilla, eso fue lo que hicimos. Atributos de datos HTML5 al rescate

HTML5 agregó un nuevo tipo de atributo a cualquier elemento: el elemento de datos personalizado (data- *). Estos son atributos personalizados (indicados por *) que puede agregar a sus elementos HTML para definir cualquier tipo de datos que desee. Consisten en dos partes:

Nombre del atributo Este es el nombre del atributo. Debe ser al menos un carácter en minúscula y tener el prefijo data-. Por ejemplo: ingrediente principal de datos, tiempo de cocción de datos, comida de datos. Este es el nombre de sus datos.

Atributo Vaule Al igual que cualquier otro atributo HTML, incluye los datos en sí mismos entre comillas separados por un signo igual. Estos datos pueden ser cualquier cadena que sea válida en una página web. Por ejemplo: data-main-ingrediente = "chocolate".

Luego puede aplicar estos atributos de datos a cualquier elemento HTML que desee. Por ejemplo, podría definir la información en la lista de ejemplos anterior:

<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>

Una vez que tenga esa información en su HTML, podrá acceder a ella con JavaScript y manipular la página en función de esos datos.

De los documentos de 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>

Se han dado muchas respuestas, pero no llegan al punto. Arreglemos esto.

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

Ir al grano

1. Cualquier atributo que comience data-no es analizado por el analizador HTML5.
2. Bootstrap usa el data-toggleatributo para crear la funcionalidad de contracción.

Cómo usar : solo 2 pasos

1. Agregue class="collapse"al elemento #Aque desea contraer.
2. Añadir data-target="#A"y data-toggle="collapse".

Propósito: el data-toggleatributo nos permite crear un control para colapsar / expandir un div(bloque) si usamos Bootstrap.

La presencia de este atributo de datos le dice a Bootstrap que cambie entre estados visuales o lógicos de otro elemento en la interacción del usuario.

Se utiliza para mostrar modales, contenido de pestañas, información sobre herramientas y menús emergentes, así como establecer un estado presionado para un botón de alternar. Se utiliza de múltiples maneras sin una documentación clara.

El propósito de alternar datos en bootstrap es para que pueda usar jQuery para encontrar todas las etiquetas de un determinado tipo. Por ejemplo, coloca data-toggle = "popover" en todas las etiquetas popover y luego puede usar un selector JQuery para encontrar todas esas etiquetas y ejecutar la función popover () para inicializarlas. También podría poner class = "myPopover" en la etiqueta y usar el selector .myPopover para hacer lo mismo. La documentación es confusa, porque hace parecer que algo especial está sucediendo con ese atributo.

Esta

<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 bien

Es un atributo de datos HTML5 definido por Bootstrap. Vincula un botón a un evento.

Aquí también puede encontrar más ejemplos de valores que se data-togglepueden asignar. Simplemente visite la página y luego CTRL+Fbusque data-toggle.

Bootstrap aprovecha los estándares HTML5 para acceder fácilmente a los atributos del elemento DOM dentro de javascript.

datos-*

Forma una clase de atributos, llamados atributos de datos personalizados, que permiten intercambiar información propietaria entre el HTML y su representación DOM que pueden ser utilizados por los scripts. Todos estos datos personalizados están disponibles a través de la interfaz HTMLElement del elemento en el que se establece el atributo. La propiedad HTMLElement.dataset les da acceso a ellos.

Referencia