Bootstrap3.0學(xué)習(xí)教程之JS折疊插件
過渡效果
關(guān)于過渡效果
對(duì)于簡單的過渡效果，只需將transition.js和其它JS文件一起引入即可。如果你使用的是編譯（或壓縮）好的bootstrap.js文件，就無需再單獨(dú)將其引入了。
What's inside
Transition.js是針對(duì) is a basic helper for transitionEnd事件的一個(gè)基本助手工具，也是對(duì)CSS過渡效果的模擬。它被其它插件用來檢測當(dāng)前瀏覽器對(duì)CSS過渡效果是否支持。
折疊
對(duì)為支持折疊功能的組件，例如accordions和導(dǎo)航，賦予基本樣式和靈活的支持。
插件依賴
折疊插件依賴過渡效果插件。
案例
使用折疊插件，通過擴(kuò)展panel組件從而構(gòu)建了一個(gè)簡單的accordion組件。
先來看一下效果。
接下來看一下代碼的實(shí)現(xiàn)。
<div class="container" style="margin-top:140px;"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia 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 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't heard of them accusamus labore sustainable VHS.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia 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 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't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia 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 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't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> </div>
第一步：首先最外面那層panel-group這層下面包括幾個(gè)小組。
第二步：看一下幾個(gè)簡單的組
<div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> </div> </div> </div>
通過代碼也比較清楚的可以看出一個(gè)panel的結(jié)構(gòu)。
panel-header和pandl-body,然后panel-header里面可以包含標(biāo)題，鏈接。通過鏈接和panel-body相連。
第三步：你可以發(fā)現(xiàn)在panel-group中有一個(gè)id="accordion",然后下面每個(gè)標(biāo)題下鏈接中有個(gè)data-parent="#accordion"。
如果去掉的話，那么效果就是點(diǎn)擊其他鏈接后，原來的panel并不會(huì)再縮起來了。
你可以通過另一個(gè)方式來展示折疊的效果。
<div class="container" style="margin-top:140px;"> <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"> simple collapsible </button> <div id="demo" class="collapse in">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia 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 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't heard of them accusamus labore sustainable VHS.</div>
用法
折疊插件通過幾個(gè)簡單的類來控制樣式
.collapse 隱藏內(nèi)容
.collapse in 顯示內(nèi)容
.collapsing。 It is added when the transition starts, and removed when it finishes意思大概可能就是折疊被添加后過渡效果就有了，然后如果被移除了它就結(jié)束了。
通過data屬性
僅僅通過向頁面元素添加data-toggle="collapse" 和data-target就可以為其賦予控制可折疊頁面元素的能力。data-target屬性接受一個(gè)CSS選擇器作為其控制對(duì)象。請(qǐng)確保為可折疊頁面元素添加collapse class。如果你希望可折疊頁面元素的默認(rèn)狀態(tài)是展開的，請(qǐng)?zhí)砑觟n class。
為了給一組可折疊頁面元素添加控制器，添加data-parent="#selector"即可。請(qǐng)參考上面的例子即可。
通過JavaScript
<button type="button" class="btn btn-danger" onClick="Open()">打開</button>
<button type="button" class="btn btn-danger" onClick="Hide()">折疊</button>
<div id="demo" class="collapse in">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia 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 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't heard of them accusamus labore sustainable VHS.</div>
<div class="panel-group" 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>
來看一下上面的效果
方法
賦予頁面元素可折疊功能。接受一個(gè)可選的object作為參數(shù)。
$("#demo").collapse({toggle: false})
這樣元素在初始化的時(shí)候會(huì)是展開的。
1.collapse('toggle')展示或隱藏一個(gè)可折疊的頁面元素。
2.collapse('show')展示一個(gè)可折疊頁面元素。
3.collapse('hide')隱藏一個(gè)可折疊頁面元素。
事件
Bootstrap中的折疊插件對(duì)外暴露了一組可以監(jiān)聽的事件。
$('#demo').on('hidden.bs.collapse', function () {
alert(1);
})
這樣就為元素綁定了隱藏時(shí)的事件。
- bootstrap折疊調(diào)用collapse()后data-parent不生效的快速解決辦法
- Bootstrap基本插件學(xué)習(xí)筆記之折疊(22)
- BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果（在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏）
- Bootstrap 折疊（Collapse）插件用法實(shí)例詳解
- Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(一)
- Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)
- Bootstrap每天必學(xué)之折疊（Collapse）插件
- Bootstrap每天必學(xué)之折疊
- Bootstrap創(chuàng)建可折疊的組件
- Bootstrap筆記—折疊實(shí)例代碼
相關(guān)文章
神級(jí)程序員JavaScript300行代碼搞定漢字轉(zhuǎn)拼音
這篇文章主要介紹了神級(jí)程序員JavaScript300行代碼搞定漢字轉(zhuǎn)拼音,需要的朋友可以參考下2017-05-05
話說以前我轉(zhuǎn)過一片文章,講的是 JavaScript中||和&&的妙用, 下面是一些優(yōu)化寫法。2010-02-02
Js動(dòng)態(tài)設(shè)置rem來實(shí)現(xiàn)移動(dòng)端字體的自適應(yīng)代碼
這篇文章主要介紹了Js動(dòng)態(tài)設(shè)置rem來實(shí)現(xiàn)移動(dòng)端字體的自適應(yīng)代碼，代碼簡單易懂非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
相信大家都知道數(shù)據(jù)可視化就是借助圖形化的手段把生硬的數(shù)據(jù)生動(dòng)化，以此來展示出數(shù)據(jù)想要表達(dá)的信息，而圖表是最通常的一種數(shù)據(jù)可視化手段?？扇孔约杭兪謩?dòng)編寫各種圖表實(shí)在是讓人頭疼，各種計(jì)算各種煩?，F(xiàn)在就為大家介紹如何用D3.js來實(shí)現(xiàn)柱狀圖。2016-09-09
做一個(gè)帶拖動(dòng)的彈出層效果(像提示框那種) ,看了下代碼與實(shí)現(xiàn)效果，值得學(xué)習(xí)應(yīng)用。2009-09-09
javascript 中對(duì)象的繼承〔轉(zhuǎn)貼〕
javascript 中對(duì)象的繼承〔轉(zhuǎn)貼〕...2007-01-01
laypage+SpringMVC實(shí)現(xiàn)后端分頁
這篇文章主要為大家詳細(xì)介紹了laypage+SpringMVC實(shí)現(xiàn)后端分頁，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
淺析JavaScript中l(wèi)et與const命令的區(qū)別
這篇文章主要為大家詳細(xì)介紹了JavaScript中l(wèi)et命令與const命令的用法及區(qū)別,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考下2023-09-09
這篇文章主要介紹了微信小程序 冒泡事件原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
EXTJS7實(shí)現(xiàn)點(diǎn)擊拖拉選擇文本
這篇文章主要為大家詳細(xì)介紹了EXTJS7實(shí)現(xiàn)點(diǎn)擊拖拉選擇文本，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12