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

在線演示

在線演示

大家在開發基於web的網站或者web應用中，常常在AJAX調用的過程中需要提示用戶並且展示相關的“加載中”效果，類似的UI設計也非常多，比如，當點擊一個按鈕后，在它的旁邊顯示一個 “加載中” 文字，或者是添加一個“旋轉GIF”動畫效果圖。

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

它可以方便的幫助你通過按鈕來提示用戶相關的“加載中”狀態，並且支持不同的加載效果，配置也很簡單，只需要在對應的按鈕上添加data-style屬性，如下：

1. data-style="slide-down"

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

相關類庫

首先導入相關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>

這里我們同時導入了Jdribbble插件來實現AJAX相關的效果（當然，作為數據提供，你可以使用任何其它服務，或者自己的AJAX），獲取來自dribbble.com的最佳設計圖片。

如果你不需要展示進度效果的話，基本上只需要在AJAX相關請求中添加如下代碼即可完成javascript代碼開發：

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

當AJAX請求完成后，可以調用如下停止：

1. l.stop();

即完整了整個“加載中”的過程，其中包含了“disabled”當前的按鈕的操作，非常方便，提高了開發的效率。

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

1. 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">
    更多設計
    </span>
    </button>

這里我們定義使用

    data-style="slide-down"

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

相關的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"/>

這里我們引用了相關的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