Este artículo presenta el uso del menú desplegable del módulo desplegable Bootstrap para su referencia. El contenido específico es el siguiente
1. Análisis del código fuente:
Desplegable.scss: módulo de cuadro desplegable
JavaScripts/Bootstrap/Dropdown.js: Implementar la respuesta del cuadro desplegable
2. Funciones y principios:
Pestaña de desplazamiento, la función de mostrar elementos seleccionados no se puede realizar de forma predeterminada.
principio:
1. Use la clase desplegable como punto de anclaje, y luego deje que el menú desplegable de la lista de niños lo coloque absolutamente. También debe agregar un punto de clic como configuración de datos de datos = "desplegable" para hacer la asociación.
2. Necesita soporte del complemento JS
3. Análisis del código fuente:
1. Caret: implementar el triángulo hacia abajo, utilizando bordes para implementar
1.1. El color del borde es el color de fuente de forma predeterminada
1.2. Implementación de triángulos: el borde debe tener un ancho, y luego los lados adyacentes deben tener un ancho, pero el color es transparente; Finalmente, el elemento debe ser un elemento de bloque en la fila para hacer su altura y ancho 0.
1.3. El código es el siguiente
La copia del código es la siguiente: <span style = "border-izquierda: 4px sólido; borde-top: 4px sólido transparente;-bottom border: 4px sólido transparente; altura: 0px; ancho: 0px; line-ocho: normal; pantalla: bloque en línea;"> </span>
2. El tipo de escucha de evento de clic está vinculado al documento, y el tipo de escucha es Data-Toggle = "desplegable".
3. La función de complemento escrita por el complemento JS y el constructor de clase se utilizan para llamar al complemento utilizando el método JS;
4. El modo Data-* llama al complemento, que se utiliza para inyectar eventos en el documento, el código es el siguiente:
$ (documento) .on ('click.bs.dropdown.data-api', clearminus) .on ('click.bs.dropdown.data-api', '.dropdown form', function (e) {e.stoppropagation ()}). On ('click.bs.dropdown.data-api', toggle, togargle,,,, togargle,,, Desplegable.prototype.toggle) .on ('keydown.bs.dropdown.data-api', toggle, dropdown.prototype.keydown) .on ('keydown.bs.dropdown.data-api', '. Dropdown-Menu', Dropototype.keydown)El código llama directamente al método definido por desplegable. El maravilloso diseño aquí se encuentra en el marco de complemento, la llamada del modo Data-* y la llamada del modo de complemento JS, mientras que estos dos modos de llamada usan el mismo código.
5. Si lo llama con el complemento JS, debe llamar a los métodos básicos usted mismo. Solo el evento de palanca estará vinculado al crear una instancia.
var desplegable = function (elemento) {$ (elemento) .on ('click.bs.dropdown', this.toggle)}6. ClearMenu: solo se borra el elemento de datos de datos = "desplegable"
7. Drop-Backdrop: se usa para mover el procesamiento de eventos sin clic
8. Keydown: cuando el botón desplegable obtenga el enfoque, presione la tecla para expandir y presione la tecla superior para encogerse.
9. Data-Target y Herf = "#ID": para lograr hacer clic, expanda la lista desplegable especificada. El valor predeterminado es expandir los nodos hermanos detrás del botón:
<ul> <li> <a> índice </a> </li> <li> <a> zhenglu </a> </li> <li> <a data-toggle = "desplegable" href = "#name"> Herramientas de usuario </a> </li> </ul> <Div Id = "Nombre"> <ul> <li> <a> Acerca de nosotros </a> </li> </</</ul> ul> ul>
10. Implemente el submenú emergente y use el fondo: 100% (posicionamiento del submenu emergente inferior) para implementarlo
11. Ejemplos de aplicación
<div id = "desplegable"> <a id = "desplegable-btn" data-target = "#desplegable"> número </a> <ul> <li> <a> 3343 </a> </li> <li> <a> 555 </a> </li> </ul> </div>
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico
Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.