Button在Bootstrap中可以添进一些交互,需要引入button.js或者bootstrap.js或压缩版的bootstrap.min.js。
如需向按钮添加加载状态,只需向按钮中添加data-loading-text="Loading..." 作为其属性即可。如下是官方给出的使用方法:
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
Loading state
</button>
<script>
$('#myButton').on('click', function () {
var $btn = $(this).button('loading')
// business logic...
$btn.button('reset')
})
</script>
但是今天在项目中运用并没有得到相应的效果,网上有人说F12追踪js运行看到缺少文件,或许以前有这个问题,但本人用的bootstrap3.3并没有缺少文件,经过反复测试发现看不到效果是因为没有设置延迟时间,在加载的同时又reset了。修改后代码如下所示:
<button type="button" id="saveButton" data-loading-text="保存中..." οnclick="saveToModal();" class="btn btn-primary" autocomplete="off">
保存
</button>
<SCRIPT>
function saveToModal(){
var btn = $("#saveButton");
btn.button('loading');
setTimeout(function () { btn.button('reset'); },1000);
document.getElementById("StudentNum-p").innerHTML = document.getElementById("StudentNum").value;
document.getElementById("StudentName-p").innerHTML = document.getElementById("StudentName").value;
}
</SCRIPIT>
这是在实际项目中截取出来的片段。