Este artigo aprende principalmente sobre o plug -in JavaScript - dobrável.
1. Efeito de transição
Sobre efeitos de transição
Para efeitos simples de transição, basta introduzir transição.js e outros arquivos JS juntos. Se você estiver usando um arquivo de bootstrap compilado (ou compactado), não precisará apresentá -lo separadamente.
O que está dentro
Transition.js é um ajudante básico para o Evento do Transiceend e também é uma simulação dos efeitos de transição do CSS. É usado por outros plug-ins para detectar se o navegador atual suporta efeitos de transição CSS.
2. Dobre
Forneça estilo básico e suporte flexível para componentes que suportam funções de dobragem, como acrondimentos e navegação.
Dependências de plug -in
O plug -in de colapso depende do plug -in de efeito de transição.
Caso
Usando o plug-in dobrável, um componente simples da Acron é criado estendendo o componente do painel.
Vamos dar uma olhada no efeito primeiro.
Em seguida, vamos dar uma olhada na implementação do código.
<div style = "margin-top: 140px;"> <div id = "acordeão"> <div> <div> <h4> <a data-toggle = "colapso" data-toggle = "colapso" data-parent = "#acordeion" href = "#colapsone"> colapsível item </a) </h4> </h4> </href = "#"#colapsone "> REMPREENDIDO, EUIUSMOD High Life Accusamus Terry Richardson ad squid. 3 Wolf Moon OfficialAute, não Cupidat Skateboard Dolor Brunch. Caminhão de alimentos Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua colocou um pássaro nele Lula Oriigin Coffee Nulla assumenda Shoreditch et. Nihil anim keffiyeh helvetica, cerveja artesanal wes anderson credit nesciunt sapientte ea proident. AD VEGAN, exceto o vice -vice -lomo. Perneiras Ochaecat Craft Beer Farm-to Table, sintetizador estético de jeans cru Nesciunt Você provavelmente não ouviu falar deles Accusamus Labor Sustainable VHS. </div> </div> </div> <div> <h4> <a data-toggle = "colapso" data-toggle = "colapso" data-parent = "#acordeion" href = "#colapsetwo"> colapsible Group Item#2 </a> </h4 </div> <div> <div e animem parards high clothe nº 2 lula. 3 Wolf Moon Officialaute, não Cupidatat Skateboard Dolor Brunch. Caminhão de alimentos Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua colocou um pássaro nele Lula Oriigin Coffee Nulla assumenda Shoreditch et. Nihil anim keffiyeh helvetica, cerveja artesanal wes anderson credit nesciunt sapientte ea proident. AD VEGAN, exceto o vice -vice -lomo. Perneiras Ochaecat Craft Beer Farm-to Table, sintetizador estético de jeans cru Nesciunt Você provavelmente não ouviu falar deles Accusamus Labor Sustainable VHS. </div> </div> </div> <div> <h4> <a data-toggle = "colapso" data-toggle = "colapso" data-parent = "#acordeão" href = "#collapsethree"> colapsible item#3 </a> </h4> </div> <Div Id = "colapsetReeReen> Accusamus Terry Richardson ad squid. 3 Wolf Moon Official Aute, não Cupidatat Skateboard Dolor Brunch. Caminhão de alimentos Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua colocou um pássaro nele Lula Oriigin Coffee Nulla assumenda Shoreditch et. Nihil anim keffiyeh helvetica, cerveja artesanal wes anderson credit nesciunt sapientte ea proident. AD VEGAN, exceto o vice -vice -lomo. Perneiras Occucaecat cerveja artesanal fazenda a mesa, sintetizador estético de jeans bruto Nesciunt Você provavelmente não ouviu falar deles Accusamus Labor Sustainable VHS. </div> </div> </div> </div> </div> </div>
Etapa 1: Primeiro, a camada mais externa do grupo de painéis inclui vários grupos abaixo.
Etapa 2: dê uma olhada em alguns grupos simples
<div> <h4> <a data-toggle = "colapso" data-toggle = "colapso" data-parent = "#acordeion" href = "#colapsone">#1 do grupo colapsável#1 </a> </h4> </div> </div id = "colapsone"> <div> </div> </div> </div>
A estrutura de um painel pode ser vista claramente através do código.
O cabeçalho do painel e o Pandl-Body, e, em seguida, o cabeçalho do painel pode conter títulos e links. Conecte-se ao corpo do painel via link.
Etapa 3: você pode descobrir que existe um id = "acordeão" no grupo de painel e, em seguida, há um data-parent = "#acordeão" no link sob cada título abaixo.
Se removido, o efeito é que, depois de clicar em outros links, o painel original não encolherá novamente.
Você pode mostrar o efeito de dobrar de outra maneira.
<div style = "margin-top: 140px;"> <botão type = "button" data-toggle = "colapso" data-alget = "#Demo"> colapso simples </botão> <div id = "Demo"> Anim Pariatur ClichE REPREENDIT, EIIUSMOD High Life Accusamus Terry Richardon ad srid. 3 Wolf Moon Official Aute, que não é do Cupidat Skateboard Dolor Brunch. Caminhão de alimentos Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua colocou um pássaro nele Lula Oriigin Coffee Nulla assumenda Shoreditch et. Nihil anim keffiyeh helvetica, cerveja artesanal wes anderson credit nesciunt sapientte ea proident. AD VEGAN, exceto o vice -vice -lomo. Perneiras ocasecat cervejas artesanais Fazenda a mesa, sintetizador estético de jeans cru Nesciunt Você provavelmente não ouviu falar deles Accusamus Labor Sustentável VHS. </div>
uso
O plug -in dobrável controla os estilos através de várias classes simples
.Collapse ocultar conteúdo
.Collapse no teor de show
.Collapsinging. É adicionado quando a transição é iniciada e removida quando termina provavelmente significa que o efeito de transição estará disponível após a adição da dobra e, se for removida, ele terminará.
Através do atributo de dados
Apenas adicionar data-toggle = "colapso" e alvo de dados ao elemento da página fornece a capacidade de controlar elementos de página dobráveis. A propriedade-alvo de dados aceita um seletor CSS como seu objeto de controle. Certifique -se de adicionar classe de colapso ao elemento de página em colapso. Se você deseja que o estado padrão do elemento de página em colapso seja expandido, adicione a classe.
Para adicionar um controlador a um conjunto de elementos de página dobráveis, adicione data-parent = "#seletor". Consulte o exemplo acima.
via javascript
<button type = "button" onclick = "open ()"> aberto </button> <button type = "button" onclick = "hide ()"> dobra </button> <div id = "Demo"> Anim Pariatur Clichhe Repiendended, enim eiusmod High Life Accusamus Terry Richardson ad squid. 3 Wolf Moon Official Aute, que não é do Cupidat Skateboard Dolor Brunch. Caminhão de alimentos Quinoa Nesciunt Laborum Eiusmod. Brunch 3 Wolf Moon Tempor, Sunt Aliqua colocou um pássaro nele Lula Oriigin Coffee Nulla assumenda Shoreditch et. Nihil anim keffiyeh helvetica, cerveja artesanal wes anderson credit nesciunt sapientte ea proident. AD VEGAN, exceto o vice -vice -lomo. Leggings Occucaecat cerveja artesanal Fazenda a mesa, sintetizador estético de jeans bruto Nesciunt Você provavelmente não ouviu falar deles Accusamus Labor Sustentável VHS.
<script type = "text/javascript"> $ (function () {$ ("#Demo"). colapso ({alterne: false})}) function Open () {$ ("#Demo"). COLLAPSE ("show"); } function hide () {$ ("#Demo"). COLLAPSE ("hide"); } </script>Dê uma olhada no efeito acima
método
Dê a elementos da página uma função dobrável. Aceita um objeto opcional como um argumento.
$ ("#Demo"). Colapso ({alternar: false})
Dessa forma, os elementos serão expandidos quando inicializados.
1. Colapso ('alternância') exibe ou oculta um elemento de página dobrável.
2.Collapse ('show') exibe um elemento de página dobrável.
3.Collapse ('Hide') esconde um elemento de página dobrável.
evento
O plug -in recolhido no Bootstrap expõe um conjunto de eventos que podem ser ouvidos.
Isso liga eventos ocultos ao elemento.
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.