This article mainly learns about JavaScript plug-in - folding.
1. Transition effect
About transition effects
For simple transition effects, just introduce transition.js and other JS files together. If you are using a compiled (or compressed) bootstrap.js file, you don't need to introduce it separately.
What's inside
Transition.js is a basic helper for transitionEnd event and is also a simulation of CSS transition effects. It is used by other plug-ins to detect whether the current browser supports CSS transition effects.
2. Fold
Give basic style and flexible support for components that support folding functions, such as acrondions and navigation.
Plugin dependencies
The collapse plugin depends on the transition effect plugin.
Case
Using the folding plug-in, a simple acron component is built by extending the panel component.
Let’s take a look at the effect first.
Next, let’s take a look at the implementation of the code.
<div style="margin-top:140px;"> <div id="accordion"> <div> <div> <h4> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item </a> </h4> </div> <div id="collapseOne"> <div> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officialaute, non cupidat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labor sustainable VHS. </div> </div> </div> <div> <h4> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div> <div> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officialaute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labor sustainable VHS. </div> </div> </div> <div> <h4> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree"> <div> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon official aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occucaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labor sustainable VHS. </div> </div> </div> </div> </div> </div>
Step 1: First, the outermost layer of panel-group includes several groups below.
Step 2: Take a look at some simple groups
<div> <h4> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne"> <div> </div> </div> </div>
The structure of a panel can be seen clearly through the code.
panel-header and pandl-body, and then panel-header can contain titles and links. Connect with panel-body via link.
Step 3: You can find that there is an id="accordion" in the panel-group, and then there is a data-parent="#accordion" in the link under each title below.
If removed, the effect is that after clicking on other links, the original panel will not shrink again.
You can show the effect of folding in another way.
<div style="margin-top:140px;"> <button type="button" data-toggle="collapse" data-target="#demo"> simple collapse </button><div id="demo">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon official aute, non cupidat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labor sustainable VHS.</div>
usage
The fold plugin controls styles through several simple classes
.collapse Hide content
.collapse in Show content
.collapsesing. It is added when the transition starts, and removed when it finishes probably means that the transition effect will be available after the fold is added, and then if it is removed, it will end.
Through data attribute
Just adding data-toggle="collapse" and data-target to the page element gives it the ability to control collapsible page elements. The data-target property accepts a CSS selector as its control object. Make sure to add collapse class to the collapsed page element. If you want the default state of the collapsed page element to be expanded, add in class.
To add a controller to a set of foldable page elements, add data-parent="#selector". Please refer to the above example.
via JavaScript
<button type="button" onClick="Open()">Open</button><button type="button" onClick="Hide()">Fold</button><div id="demo">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon official aute, non cupidat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occucaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labor sustainable VHS.</div> <div id="accordion" style="margin-top:240px;">
<script type="text/javascript"> $(function(){ $("#demo").collapse({ toggle: false }) }) function Open(){ $("#demo").collapse("show"); } function Hide(){ $("#demo").collapse("hide"); } </script>Take a look at the above effect
method
Give page elements a collapsible function. Accepts an optional object as an argument.
$("#demo").collapse({toggle: false})
In this way, the elements will be expanded when initialized.
1. collapse('toggle') displays or hides a collapsible page element.
2.collapse('show') displays a collapsible page element.
3.collapse('hide') hides a collapsible page element.
event
The collapsed plugin in Bootstrap exposes a set of events that can be listened to.
This binds hidden events to the element.
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.