0%

8.9.3 使用JS方法改变按钮文本

发表于 更新于 分类于 ， ，

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 () {
			// 切换为data-loading-text属性值
			$(this).button('loading')
			setTimeout(function () {
				// 切换为data-sexy-text属性值
				$('#myStateBtn').button("sexy");
			}, 2000);
			setTimeout(function () {
				// 切换为data-loaded-text属性值
				$('#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')方法会把按钮的文本切换为最初的文本内容。

原文链接: 8.9.3 使用JS方法改变按钮文本