我必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插件篇)
128654 学习 · 296 问题
相似问题