-
圖片輪播--聲明式觸輪播圖的播放（一） 觸發(fā)輪播圖的播放方法也有兩種，一種是聲明式，另外一種是JavaScript方式。首先來看聲明式方法。 data-ride 屬性：取值 carousel，并且將其定義在 carousel 上。 data-target 屬性：取值 carousel 定義的 ID 名或者其他樣式識(shí)別符，如前面示例所示，取值為“#slidershow”，并且將其定義在輪播圖計(jì)數(shù)器的每個(gè) li 上。 data-slide 屬性：取值包括 prev，next，prev表示向后滾動(dòng)，next 表示向前滾動(dòng)。該屬性值同樣定義在輪播圖控制器的 a 鏈接上，同時(shí)設(shè)置控制器 href 值為容器 carousel 的 ID 名或其他樣式識(shí)別符。 data-slide-to 屬性：用來傳遞某個(gè)幀的下標(biāo)，比如 data-slide-to="2"，可以直接跳轉(zhuǎn)到這個(gè)指定的幀（下標(biāo)從0開始計(jì)），同樣定義在輪播圖計(jì)數(shù)器的每個(gè) li 上。查看全部
-
圖片輪播--輪播圖片的設(shè)計(jì)（三） 第四步：設(shè)計(jì)輪播圖片控制器。很多時(shí)候輪播圖片還具有一個(gè)向前播放和向后播放的控制器。在 Carousel 中通過 carousel-control 樣式配合 left 和 right 來實(shí)現(xiàn)。其中l(wèi)eft表示向前播放，right表示向后播放。其同樣放在carousel容器內(nèi)： <div id="slidershow" class="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> … </ol> <!-- 設(shè)置輪播圖片 --> <div class="carousel-inner"> … </div> <!-- 設(shè)置輪播圖片控制器 --> <a class="left carousel-control" href="" > <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href=""> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> 通過兩個(gè) a 鏈接然后在內(nèi)部定義要顯示的小圖標(biāo)，一個(gè)是向前，一個(gè)是向后。查看全部
-
圖片輪播--輪播圖片的設(shè)計(jì)（二） 第三步：設(shè)計(jì)輪播圖片播放區(qū)。輪播圖整個(gè)效果中，播放區(qū)是最關(guān)鍵的一個(gè)區(qū)域，這個(gè)區(qū)域主要用來放置需要輪播的圖片。這個(gè)區(qū)域使用 carousel-inner 樣式來控制，而且其同樣放置在 carousel 容器內(nèi)，并且通過 item 容器來放置每張輪播的圖片： <div id="slidershow" class="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> <li class="active">1</li> … </ol> <!-- 設(shè)置輪播圖片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> </div> <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a> </div> … <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a> </div> </div> </div>查看全部
-
圖片輪播--輪播圖片的設(shè)計(jì)（一） 一個(gè)輪播圖片主要包括三個(gè)部分： 輪播的圖片 輪播圖片的計(jì)數(shù)器 輪播圖片的控制器 復(fù)雜一點(diǎn)的輪播圖片，每個(gè)輪播區(qū)會(huì)帶有對(duì)應(yīng)的標(biāo)題和描述內(nèi)容。那么在 Bootstrap 框架中，輪播圖是如何設(shè)計(jì)的呢？ 第一步：設(shè)計(jì)輪播圖片的容器。在 Bootstrap 框架中采用 carousel 樣式，并且給這個(gè)容器定義一個(gè) ID 值，方便后面采用 data 屬性來聲明觸發(fā)。 <div id="slidershow" class="carousel"></div> 第二步：設(shè)計(jì)輪播圖片計(jì)數(shù)器。在容器 div.carousel 的內(nèi)部添加輪播圖片計(jì)算器，采用 carousel-indicators 樣式，其主要功能是顯示當(dāng)前圖片的播放順序(有幾張圖片就放置幾個(gè)li)，一般采用有順列表來制作： <div id="slidershow" class="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> ... </ol> </div>查看全部
-
圖片輪播（Carousel） 上面的輪播效果是6張廣告圖從右向左播放，鼠標(biāo)懸停在圖片時(shí)會(huì)暫停播放，如果鼠標(biāo)懸?；騿螕粲蚁陆菆A點(diǎn)時(shí)，會(huì)顯示對(duì)應(yīng)的圖片。這種圖片輪播效果，在Bootstrap框架中是通過Carousel插件來實(shí)現(xiàn)，在下面小節(jié)中我們將要介紹的是如何使用Carouse插件實(shí)現(xiàn)圖片輪播效果。查看全部
-
手風(fēng)琴--聲明式觸發(fā)手風(fēng)琴（三） 第五步，激活手風(fēng)琴交互行為。要完成交互行為，需要在標(biāo)題鏈接中自定義兩個(gè)屬性，一個(gè)是data-toggle，并且取值為collapse；另一個(gè)是data-target，取值為各個(gè)面板內(nèi)容區(qū)的標(biāo)識(shí)符 第六步，定義data-parent屬性，實(shí)現(xiàn)點(diǎn)擊一個(gè)其中一個(gè)元素時(shí)，關(guān)閉所有的折疊區(qū)，再打開所單擊的區(qū)域（如果所單擊區(qū)域是展示的，則會(huì)關(guān)閉）。這個(gè)data-parent取值與手風(fēng)琴面板容器的標(biāo)識(shí)符相匹配，比如這個(gè)例子是指 #myAccordion <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">標(biāo)題一</a> </h4> </div> …查看全部
-
手風(fēng)琴--聲明式觸發(fā)手風(fēng)琴（二） 第三步，為了把標(biāo)題和內(nèi)容區(qū)捆綁在一起，可以通過錨鏈接的方法，把標(biāo)題區(qū)域和面板區(qū)連在一起： <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">標(biāo)題一</a></h4> </div> <div class="panel-collapse" id="panel1"> <div class="panel-body">折疊區(qū)內(nèi)容...</div> </div> </div> 第四步，控制面板內(nèi)容區(qū)是否可視。在Bootstrap框架中，如果你想讓內(nèi)容區(qū)域不可視，只需要在 panel-collapse 樣式上添加 collapse： <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">標(biāo)題一</a></h4> </div> <div class="panel-collapse collapse" id="panel1"> <div class="panel-body">折疊區(qū)內(nèi)容...</div> //要可視就追加in </div> </div>查看全部
-
手風(fēng)琴--聲明式觸發(fā)手風(fēng)琴（一） 觸發(fā)手風(fēng)琴可以通過自定義的 data-toggle 屬性來觸發(fā)。其中data-toggle值設(shè)置為 collapse，data-target="#折疊區(qū)標(biāo)識(shí)符"。 <div class="panel-group" id="panel-Accroading"> <div class="panel panel-default panel-accroading"> <div class="panel-heading"> <h4 class="panel-title">標(biāo)題一</h4> </div> <div class="panel-collapse"> <div class="panel-body">折疊區(qū)內(nèi)容</div> </div> </div> </div>查看全部
-
手風(fēng)琴--手風(fēng)琴結(jié)構(gòu) 手風(fēng)琴最關(guān)鍵的部分，就是每個(gè)標(biāo)題對(duì)應(yīng)有一個(gè)內(nèi)容，在Bootstrap框架中將這兩個(gè)部分組合起來稱為一個(gè)panel頁板，如右邊效果所示，他就有三個(gè)panel面板，將這三個(gè)面板組合在一起，就是一個(gè)面板組合 panel-group，也就是手風(fēng)琴的結(jié)構(gòu)。如： <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">標(biāo)題一</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body">標(biāo)題一對(duì)應(yīng)的內(nèi)容</div> </div> </div> 單點(diǎn)就是一個(gè)觸發(fā)器和一個(gè)折疊區(qū)： <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">觸發(fā)器</button> <div id="demo" class="collapse in">折疊區(qū)</div>查看全部
-
手風(fēng)琴（Collapse） 插件源文件：collapse.js 引用地址： <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-collapse.min.js"></script> Bootstrap 框架中 Collapse插件(折疊)其實(shí)就是我們常見的手風(fēng)琴效果。點(diǎn)擊標(biāo)題，可以讓其對(duì)應(yīng)的內(nèi)容顯示或隱藏。查看全部
-
按鈕插件--JavaScript用法 除了上面介紹的屬性聲明使用方法之外，按鈕插件還可以通過調(diào)用button函數(shù)，然后給button函數(shù)傳入具體的參數(shù)，實(shí)現(xiàn)不同的效果。而其中有兩個(gè)參數(shù)是固定不變的，即toggle和reset。其他的都可以隨意定義： 1、切換按鈕狀態(tài)（得到焦點(diǎn)）： $("#mybutton").button("toggle") 2、重新恢復(fù)按鈕： $("#mybutton").button("reset") 如下代碼： $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('reset'); }); }); }); 3、任意參數(shù)： $("#mybutton").button("任意字符參數(shù)名") 上面代碼作用：替換 data-任意字符參數(shù)名-text 的屬性值為“按鈕上顯示的文本值”。如下代碼： html: <button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" >確認(rèn)</button> js代碼： $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('complete'); }); }); });查看全部
-
按鈕插件--按鈕狀態(tài)切換 使用 data-toggle 屬性還可以激活按鈕的行為狀態(tài)，實(shí)現(xiàn)在激活和未激活之間進(jìn)行狀態(tài)切換。例如，下面代碼可以激活按鈕行為特性，單擊時(shí)將按鈕激活，再單擊可以讓按鈕恢復(fù)到默認(rèn)狀態(tài)： <button type="button" data-toggle="button" class="btn btn-primary">確認(rèn)</button> 注意，這里自定義屬性是 data-toggle="button"，而不是 data-toggle="buttons"。查看全部
-
按鈕插件--模擬復(fù)選按鈕 使用按鈕組來模擬復(fù)選按鈕和模擬單選按鈕是一樣的，具有同等效果，也是通過在按鈕組上自定義data-toggle="buttons"來實(shí)現(xiàn)。唯一不同的是，將input[type="radio"]換成input[type="checkbox"]，如下所示： <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="checkbox" name="options" id="options1">電影 </label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="options2">音樂 </label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="options3">游戲 </label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="options4">攝影 </label> </div>查看全部
-
按鈕插件--模擬單選擇按鈕 模擬單選擇按鈕是通過一組按鈕來實(shí)現(xiàn)單選擇操作。使用按鈕組來模擬單選按鈕組，能夠讓設(shè)計(jì)更具個(gè)性化，可以定制出更美觀的單選按鈕組。 在Bootstrap框架中按鈕插件中，可以通過給按鈕組自定義屬性data-toggle="buttons"，如下所示： <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="options1">男 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="options2">女 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="options3">未知 </label> </div>查看全部
-
按鈕插件--按鈕加載狀態(tài) 通過按鈕可以設(shè)計(jì)狀態(tài)提示，當(dāng)單擊按鈕時(shí)，會(huì)顯示loading狀態(tài)信息。例如，點(diǎn)擊“加載”按鈕，會(huì)觸發(fā)按鈕的加載的狀態(tài)。如下所示： <button class="btnbtn-primary" data-loading-text="正在加載中,請(qǐng)稍等..." type="button" id="loaddingBtn">加載</button> 通過data-loading-text屬性定義加載的文本信息，然后通過JavaScript給按鈕綁定一個(gè)事件，并給按鈕添加一個(gè)button("loading")方法來激活按鈕的加載狀態(tài)行為。如下所示： $(function(){ $("#loaddingBtn").click(function () { $(this).button("loading"); }); });查看全部
舉報(bào)
0/150
提交
取消