ladda-bootstrap 套件

2014-10-01 14:33:00

ladda-bootstrap用將spin.js整合bootstrap，並加強功能的一個套件
官網上有很詳細的使用範例
透過NuGet就可以安裝

可以看到套件相依於spin.js

使用方式是在button上，加上ladda-button的css類別，要顯示的文字加上ladda-label的css類別

<button id=”btn1” class=”btn btn-primary ladda-button” data-style=”expand-left”>
    <span class=”ladda-label”>button</span>
</button>

另外透過data-style來指定動畫效果
data-style=”expand-left”
data-style=”expand-right”
data-style=”expand-up”
data-style=”expand-down”
data-style=”zoom-in”
data-style=”zoom-out”
data-style=”slide-left”
data-style=”slide-right”
data-style=”slide-up”
data-style=”slide-down”
data-style=”contract”

最後透過JavaScript來觸發，先用Ladda.create(element)來取得物件
呼叫物件的start來開始動畫
呼叫物件的stop來停止動畫

$(function () {
    $(“#btn1”).click(function () {
        var obj = Ladda.create(this);
        obj.start();
        setTimeout(function () {
            obj.stop();
        }, 1000);
    });
});

spin.js.2.0.1好像和ladda不太和，最好先降到spin.js 1.3版就好

相關資料
Bootstrap button loading text
http://blog.developer.idv.tw/2014/10/bootstrap-button-loading-text.html

spin.js 套件
http://blog.developer.idv.tw/2014/10/spinjs.html

NuGet套件, spin