在線(xiàn)演示

大家在開(kāi)發(fā)基于web的網(wǎng)站或者web應(yīng)用中，常常在AJAX調(diào)用的過(guò)程中需要提示用戶(hù)并且展示相關(guān)的“加載中”效果，類(lèi)似的UI設(shè)計(jì)也非常多，比如，當(dāng)點(diǎn)擊一個(gè)按鈕后，在它的旁邊顯示一個(gè) “加載中” 文字，或者是添加一個(gè)“旋轉(zhuǎn)GIF”動(dòng)畫(huà)效果圖。

在今天這個(gè)教程中，我們將介紹來(lái)一個(gè)Ladda UI概念設(shè)計(jì)，幫助你設(shè)計(jì)不同的基于按鈕的加載中效果，并且整合到Bootstrap3框架里，如下：

它可以方便的幫助你通過(guò)按鈕來(lái)提示用戶(hù)相關(guān)的“加載中”狀態(tài)，并且支持不同的加載效果，配置也很簡(jiǎn)單，只需要在對(duì)應(yīng)的按鈕上添加data-style屬性，如下：

data-style="slide-down"

在接下來(lái)的教程中，我們將介紹如何將Ladda UI設(shè)計(jì)和Bootstrap3整合起來(lái)，提供一個(gè)完整的“加載中”效果體驗(yàn)。

相關(guān)類(lèi)庫(kù)

首先導(dǎo)入相關(guān)Bootstrap和Ladda類(lèi)庫(kù)：

<scripttype="text/javascript"src="js/jquery-1.7.1.min.js"> <scripttype="text/javascript"src="js/jquery.jribbble.min.js"> <scriptsrc="js/bootstrap.min.js"> <scriptsrc="js/spin.js"> <scriptsrc="js/ladda.js">

這里我們同時(shí)導(dǎo)入了Jdribbble插件來(lái)實(shí)現(xiàn)AJAX相關(guān)的效果（當(dāng)然，作為數(shù)據(jù)提供，你可以使用任何其它服務(wù)，或者自己的AJAX），獲取來(lái)自dribbble.com的最佳設(shè)計(jì)圖片。

如果你不需要展示進(jìn)度效果的話(huà)，基本上只需要在AJAX相關(guān)請(qǐng)求中添加如下代碼即可完成javascript代碼開(kāi)發(fā)：

var l =Ladda.create(this); l.start();

當(dāng)AJAX請(qǐng)求完成后，可以調(diào)用如下停止：

l.stop();

即完整了整個(gè)“加載中”的過(guò)程，其中包含了“disabled”當(dāng)前的按鈕的操作，非常方便，提高了開(kāi)發(fā)的效率。

當(dāng)然，如果你需要提示用戶(hù)當(dāng)前進(jìn)度的話(huà)，它內(nèi)置了一個(gè)進(jìn)度條，你可以使用如下代碼來(lái)設(shè)置當(dāng)前進(jìn)度：

l.setProgress(0.1);

Javacript書(shū)寫(xiě)完畢了，你需要在HTML中定義使用的加載中效果，如下：

<buttontype="button"class="btn btn-info btn-lg ladda-button center-block"id="showmore"title="顯示更多前端代碼回放"data-style="slide-down"> <spanclass="ladda-label">

這里我們定義使用

data-style="slide-down"

來(lái)設(shè)置需要的加載中效果，這個(gè)效果是設(shè)置一個(gè)向下幻燈的切換效果，更多的效果，請(qǐng)?jiān)L問(wèn)：http://lab.hakim.se/ladda/

相關(guān)的CSS

<linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"/> <linkrel="stylesheet"type="text/css"href="css/ladda-themeless.css"/> <linkrel="stylesheet"type="text/css"href="css/gbtags.css"/>

這里我們引用了相關(guān)的CSS，以保證Ladda可以正常的和Bootstrap3一起正常工作。