插件描述:Ladda可以让你点击按钮时,在按钮中显示一个加载进度效果。
使用方法
添加bootstrap.css样式,spin.min.js和ladda.min.js到您的页面
然后添加一个按钮并加入样式:expand-left
或者使用“a”标签:expand-left
你可以设置data-style属性来选择风格:data-style="expand-left"
data-style="expand-left"
data-style="expand-right"
data-style="expand-up"
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"
你可以通过设置data-size属性选择控制大小:data-size="xs"
data-size="s"
data-size="l"
你可以选择的颜色微调器通过设置data-spinner-color属性(十六进制代码):data-spinner-color="#FF0000"
与Javascript控制UI状态:Ladda.bind( 'input[type=submit]' );
使用AJAX表单时,可以使用下面的语法:Submit form$(function() {
$('#form-submit').click(function(e){
e.preventDefault();
var l = Ladda.create(this);
l.start();
$.post("your-url",
{ data : data },
function(response){
console.log(response);
}, "json")
.always(function() { l.stop(); });
return false;
});
});
其他方法可以通过Javascript