8.9 按钮
前一章已经介绍过按钮的功能和用法,本章将会结合JS插件来介绍Bootstrap
的按钮功能。
8.9.1 切换按钮状态
Bootstrap
的按钮插件依赖button.js
库。这个JS 库包含在bootstrap.js
或bootstrap.min.js
中。
Bootstrap
的按钮具有激活
和不激活
两种状态,激活状态的按钮以高亮的背景色进行区分。
切换按钮状态有两种方式:
- 为按钮指定
data-toggle="button"
属性。
- 调用按钮的
button('toggle')
方法。
通过data-toggle属性切换按钮状态
下面先看第一种方式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| <!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" class="btn btn-primary" data-toggle="button" aria-pressed="false"> 我的按钮</button> </div> </body>
</html>
|
上面的代码为按钮指定了data-toggle="button"
属性,因此当用户单击按钮时,按钮的状态将会在激活
和不激活
之间切换。
通过JS代码切换按钮状态
下面的代码示范了使用JS代码来切换按钮的状态。
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
| <!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 id="myBtn" type="button" class="btn btn-warning" aria-pressed="false"> 第一个按钮</button>
<button type="button" class="btn btn-warning" onclick="$('#myBtn').button('toggle');">切换第一个按钮的状态</button> </div>
</body>
</html>
|
第一个按钮用于显示按钮的切换状态,但该按钮并未被指定data-toggle="button"
属性,因此该按钮不能通过单击来改变状态。
第二个按钮的onclick
事件处理代码使用了button('toggle')
来切换第一个按钮的激活/不激活状态,因此可通过单击第二个按钮来切换第一个按钮的激活状态。
这个例子仅用于演示效果,实际应用中应该使用类似如下JS代码来切换状态:
1 2 3 4 5 6
| $(document).ready(function () { $(".btn").click(function (e) { $(e.target).button('toggle'); }) });
|
原文链接: 8.9 按钮 8.9.1 切换按钮状态