8.9.3 使用JS方法改变按钮文本
Bootstrap为按钮提供了一个button()方法,可为该方法传入一个字符串参数。不同字符串参数的意义各不相同。
| 参数 |
描述 |
button('toggle') |
传入toggle字符串参数用于切换按钮的激活、不激活状态。前面介绍过了,这里不再举例 |
button('reset') |
传入reset字符串用于恢复按钮中默认的文本内容。 |
button(string) |
传入普通字符串,用于将按钮文本设为data-string-text属性所指定的内容。这个string,可以设置为任意的字符串,例如设置为'loading'，'loaded'，'sexy'等等 |
程序示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 改变按钮文本 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" id="myStateBtn" data-loading-text="正在加载中" data-loaded-text="数据加载完成"
data-sexy-text="性感荷官在线发牌" class="btn btn-primary" autocomplete="off">
开始</button>
</div>
<script type="text/javascript">
$('#myStateBtn').on('click', function () {
$(this).button('loading')
setTimeout(function () {
$('#myStateBtn').button("sexy");
}, 2000);
setTimeout(function () {
$('#myStateBtn').button("loaded");
}, 4000);
setTimeout(function () {
$('#myStateBtn').button("reset");
}, 6000);
})
</script>
</body>
</html>
|
按钮的button('loading')方法会把按钮的文本切换为data-loading-text属性所指定的值;
按钮的button('loaded')方法会把按钮的文本切换为data-loaded-text属性所指定的值;
按钮的button('sexy')方法会把按钮的文本切换为data-sexy-text属性所指定的值;
按钮的button('reset')方法会把按钮的文本切换为最初的文本内容。