使用Bootstrap3和Ladda UI實(shí)現(xiàn)的多種按鈕“加載中”效果體驗(yàn)
大家在開發(fā)基于web的網(wǎng)站或者web應(yīng)用中，常常在AJAX調(diào)用的過程中需要提示用戶并且展示相關(guān)的“加載中”效果，類似的UI設(shè)計也非常多，比如，當(dāng)點(diǎn)擊一個按鈕后，在它的旁邊顯示一個 “加載中” 文字，或者是添加一個“旋轉(zhuǎn)GIF”動畫效果圖。
在今天這個教程中，我們將介紹來一個Ladda UI概念設(shè)計，幫助你設(shè)計不同的基于按鈕的加載中效果，并且整合到Bootstrap3框架里，如下：
它可以方便的幫助你通過按鈕來提示用戶相關(guān)的“加載中”狀態(tài)，并且支持不同的加載效果，配置也很簡單，只需要在對應(yīng)的按鈕上添加data-style屬性，如下：
- data-style="slide-down"
在接下來的教程中，我們將介紹如何將Ladda UI設(shè)計和Bootstrap3整合起來，提供一個完整的“加載中”效果體驗(yàn)。
相關(guān)類庫
首先導(dǎo)入相關(guān)Bootstrap和Ladda類庫：
<scripttype="text/javascript"src="js/jquery-1.7.1.min.js"></script>
<scripttype="text/javascript"src="js/jquery.jribbble.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
<scriptsrc="js/spin.js"></script>
<scriptsrc="js/ladda.js"></script>
這里我們同時導(dǎo)入了Jdribbble插件來實(shí)現(xiàn)AJAX相關(guān)的效果（當(dāng)然，作為數(shù)據(jù)提供，你可以使用任何其它服務(wù)，或者自己的AJAX），獲取來自dribbble.com的最佳設(shè)計圖片。
如果你不需要展示進(jìn)度效果的話，基本上只需要在AJAX相關(guān)請求中添加如下代碼即可完成javascript代碼開發(fā)：
- var l =Ladda.create(this);
- l.start();
當(dāng)AJAX請求完成后，可以調(diào)用如下停止：
- l.stop();
即完整了整個“加載中”的過程，其中包含了“disabled”當(dāng)前的按鈕的操作，非常方便，提高了開發(fā)的效率。
當(dāng)然，如果你需要提示用戶當(dāng)前進(jìn)度的話，它內(nèi)置了一個進(jìn)度條，你可以使用如下代碼來設(shè)置當(dāng)前進(jìn)度：
- l.setProgress(0.1);
Javacript書寫完畢了，你需要在HTML中定義使用的加載中效果，如下：
<buttontype="button"class="btn btn-info btn-lg ladda-button center-block"id="showmore"title="顯示更多前端代碼回放"data-style="slide-down">
<spanclass="ladda-label">
更多設(shè)計
</span>
</button>
這里我們定義使用
data-style="slide-down"
來設(shè)置需要的加載中效果，這個效果是設(shè)置一個向下幻燈的切換效果，更多的效果，請訪問：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一起正常工作。
完整代碼
如果你曾閱讀過相關(guān)教程：Bootstrap3和jQuery實(shí)現(xiàn)響應(yīng)式iOS/Android風(fēng)格滾動到頁頂（底）彈跳效果 ，那么以下代碼應(yīng)該非常容易理解：
$(document).ready(function(){ //定義相關(guān)變量 var $wallcontent = $('#wallcontent'), pagenum=1, $showmore = $('#showmore'); function loadshots(){ var l =Ladda.create(this); l.start(); l.setProgress(0.1); $showmore.find('.ladda-label').text('loading...'); //調(diào)用jdribbble相關(guān)API獲取遠(yuǎn)程數(shù)據(jù)內(nèi)容 $.jribbble.getShotsByList('popular',function(data){ var items =[]; $.each(data.shots,function(i, shot){ items.push('<article class="col-md-2 col-sm-3 col-xs-4">'); items.push('<a href="'+ shot.url +'" target="_blank" class="linkc">'); items.push('<img class="img-responsive" src="'+ shot.image_teaser_url +'" alt="'+ shot.title +'">'); items.push('</a>'); items.push('</article>'); l.setProgress(0.1+0.02*i); }); var newEls = items.join(''), tmpcontent = $(newEls); l.setProgress(0.9); //以上代碼生成了需要顯示的dirbbble設(shè)計內(nèi)容，下面代碼中我們將這些內(nèi)容添加到HTML容器中 $wallcontent.append(tmpcontent); $showmore.find('.ladda-label').text('更多設(shè)計'); l.setProgress(1); l.stop(); },{page:pagenum, per_page:24}); pagenum++; } //綁定方法到加載更多按鈕 $showmore.bind('click', loadshots); $showmore.trigger('click'); });
以上代碼，主要通過點(diǎn)擊“更多設(shè)計”來獲取最受歡迎的dribbble設(shè)計作品，這里我們通過綁定click方法來處理事件，并且在處理過程中，使用進(jìn)度條來指示當(dāng)前的加載進(jìn)度。
在附帶的四個在線演示中，我們調(diào)用了不同的“加載中"特效，大家可以運(yùn)行查看效果。
如果對于代碼有任何問題，請在這里給我留言，我會給您解答，感謝閱讀！
了解代碼是如何一行一行編寫出來的，請訪問如下地址查看：
浙公網(wǎng)安備 33010602011771號