我必win
2016-01-09 19:49
官网代码:
<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>
测试代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>按钮插件--按钮加载状态</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body{padding:10px;margin:10px;}
</style>
</head>
<body>
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> Loading state </button>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(#myButton).on('click', function () {
var $btn = $(this).button('loading')
$btn.button('reset') })
</script>
</body>
</html>
$(function(){
//这里#myButton 要加引号
$('#myButton').on('click', function () {
//这里只能写 loading 不能写 loadding
var $btn = $(this).button('loading');
//这里加一个定时是为了看效果,不然的话上面设成loading然后下面代码会立刻执行,所以就看不到变化
setTimeout(function(){
$btn.button('reset');
},2000);
})
})玩转Bootstrap(JS插件篇)
128653 学习 · 305 问题
相似问题