案例:Bootstrap案例     状态:可编辑再运行    进入竖版
 运行结果 
AخA
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8"> 
5
    <title>Bootstrap 实例 - 按钮(Button)插件方法</title>
6
    <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">
7
    <script src="/js/bootstrap/jquery.min.js"></script>
8
    <script src="/js/bootstrap/bootstrap3.3.7.min.js"></script>
9
</head>
10
<body>
11
    
12
<h2>点击每个按钮查看方法效果</h2>
13
<h4>演示 .button('toggle') 方法</h4>
14
<div id="myButtons1" class="bs-example">
15
    <button type="button" class="btn btn-primary">原始</button>
16
</div>
17
<h4>演示 .button('loading') 方法</h4>
18
<div id="myButtons2" class="bs-example">
19
    <button type="button" class="btn btn-primary" 
20
            data-loading-text="Loading...">原始
21
    </button>
22
</div>
23
<h4>演示 .button('reset') 方法</h4>
24
<div id="myButtons3" class="bs-example">
25
    <button type="button" class="btn btn-primary" 
26
            data-loading-text="Loading...">原始
27
    </button>
28
</div>
29
<h4>演示 .button(string) 方法</h4>
30
<button type="button" class="btn btn-primary" id="myButton4" 
31
    data-complete-text="Loading finished">请点击我
32
</button>
33
<script type="text/javascript">
34
    $(function () {
35
        $("#myButtons1 .btn").click(function(){
36
            $(this).button('toggle');
37
        });
38
    });
39
    $(function() { 
40
        $("#myButtons2 .btn").click(function(){
41
            $(this).button('loading').delay(1000).queue(function() {
42
            });        
43
        });
44
    });   
45
    $(function() { 
46
        $("#myButtons3 .btn").click(function(){
47
            $(this).button('loading').delay(1000).queue(function() {
48
                $(this).button('reset');