Bootstrap按鈕和折疊插件
學(xué)習(xí)要點(diǎn)：
1.按鈕
2.折疊
本節(jié)課我們主要學(xué)習(xí)一下 Bootstrap 中的按鈕和折疊插件。
一．按鈕
可以通過按鈕插件創(chuàng)建不同狀態(tài)的按鈕，也就是點(diǎn)擊后為選中狀態(tài)顏色加深，需要再次點(diǎn)擊后后取消選中狀態(tài)，顏色還原
單個(gè)切換
data-toggle="button"綁定按鈕事件，寫在按鈕button元素里，點(diǎn)擊后選中或取消選中按鈕(Bootstrap)
autocomplete="off"多次頁面加載時(shí)按鈕可能保持表單的禁用或選擇狀態(tài)。解決方案是：添加 autocomplete="off"。(Bootstrap)
<button class="btn btn-primary" data-toggle="button" autocomplete="off">單個(gè)切換</button>
點(diǎn)擊前未選中顏色
點(diǎn)擊后選中顏色
再次點(diǎn)擊后取消選中顏色
單選按鈕，也就是按鈕式單選框
btn-group樣式class類，寫在包含多個(gè)按鈕<div>里，設(shè)置群組多個(gè)按鈕為一組(Bootstrap)
data-toggle="buttons"按鈕事件，寫在群組div里，表示群組按鈕事件，點(diǎn)擊后選中當(dāng)前按鈕(Bootstrap)
label單選框或多選框按鈕標(biāo)簽，設(shè)置群組單選框或多選框時(shí)用此標(biāo)簽代替button標(biāo)簽，轉(zhuǎn)換成按鈕(Bootstrap)
active樣式class類，寫在<label>里，設(shè)置群組里的當(dāng)前按鈕為首選(Bootstrap)
for="nan"為當(dāng)前元素所綁定的元素id(Bootstrap)
<div class="btn-group" data-toggle="buttons"> <label for="nan" class="btn btn-primary active"> <input id="nan" type="radio" name="sex" autocomplete="off" checked> 男 </label> <label for="nv" class="btn btn-primary"> <input id="nv" type="radio" name="sex" autocomplete="off"> 女 </label></div>
按鈕式復(fù)選框
復(fù)選框和單選框一樣的只是type屬性值不一樣而已
<div class="btn-group" data-toggle="buttons"> <label for="yy" class="btn btn-primary active"> <input id="yy" type="checkbox" name="fa" autocomplete="off" checked>音樂 </label> <label for="ty" class="btn btn-primary"> <input id="ty" type="checkbox" name="fa" autocomplete="off"> 體育 </label> <label for="msh" class="btn btn-primary"> <input id="msh" type="checkbox" name="fa" autocomplete="off"> 美術(shù) </label> <label for="dl" class="btn btn-primary"> <input id="dl" type="checkbox" name="fa" autocomplete="off"> 電腦 </label></div>
加載狀態(tài)按鈕
加載狀態(tài)按鈕必須結(jié)合js
data-loading-text="上傳中請稍后..."設(shè)置加載狀態(tài)按鈕點(diǎn)擊后提示內(nèi)容，按鈕元素里，點(diǎn)擊后提示的內(nèi)容(Bootstrap)
<button id="myButton" type="button" data-loading-text="上傳中請稍后..." class="btn btn-primary" autocomplete="off"> 上傳文件</button>
js
$(function () { $("a,input,button").focus(function () { //獲取到所有的a,input,button標(biāo)簽執(zhí)行聚集光標(biāo)事件 this.blur() //當(dāng)聚集光標(biāo)時(shí)，去除虛線邊框 }); $('#myButton').on('click', function () { //獲取到加載狀態(tài)按鈕，執(zhí)行點(diǎn)擊事件 var btn = $(this).button('loading'); //點(diǎn)擊后執(zhí)行l(wèi)oading方法，即html里的data-loading-text="上傳中請稍后..." setTimeout(function () { //計(jì)時(shí)器等待1秒 btn.button('reset'); //執(zhí)行reset方法，還原初始狀態(tài) }, 1000); });});
按鈕方法中有三個(gè)參數(shù)：
button()按鈕方法，將按鈕元素執(zhí)行按鈕方法
toggle將按鈕元素綁定按鈕事件(Bootstrap)
reset將按鈕元素還原初始狀態(tài)(Bootstrap)
string自定義字符串，設(shè)置加載狀態(tài)按鈕提示內(nèi)容(Bootstrap)
<button id="myButton" type="button" data-zdyixx-text="上傳中請稍后..." class="btn btn-primary" autocomplete="off"> 上傳文件</button>
js
$(function () { $("a,input,button").focus(function () { //獲取到所有的a,input,button標(biāo)簽執(zhí)行聚集光標(biāo)事件 this.blur(); //當(dāng)聚集光標(biāo)時(shí)，去除虛線邊框 }); $('#myButton').on('click', function () { //獲取到按鈕指定點(diǎn)擊事件 //$(this).button('toggle'); //點(diǎn)擊后執(zhí)行按鈕方法 $(this).button('zdyixx'); //執(zhí)行自定義提示信息，即html里data-zdyixx-text="上傳中請稍后..." setTimeout(function () { //計(jì)時(shí)器等待1秒 $('#myButton').button('reset'); //執(zhí)行reset方法，還原初始狀態(tài) }, 1000); })});
二．折疊
通過點(diǎn)擊可以折疊內(nèi)容。
基本實(shí)例
data-toggle="collapse"設(shè)置按鈕折疊事件，寫在按鈕元素里，點(diǎn)擊后執(zhí)行折疊事件(Bootstrap)
data-target="#content"指向折疊區(qū)塊id，寫在按鈕元素里，將按鈕與折疊內(nèi)容區(qū)塊關(guān)聯(lián)(Bootstrap)
collapse樣式class類，寫在折疊區(qū)塊<div>里，設(shè)置折疊區(qū)塊樣式(Bootstrap)
well樣式class類，寫在折疊內(nèi)容區(qū)塊<div>里，設(shè)置折疊內(nèi)容區(qū)塊嵌入樣式(Bootstrap)
<button class="btn btn-primary" data-toggle="collapse" data-target="#content"> Bootstrap</button><div class="collapse" id="content"> <div class="well"> Bootstrap 是 Twitter 推出的一個(gè)用于前端開發(fā)的開源工具包。它由 Twitter 的設(shè)計(jì)師 Mark Otto 和 Jacob Thornton 合作開發(fā),是一個(gè) CSS/HTML 框架。目 前,Bootstrap 最新版本為 3.0 。 </div></div>
手風(fēng)琴折疊
panel-group樣式class類，面板容器<div>里，設(shè)置一個(gè)面板容器區(qū)塊(Bootstrap)
panel樣式class類，寫在面板組件<div>元素里，聲明面板組件div(Bootstrap)
panel-default樣式class類，寫在面板組件<div>元素里，設(shè)置面板組件默認(rèn)樣式(Bootstrap)
panel-heading樣式class類，寫在面板組件里頭部<div>元素里，設(shè)置面板組件頭部樣式(Bootstrap)
panel-title樣式class類，寫在面板組件里頭部<h1-h4>元素里，設(shè)置面板組件頭部標(biāo)題樣式(Bootstrap)
panel-collapse樣式class類，寫在面板組件里的內(nèi)容區(qū)塊<div>元素里，設(shè)置折疊內(nèi)容區(qū)域容器(Bootstrap)
collapse樣式class類，寫在面板組件里的內(nèi)容區(qū)塊<div>元素里，設(shè)置折疊內(nèi)容區(qū)域樣式(Bootstrap)
in樣式class類，寫在面板組件里的內(nèi)容區(qū)塊<div>元素里，設(shè)置當(dāng)前折疊內(nèi)容區(qū)域?yàn)槟J(rèn)展開效果(Bootstrap)
將標(biāo)題里的a標(biāo)簽地址等于內(nèi)容區(qū)域的id進(jìn)行關(guān)聯(lián),(Bootstrap)
data-parent="#accordion"寫在標(biāo)題里的a標(biāo)簽里，值是折疊面板容器的id，將折疊面板容器與標(biāo)題a標(biāo)簽關(guān)聯(lián)(Bootstrap)
data-toggle="collapse"折疊事件，寫在標(biāo)題里的a標(biāo)簽，點(diǎn)擊a標(biāo)簽后執(zhí)行折疊事件(Bootstrap)
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">點(diǎn)擊我進(jìn)行展示，再點(diǎn)擊我進(jìn)行折疊，第一部分</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> 這里是第一部分。 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">點(diǎn)擊我進(jìn)行展示，再點(diǎn)擊我進(jìn)行折疊，第二部分</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> 這里是第二部分。 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">點(diǎn)擊我進(jìn)行展示，再點(diǎn)擊我進(jìn)行折疊，第三部分</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> 這里是第三部分。 </div> </div> </div></div>
折疊屬性
data-parent 默認(rèn)值為 false，設(shè)置需指定父元素選擇器。也就是說，選定其中一個(gè)折疊區(qū)，其他折疊將隱藏，實(shí)現(xiàn)手風(fēng)琴效果。
data-toggle 如果前面加 data-*，設(shè)置'collapse'表示實(shí)現(xiàn)折疊；如果是 JavaScript 中的屬性，默認(rèn)為 true，實(shí)現(xiàn)反轉(zhuǎn)
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseOne" data-toggle="collapse">點(diǎn)擊我進(jìn)行展示，再點(diǎn)擊我進(jìn)行折疊，第一部分</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> 這里是第一部分。 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseTwo" data-toggle="collapse">點(diǎn)擊我進(jìn)行展示，再點(diǎn)擊我進(jìn)行折疊，第二部分</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> 這里是第二部分。 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseThree" data-toggle="collapse">點(diǎn)擊我進(jìn)行展示，再點(diǎn)擊我進(jìn)行折疊，第三部分</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> 這里是第三部分。 </div> </div> </div></div>
js
$(function () { $("a,input,button").focus(function () { //獲取到所有的a,input,button標(biāo)簽執(zhí)行聚集光標(biāo)事件 this.blur(); //當(dāng)聚集光標(biāo)時(shí)，去除虛線邊框 }); $('#collapseOne,#collapseTwo,#collapseThree').collapse({ //獲取所有標(biāo)題a標(biāo)簽id執(zhí)行折疊方法 parent: '#accordion', //將a標(biāo)簽與折疊容器id關(guān)聯(lián) toggle: false, //false默認(rèn)項(xiàng)展開，true默認(rèn)項(xiàng)折疊 });});
折疊方法，方法還提供了三個(gè)參數(shù)：hide、show、toggle。
collapse()折疊方法，將折疊容器里的折疊內(nèi)容區(qū)塊執(zhí)行折疊方法(Bootstrap)
hide折疊方法參數(shù)，將內(nèi)容折疊(Bootstrap)
show折疊方法參數(shù)，將內(nèi)容展開(Bootstrap)
toggle折疊方法參數(shù)，反轉(zhuǎn)折疊和展開(Bootstrap)
$(function () { $("a,input,button").focus(function () { //獲取到所有的a,input,button標(biāo)簽執(zhí)行聚集光標(biāo)事件 this.blur(); //當(dāng)聚集光標(biāo)時(shí)，去除虛線邊框 }); $('#collapseOne').collapse('hide'); $('#collapseTwo').collapse('show'); $('button').on('click', function () { $('#collapseOne').collapse('toggle'); });});
折疊事件，Collapse 插件中事件有四種。
show.bs.collapse 在 show 方法調(diào)用時(shí)立即觸發(fā)(Bootstrap)
shown.bs.collapse 折疊區(qū)完全顯示出來是觸發(fā)(Bootstrap)
hide.bs.collapse 在 hide 方法調(diào)用時(shí)觸發(fā)(Bootstrap)
hidden.bs.collapse 該事件在折疊區(qū)域完全隱藏之后觸發(fā)(Bootstrap)
js
$(function () { $("a,input,button").focus(function () { //獲取到所有的a,input,button標(biāo)簽執(zhí)行聚集光標(biāo)事件 this.blur(); //當(dāng)聚集光標(biāo)時(shí)，去除虛線邊框 }); $('#collapseOne').on('show.bs.collapse', function () { //獲取到折疊內(nèi)容區(qū)塊執(zhí)行事件 alert('在 show 方法調(diào)用時(shí)立即觸發(fā)'); }); $('#collapseOne').on('shown.bs.collapse', function () { alert('折疊區(qū)完全顯示出來是觸發(fā)'); }); $('#collapseOne').on('hide.bs.collapse', function () { alert('在 hide 方法調(diào)用時(shí)觸發(fā)'); }); $('#collapseOne').on('hidden.bs.collapse', function () { alert('該事件在折疊區(qū)域完全隱藏之后觸發(fā)'); });});
HTML
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseOne" data-toggle="collapse">點(diǎn)擊我進(jìn)行展示，再點(diǎn)擊我進(jìn)行折疊，第一部分</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> 這里是第一部分。 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseTwo" data-toggle="collapse">點(diǎn)擊我進(jìn)行展示，再點(diǎn)擊我進(jìn)行折疊，第二部分</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> 這里是第二部分。 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseThree" data-toggle="collapse">點(diǎn)擊我進(jìn)行展示，再點(diǎn)擊我進(jìn)行折疊，第三部分</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> 這里是第三部分。 </div> </div> </div></div>
