Bootstrap usa un atributo personalizado llamado data-toggle . ¿Cómo se comporta esta característica? ¿Usarlo requiere la biblioteca de JavaScript de Bootstrap? Además, qué opciones de cambio de datos están disponibles. Hasta ahora, cuento
¿Qué hace cada uno de estos?
TLDR; ¿Cuál es la API para el atributo data-toggle personalizado de bootstrap?
Creo que está un poco confundido sobre el propósito de los atributos de datos personalizados. De la especificación w3
Los atributos de datos personalizados están destinados a almacenar datos personalizados privados para la página o aplicación, para los cuales no existen atributos o elementos más apropiados.
Por sí mismo, un atributo de data-toggle=value es básicamente un par clave-valor, en el que la clave es "data-toggle" y el valor es "value".
En el contexto de Bootstrap, los datos personalizados en el atributo son casi inútiles sin el contexto que su biblioteca de JavaScript incluye para los datos. Si observa la versión no minimizada de bootstrap.js , puede realizar una búsqueda de "cambio de datos" y encontrar cómo se está utilizando.
Aquí hay un ejemplo de código JavaScript de Bootstrap que copié directamente del archivo con respecto al uso de "cambio de datos".
Alternar botón
Button.prototype.toggle = function () { var changed = true var $parent = this.$element.closest('[data-toggle="buttons"]') if ($parent.length) { var $input = this.$element.find('input') if ($input.prop('type') == 'radio') { if ($input.prop('checked') && this.$element.hasClass('active')) changed = false else $parent.find('.active').removeClass('active') } if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change') } else { this.$element.attr('aria-pressed', !this.$element.hasClass('active')) } if (changed) this.$element.toggleClass('active') } El contexto que proporciona el código muestra que Bootstrap está utilizando el atributo data-toggle como un selector de consulta personalizado para procesar el elemento en particular.
Por lo que veo, estas son las opciones de cambio de datos:
Es posible que desee consultar la documentación de JavaScript de Bootstrap para obtener más detalles de lo que hace cada uno, pero básicamente el atributo data-toggle cambia el elemento a activo o no.
Los atributos data-* se utilizan para almacenar datos personalizados privados para la página o la aplicación.
Entonces Bootstrap usa estos atributos para guardar estados de objetos
El atributo de alternancia de datos simplemente le dice a Bootstrap qué hacer exactamente al darle el nombre de la acción de alternar que está a punto de realizar en un elemento de destino. Si especifica colapsar. Significa que bootstrap colapsará o desplegará el elemento señalado por el objetivo de datos de la acción en la que hizo clic
Nota: el elemento de destino debe tener la clase adecuada para que bootstrap lleve a cabo la acción.
Acción de origen:
data-toggle = colapso //tipo de alternar
objetivo de datos = #myDiv
Objetivo:
class =collapse //Puedo colapsar
id =miDiv
Esto es lo mismo para otro tipo de acciones de alternar como pestaña, modal, menú desplegable