使用Bootstrap3和Ladda UI實現的多種按鈕「加載中」效果體驗

在線演示

在線演示

你們在開發基於web的網站或者web應用中，經常在AJAX調用的過程當中須要提示用戶而且展現相關的「加載中」效果，相似的UI設計也很是多，好比，當點擊一個按鈕後，在它的旁邊顯示一個 「加載中」 文字，或者是添加一個「旋轉GIF」動畫效果圖。

在今天這個教程中，咱們將介紹來一個Ladda UI概念設計，幫助你設計不一樣的基於按鈕的加載中效果，而且整合到Bootstrap3框架裏，以下：

它能夠方便的幫助你經過按鈕來提示用戶相關的「加載中」狀態，而且支持不一樣的加載效果，配置也很簡單，只須要在對應的按鈕上添加data-style屬性，以下：

data-style="slide-down"

在接下來的教程中，咱們將介紹如何將Ladda UI設計和Bootstrap3整合起來，提供一個完整的「加載中」效果體驗。

相關類庫

首先導入相關Bootstrap和Ladda類庫：

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

這裏咱們同時導入了Jdribbble插件來實現AJAX相關的效果（固然，做爲數據提供，你可使用任何其它服務，或者本身的AJAX），獲取來自dribbble.com的最佳設計圖片。

若是你不須要展現進度效果的話，基本上只須要在AJAX相關請求中添加以下代碼便可完成javascript代碼開發：

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

當AJAX請求完成後，能夠調用以下中止：

l.stop();

即完整了整個「加載中」的過程，其中包含了「disabled」當前的按鈕的操做，很是方便，提升了開發的效率。

固然，若是你須要提示用戶當前進度的話，它內置了一個進度條，你可使用以下代碼來設置當前進度：

l.setProgress( 0.1 );

Javacript書寫完畢了，你須要在HTML中定義使用的加載中效果，以下：

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

這裏咱們定義使用

data-style="slide-down"

來設置須要的加載中效果，這個效果是設置一個向下幻燈的切換效果，更多的效果，請訪問：http://lab.hakim.se/ladda/

相關的CSS

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

這裏咱們引用了相關的CSS，以保證Ladda能夠正常的和Bootstrap3一塊兒正常工做。

完整代碼

若是你曾閱讀過相關教程：Bootstrap3和jQuery實現響應式iOS/Android風格滾動到頁頂（底）彈跳效果 ，那麼如下代碼應該很是容易理解：

$(document).ready(function(){			  //定義相關變量			  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...');								//調用jdribbble相關API獲取遠程數據內容				$.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設計內容，下面代碼中咱們將這些內容添加到HTML容器中				  $wallcontent.append(tmpcontent);				  				  $showmore.find('.ladda-label').text('更多設計');				  				  l.setProgress( 1 );				  l.stop();								}, {page:pagenum, per_page:24});								pagenum++;			  }			  			  //綁定方法到加載更多按鈕			  $showmore.bind('click', loadshots);			  			  $showmore.trigger('click');			  			});

以上代碼，主要經過點擊「更多設計」來獲取最受歡迎的dribbble設計做品，這裏咱們經過綁定click方法來處理事件，而且在處理過程當中，使用進度條來指示當前的加載進度。

在附帶的四個在線演示中，咱們調用了不一樣的「加載中"特效，你們能夠運行查看效果。

若是對於代碼有任何問題，請在這裏給我留言，我會給您解答，感謝閱讀！

瞭解代碼是如何一行一行編寫出來的，請訪問以下地址查看：

前端代碼回放：http://www.gbtags.com/gb/rtreplayerpreview/9.htm

閱讀全文：使用Bootstrap3和Ladda UI實現的多種按鈕「加載中」效果體驗