​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>Bootstrap3 按钮（Button）插件方法 - 迹忆客(jiyik.com)</title>
6
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
7
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
8
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.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');
49
            });        
50
        });
51
    });  
52
    $(function() {
53
        $("#myButton4").click(function(){
54
            $(this).button('loading').delay(1000).queue(function() {
55
                $(this).button('complete');
56
            });        
57
        });
58
    });
59
</script>
60
​
61
​
62
</body>
63
</html>

Design By 迹忆客 © 2023 jiyik.com ALL RIGHT RESERVED 冀ICP备15007416号-2