Este artículo aprende principalmente sobre el complemento JavaScript - Plegado.
1. Efecto de transición
Sobre los efectos de transición
Para efectos de transición simples, simplemente presente Transition.js y otros archivos JS juntos. Si está utilizando un archivo bootstrap.js compilado (o comprimido), no necesita introducirlo por separado.
Que hay dentro
Transition.js es un ayudante básico para el evento de transición y también es una simulación de los efectos de transición CSS. Es utilizado por otros complementos para detectar si el navegador actual admite los efectos de transición CSS.
2. Doblar
Proporcione un estilo básico y un soporte flexible para componentes que admitan funciones de plegamiento, como acondiciones y navegación.
Dependencias de complementos
El complemento de colapso depende del complemento de efecto de transición.
Caso
Usando el complemento plegable, se construye un componente simple de Acron extendiendo el componente del panel.
Primero echemos un vistazo al efecto.
A continuación, echemos un vistazo a la implementación del código.
<div style = "margin-top: 140px;"> <div id = "acorkion"> <div> <iv> <h4> <a data-toggle = "colapse" data-toggle = "colapso" data-parent = "#acorkion" href = "#colapsoee"> elemento de grupo colapsible </a> </h4> </iv> <iv id = "colapse" cliché de reprehenderit, enim eiusmod alta vida acusamus terry richardson ad squid. 3 Wolf Moon OfficerAute, Non Cupidat Skateboard Dolor Brunch. Camión de comida quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon Tempe, Sunt Aliqua puso un pájaro en él calamar de café de un solo origen nulla asumenda shoreditch et. Nihil Anim Keffiyeh Helvetica, Labor de cerveza artesanal Wes Anderson Cred Nesciunt Sapiente Ea Proident. AD Vegan Excepto Butcher Vice Lomo. Leggings Occaecat Beer Beer-to-Table, sintetizador de mezclilla cruda Nesciunt Probablemente no hayan oído hablar de ellos Acusamus Labor VHS sostenible. </div> </div> </div> <div> <h4> <a data-toggle = "colapse" data-toggle = "colapse" data-parent = "#acordoion" href = "#collapsetwo"> Elemento de grupo colapsible#2 </a> </h4> </div> <div> <div> animal pariatur cliche deprehenderit, enimeiMeusmodeusmodeMod Richardson AD Squid. 3 Wolf Moon OfficerAute, Non Cupidatat Skateboard Dolor Brunch. Camión de comida quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon Tempe, Sunt Aliqua puso un pájaro en él calamar de café de un solo origen nulla asumenda shoreditch et. Nihil Anim Keffiyeh Helvetica, Labor de cerveza artesanal Wes Anderson Cred Nesciunt Sapiente Ea Proident. AD Vegan Excepto Butcher Vice Lomo. Leggings Occaecat Beer Beer-to-Table, sintetizador de mezclilla cruda Nesciunt Probablemente no hayan oído hablar de ellos Acusamus Labor VHS sostenible. </div> </div> </div> <div> <h4> <a data-toggle = "colapse" data-toggle = "colapso" data-parent = "#acorkion" href = "#collapsethree"> Elemento de grupo colapsible#3 </a> </h4> </div> <d id = "collapsethree"> <iv> animal pariatur parriChe deprehentere, enoModmod, enoModmodmodmodmod, enoModmod, enoModmod, enoModmodmod, enoModeModmodmod, enoModeMod, enoModeModmod, enoModeMod, enoModeModmod, enoModeModmod, enoModeModmod, enoModeModmod, enoModeMod, enoModeMod, enoModeMod. Acusamus Terry Richardson AD Squid. 3 Wolf Moon Aute oficial, Non Cupidatat Skateboard Dolor Brunch. Camión de comida quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon Tempe, Sunt Aliqua puso un pájaro en él calamar de café de un solo origen nulla asumenda shoreditch et. Nihil Anim Keffiyeh Helvetica, Labor de cerveza artesanal Wes Anderson Cred Nesciunt Sapiente Ea Proident. AD Vegan Excepto Butcher Vice Lomo. Leggings occuceecat cerveza artesanal de la granja a la mesa, sintetizador de mezclilla cruda nesciunt, probablemente no hayan oído hablar de ellos, el trabajo de trabajo es sostenible VHS. </div> </div> </div> </div> </div> </div>
Paso 1: Primero, la capa más externa del grupo de paneles incluye varios grupos a continuación.
Paso 2: eche un vistazo a algunos grupos simples
<viv> <h4> <a data-toggle = "collapse" data-toggle = "collapse" data-parent = "#acordion" href = "#colapso"> Elemento de grupo colapsible#1 </a> </h4> </div> <diMid = "colapso"> <div> </div> </div> </div>
La estructura de un panel se puede ver claramente a través del código.
Panel-Header y Pandl-Body, y luego el encabezado del panel puede contener títulos y enlaces. Conéctese con el cuerpo del panel a través del enlace.
Paso 3: Puede encontrar que hay un id = "acordeón" en el grupo de panel, y luego hay un datos de datos = "#acorkion" en el enlace bajo cada título a continuación.
Si se elimina, el efecto es que después de hacer clic en otros enlaces, el panel original no volverá a encogerse.
Puede mostrar el efecto de plegar de otra manera.
<div style = "margin-top: 140px;"> <button type = "button" data-toggle = "colapse" data-target = "#demo"> colapso simple </boton> <div id = "demo"> anim pariatur cliché reprehenderit, enim eiusmod high life urbusamus terry richardson adshid. 3 Wolf Moon Aute oficial, Non Cupidat Skateboard Dolor Brunch. Camión de comida quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon Tempe, Sunt Aliqua puso un pájaro en él calamar de café de un solo origen nulla asumenda shoreditch et. Nihil Anim Keffiyeh Helvetica, Labor de cerveza artesanal Wes Anderson Cred Nesciunt Sapiente Ea Proident. AD Vegan Excepto Butcher Vice Lomo. Leggings Occaecat Beer Beer-to-Table, Denim Raw Denim Synthet Nesciunt Probablemente no hayan oído hablar de ellos Acusamus Labor Sostenible VHS. </div>
uso
El complemento de pliegue controla los estilos a través de varias clases simples
.Colapse ocultar contenido
.Colapse en el contenido del programa
. colapses. Se agrega cuando la transición comienza y se elimina cuando termina probablemente significa que el efecto de transición estará disponible después de agregar el pliegue, y luego, si se elimina, terminará.
A través del atributo de datos
Simplemente agregar Data-Toggle = "colapso" y el objetivo de datos al elemento de página le da la capacidad de controlar elementos de página colapsables. La propiedad Data-Target acepta un selector CSS como su objeto de control. Asegúrese de agregar la clase de colapso al elemento de página colapsado. Si desea que se amplíe el estado predeterminado del elemento de página colapsado, agregue la clase.
Para agregar un controlador a un conjunto de elementos de página plegables, agregue datos-parent = "#selector". Consulte el ejemplo anterior.
a través de JavaScript
<botón type = "botón" onClick = "open ()"> Open </boton> <button type = "button" onClick = "hide ()"> plegado </boton> <div id = "demo"> animar paratra cliché reprenderit, enim eiusmod high life incusamus terry richardson ad scock. 3 Wolf Moon Aute oficial, Non Cupidat Skateboard Dolor Brunch. Camión de comida quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon Tempe, Sunt Aliqua puso un pájaro en él calamar de café de un solo origen nulla asumenda shoreditch et. Nihil Anim Keffiyeh Helvetica, Labor de cerveza artesanal Wes Anderson Cred Nesciunt Sapiente Ea Proident. AD Vegan Excepto Butcher Vice Lomo. Leggings Occuceecat Beer a table a la mesa, sintetizador de mezclilla cruda Nesciunt Probablemente no hayan oído hablar de ellos Acusamus Labor Sostenible VHS. </div> <div ID = "acorkion" style = "Margin-top: 240px;">
<script type = "text/javaScript"> $ (function () {$ ("#demo"). collapse ({toggle: false})}) function open () {$ ("#demo"). colapso ("show"); } function hide () {$ ("#demo"). colapso ("hide"); } </script>Echa un vistazo al efecto anterior
método
Dé a los elementos de página una función plegable. Acepta un objeto opcional como argumento.
$ ("#demo"). colapso ({toggle: false})
De esta manera, los elementos se ampliarán cuando se inicializarán.
1. Colapso ('alternar') muestra o oculta un elemento de página plegable.
2.Collapse ('show') muestra un elemento de página plegable.
3.Collapse ('Ocultar') oculta un elemento de página plegable.
evento
El complemento colapsado en Bootstrap expone un conjunto de eventos que se pueden escuchar.
Esto une eventos ocultos al elemento.
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 el aprendizaje de todos.