javascript - español - Los atributos de conmutación de datos en Twitter Bootstrap

bootstrap español

Question

¿Qué hacen data-toggle atributos de data-toggle en Twitter Bootstrap? No pude encontrar una respuesta en la API Bootstrap.

También he visto una pregunta similar antes, link . Pero no me ayudó mucho.

Answer 1

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

datos-*

Forma una clase de atributos, llamados atributos de datos personalizados, que permiten el intercambio de información patentada entre el HTML y su representación DOM que pueden usar 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 le da acceso a ellos.

Reference

Answer 2

Cualquier atributo que comience con data- es el prefijo de los atributos personalizados que se usan para algún propósito específico (ese propósito depende de la aplicación). Se agregó como un remedio semántico al uso intensivo de rel y otros atributos por parte de las personas para fines distintos a los propósitos originales ( rel se usaba a menudo para guardar datos de cosas como información sobre herramientas avanzada).

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

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

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

Answer 3

De los getbootstrap.com/javascript

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

Answer 4

El propósito de cambiar datos en bootstrap es para que puedas usar jQuery para encontrar todas las etiquetas de cierto tipo. Por ejemplo, coloca data-toggle = "popover" en todas las etiquetas de popover y luego puede usar un selector JQuery para encontrar todas esas etiquetas y ejecutar la función popover () para inicializarlas. También puede poner class = "myPopover" en la etiqueta y usar el selector .myPopover para hacer lo mismo. La documentación es confusa, porque parece 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

Answer 5

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

Answer 6

Es un atributo de datos HTML5 que enlaza automáticamente el elemento al tipo de widget que es.

Algunos ejemplos:

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

Ir a través de los documentos de JavaScript y buscar para alternar datos y verá que se 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>

Answer 7

La presencia de este atributo de datos le dice a Bootstrap que cambie entre visual o un estado lógico 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 para configurar un estado pulsado para un botón de alternar. Se usa de múltiples maneras sin una documentación clara.

Answer 8

Por ejemplo, digamos 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 que desea abrir. Para hacer esto, necesita asociar cosas como el tiempo de cocción, el ingrediente principal, la posición de la comida, etc., dentro de la lista de elementos 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>

Con el fin de 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 adoptaron la mayoría de los desarrolladores fue utilizar 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 las clases con JavaScript (className)
• La clase está asociada con el elemento en el que está

Pero hay algunos inconvenientes importantes a 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 el estilo con CSS, y puede duplicar las clases de CSS con clases de datos por error, terminando con estilos extraños en sus páginas en vivo.
• Es más difícil agregar en múltiples elementos de datos. Si tiene varios elementos de datos, necesita 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 estropearlo.

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

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

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

Atributo Vaule Al igual que cualquier otro atributo HTML, incluye los datos en comillas separadas por un signo igual. Estos datos pueden ser cualquier cadena que sea válida en una página web. Por ejemplo: data-main-ingredients = "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 basándose en esos datos.

Answer 9

Se dieron tantas respuestas pero no pude obtener la respuesta al punto. Vamos a ver esto. http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

Al punto

a. Cualquier atributo que comience con datos no es analizado por el analizador HTML5.

b.Bootstrap usa el atributo data-toggle para crear una funcionalidad de colapso

Cómo utilizar : sólo 2 pasos

1) Agregue class = "collapse" al elemento #A que desea contraer.

2) Agregar data-target = "# A" y data-toggle = "collapse"

Purport: el atributo data-toggle nos ayuda a crear control para contraer / expandir un div (bloque) si usamos CSS Bootstrap

Answer 10

getbootstrap.com/javascript también puede encontrar más ejemplos de valores que puede haber asignado el data-toggle . Simplemente visite la página y luego CTRL+F para buscar data-toggle .