25th rounds of Bootstrap3.0 Learning (JavaScript Plugin-fold)

Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html

This article mainly describes the JavaScript plug-in-fold.

About transition effect

For the simple transition effect, you only needtransition.jsAnd other JS files. If you are using compiled (or compressed)bootstrap.jsFile, you do not need to introduce it separately.

What's inside

Transition. js is for is a basic helpertransitionEndA basic helper tool for events is used to simulate the CSS transition effect. It is used by other plug-ins to check whether the current browser supports the CSS transition effect.

Provides basic styles and flexible support for components that support folding, such as accordions and navigation.

Plugin dependency

The folding plug-in depends on the transition effect plug-in.

Case

A simple accordion component is built by extending the panel component using the folding plug-in.

Let's take a look at the effect.

Next, let's take a look at the implementation of the Code.

<div = style=>     <div = id=>      <div =>        <div =>          

Step 1: first, the panel-group layer on the outermost layer contains several groups.
Step 2: Take a look at some simple groups
<div =>    <div =>      

The Code clearly shows the structure of a panel.
Panel-header and pandl-body, and then the panel-header can contain the title and link. Connect to the panel-body through the link.
Step 3: you can find that there is an id = "accordion" in the panel-group, and there is a data-parent = "# accordion" in each of the links below ".
If this is removed, the effect is that after clicking another link, the original panel will not be reduced.
You can show the folding effect in another way.
 <div = style=> <button type= = data-toggle= data-target=></button><div id= =>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.  wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch  wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore 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
Usage
The folding plug-in controls styles through several simple classes
. Collapse hidden content
. Collapse in display content
. Collapsing. 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 It will end if it is removed.
Data attributes
Simply add to the page Elementdata-toggle="collapse"Anddata-targetTo control the elements of a foldable page.data-targetThe property accepts a CSS selector as its control object. Make sure to addcollapseClass. If you want to expand the default status of the tab elements, addinClass.
To add controllers to a group of foldable page elements, adddata-parent="#selector"You can. Refer to the example above.
Using JavaScript
<Button type = onClick => open </button> <button type = onClick => hide </button> <div id => Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry Richard dson ad squid. wolf moon officia aute, non cupidatat skateboard dolor brunch. food truck quinoa nesciunt manuum eiusmod. brunch wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ad vegan deleteur butcher vice lomo. leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven <div = id = style =>
 <script type=>).collapse().collapse(</script>
Let's take a look at the above results.
Method
Grant the page element folding function. Accept an optionalobjectAs a parameter.
$().collapse({toggle: })
In this way, the elements are expanded during initialization.
1. collapse ('toggle ') shows or hides a foldable page element.
2. collapse ('show ') shows a foldable page element.
3. collapse ('hide ') hides a foldable page element.
Event
The folding plug-in Bootstrap exposes a group of events that can be monitored.

    $().on(
In this way, the hidden event is bound to the element.

This article has been updated to the Bootstrap3.0 entry series navigation http://www.cnblogs.com/aehyok/p/3404867.html