ladda-bootstrap用將spin.js整合bootstrap,並加強功能的一個套件
官網上有很詳細的使用範例
透過NuGet就可以安裝
[![](http://1.bp.blogspot.com/-IughOK48vhE/VCuejPlOPuI/AAAAAAAABtE/x5bf4Vtf7PY/s1600/01.%E5%AE%89%E8%A3%9D%E5%A5%97%E4%BB%B6.png)](http://1.bp.blogspot.com/-IughOK48vhE/VCuejPlOPuI/AAAAAAAABtE/x5bf4Vtf7PY/s1600/01.%E5%AE%89%E8%A3%9D%E5%A5%97%E4%BB%B6.png)
可以看到套件相依於spin.js
[![](http://2.bp.blogspot.com/-UqPTwSVmbmM/VCuenBELR-I/AAAAAAAABtM/iBFBfK9RyUo/s1600/02.%E5%A5%97%E4%BB%B6%E7%9B%B8%E4%BE%9D%E6%80%A7.png)](http://2.bp.blogspot.com/-UqPTwSVmbmM/VCuenBELR-I/AAAAAAAABtM/iBFBfK9RyUo/s1600/02.%E5%A5%97%E4%BB%B6%E7%9B%B8%E4%BE%9D%E6%80%A7.png)
使用方式是在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
Sharing is caring!