蓝蓝站点

Java读书笔记

发表于 更新于 分类于 ， ， Waline： 本文字数： 4.7k 阅读时长 ≈ 4 分钟

8.11.2 通过data-*属性激活轮播图

上面的静态轮播图并不能自动播放,也不能响应用户操作,这是因为该轮播图既没有使用data-*属性激活,也没有使用JS脚本触发。
使用data-*属性激活轮播图会涉及不少属性。下面先讲解这些属性的用法。

应用于轮播图容器的属性

可应用于轮播图容器的属性有如下几个。

属性 描述
data-ride 该属性用于激活轮播图容器。该属性的值固定为'carousel'字符串。
data-interval 设置轮播图开始自动轮播时的间隔时间,单位为毫秒,比如设置为1000,则意味着每隔1秒换一次图片。如果将该属性设置为false,那么该轮播图将永远不会自动轮播。
data-pause 该属性支持'hover'字符串或null值。如果将该属性设置为'hover'(默认值),则鼠标停留在轮播图上时将停止轮播,鼠标离开后则立即开始轮播。
data-wrap 该属性指定轮播到最后一张图片时是否自动重新开始。
data-keyboard 该属性设置轮播图是否需要对键盘事件做出响应。

应用于轮播图显示器的列表项,控制按钮的属性

可应用于轮播图显示器内的列表项、控制按钮的属性有如下几个。

方法 描述
data-target或href 这两个属性都用于指定它们所控制的轮播图。这两个属性的值支持各种CSS选择器,通常会使用ID选择器,用于表示轮播图容器。通常链接会使用href属性,而其他元素则需要使用data-target属性。
data-slide-to 该属性通常应用于轮播图显示器内的列表项,指定单击该列表项时轮播图跳转到第几张图片。其中0代表第一张图片。
data-slide 该属性通常应用于轮播图底部的控制按钮。该属性值支持'prev'和'next'两个字符串,其中'prev'表示显示上一张图片,'next'表示显示下一张图片。

程序示例

下面的示例将会为前一个示例的静态轮播图添加data-*属性,从而实现真正的动态轮播图。

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!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">
        <!-- 轮播图容器 -->
        <!-- data-ride="carousel"一定要轮播图要设置该属性 -->
        <!-- data-interval="1000"自动轮播时的间隔时间为1秒 -->
        <!-- data-pause='hover'鼠标悬停在轮播图上是停止轮播 -->
        <!-- 1号代码 -->
        <div id="myCarousel" class="carousel" data-ride="carousel" data-interval="1000" data-pause='hover'>
            <!-- 轮播图显示器 -->
            <!-- 2号代码 -->
            <ul class="carousel-indicators">
                <!-- data-target="#myCarousel"指定 被控制的轮播图 -->
                <!-- data-slide-to="0"点击该显示器时显示其 控制的轮播图 的第1张图片 -->
                <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
            </ul>
            <!-- 轮播图主体内容 -->
            <div class="carousel-inner" role="listbox">
                <!-- 每个class='item'的div元素代表一个轮播项 -->
                <div class="item active">
                    <!-- 图片 -->
                    <img src="images/lijiang.jpg" alt="漓江">
                    <!-- 图片说明 -->
                    <div class="carousel-caption">
                        <h4>漓江</h4>
                        <div>漓江风光有山青、水秀、洞奇、石美“四胜”之誉。从桂林至阳朔的83公里漓江河段，集中了桂林山水的精华，令人有“舟行碧波上，人在画中游”之感。</div>
                    </div>
                </div>
                <div class="item">
                    <img src="images/shuangta.jpg" alt="双塔">
                    <!-- 图片说明 -->
                    <div class="carousel-caption">
                        <h4>金银双塔</h4>
                        <div>金银双塔白天和夜晚晚会呈现出截然不同的美景，白天让人觉得庄严、肃穆，而当夜幕降临，在灯光的映照下，则给人以亲切温馨的感觉。</div>
                    </div>
                </div>
                <div class="item">
                    <img src="images/qiao.jpg" alt="桥">
                </div>
                <div class="item">
                    <img src="images/xiangbi.jpg" alt="象鼻山">
                </div>
            </div>
            <!-- 轮播图的前控制按钮 -->
            <!-- href="#myCarousel"指明被控制的轮播图  -->
            <!-- data-slide="prev"显示前一张图 -->
            <!-- 2号代码 -->
            <a class="left carousel-control" role="button" data-slide="prev" href="#myCarousel">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" role="button" data-slide="next" href="#myCarousel">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
</body>

</html>

在上述程序中:

  • 1号代码就是在**轮播图容器**上的添加data-*属性,其中
    • data-ride="carousel"属性用于初始化轮播图组件。
    • data-interval="1000"指定自动轮播时每隔1秒就会更换一张图片;
    • data-pause='hover'指定当鼠标悬停在轮播图上时停止轮播。
  • 2号代码是在轮播图显示器的列表项上添加data-*属性,其中
    • data-slide-to="0"指定单击该列表项会跳转到哪张图片,
    • data-target="#myCarousel"指定该列表项所控制的轮播图。
  • 3代码是在轮播图控制按钮上添加data-*属性,其中
    • data-slide="prev"控制单击该链接时显示上一张图片,
    • href="#myCarousel"指定该列表项所控制的轮播图。

浏览该页面时可看到页面自动轮播的效果,如果将鼠标悬停在轮播图上,轮播将停止;也可用鼠标单击轮播显示器或轮播控制按钮来切换轮播图片的显示。

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.6k 阅读时长 ≈ 3 分钟

8.11 轮播图

轮播图也是Web页面中常用的组件,轮播图通常包含多张图片,这些图片就像”旋转木马”一样轮流播放。轮播图通常用于一些产品展示,来突出显示产品内容。

8.11 轮播图 8.11.1 静态轮播图

静态轮播图通常由如下几个部分组成。

  1. 轮播图容器:该容器通常是一个<div>元素,该元素需要应用.carousel样式。
  2. 轮播图显示器:该显示器通常是一个<ol>或<ul>列表,其中每个列表项对应一个轮播图。该轮播显示器需要应用.carousel-indicators样式。
  3. 轮播图主体:轮播图主体就是包含多张图片的部分,通常是一个指定了class="carousel-inner"的<div>元素。
    • 轮播图主体的图片(<img>元素)需要放在指定了class="item"的<div>元素内。
    • 如果需要为该图片添加说明,可通过被指定了class="carousel-caption"样式的元素来添加。
  4. 轮播图控制按钮:轮播图控制按钮其实就是两个链接,直接把这两个链接放在轮播图容器内即可,并为它们应用.carousel-control样式;需要放在左边的按钮指定为.left 样式,需要放在右边的按钮指定为.right样式。为了让系统知道这两个链接是按钮,需要为它们指定role="button"。

程序示例

下面代码定义了一个静态的轮播图。

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!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">
        <!-- 轮播图容器 -->
        <!-- 1号代码 -->
        <div id="myCarousel" class="carousel">
            <!-- 轮播图显示器 -->
            <!-- 2号代码 -->
            <ul class="carousel-indicators">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <!-- 轮播图主体内容 -->
            <!-- 3号代码 -->
            <div class="carousel-inner" role="listbox">
                <!-- 每个class='item'的div元素代表一个轮播项 -->
                <div class="item active">
                    <img src="images/lijiang.jpg" alt="漓江">
                    <!-- 图片说明 -->
                    <div class="carousel-caption">
                        <h4>漓江</h4>
                        <div>漓江风光有山青、水秀、洞奇、石美“四胜”之誉。从桂林至阳朔的83公里漓江河段，集中了桂林山水的精华，令人有“舟行碧波上，人在画中游”之感。</div>
                    </div>
                </div>
                <!-- 轮播项 -->
                <div class="item">
                    <!-- 图片 -->
                    <img src="images/shuangta.jpg" alt="双塔">
                    <!-- 图片说明 -->
                    <div class="carousel-caption">
                        <h4>金银双塔</h4>
                        <div>金银双塔白天和夜晚晚会呈现出截然不同的美景，白天让人觉得庄严、肃穆，而当夜幕降临，在灯光的映照下，则给人以亲切温馨的感觉。</div>
                    </div>
                </div>
                <!-- 轮播项 -->
                <div class="item">
                    <img src="images/qiao.jpg" alt="桥">
                </div>
                <div class="item">
                    <img src="images/xiangbi.jpg" alt="象鼻山">
                </div>
            </div>
            <!-- 轮播图的前、后控制按钮 -->
            <a class="left carousel-control" role="button">
                <!-- 图标 -->
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" role="button">
                <!-- 图标 -->
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
</body>

</html>

1号代码定义了一个class="carousel"的<div>容器,该容器将作为轮播图容器。
2号代码定义了一个class="carousel-indicators"的无序列表,该无序列表将作为轮播图底部的显示器。
3号代码定义了一个class="carousel-inner"的<div>元素,该元素将作为轮播图主体的容器,该容器内的每个<div>元素都表示一个轮播项,为每个轮播项指定class="item"。
在轮播图容器的最后定义了两个被指定了role="button"的链接,这两个链接就是轮播图的控制按钮。

提示:该页面中还用到了.active样式,该样式用于表示某个轮播图、轮播指示器当前处于激活状态。

发表于 更新于 分类于 ， ， Waline： 本文字数： 204 阅读时长 ≈ 1 分钟

8.10.4 折叠插件的相关事件

Bootstrap为折叠插件提供了如下4个事件。

方法 描述
show.bs.collapse 当折叠元素开始显示时触发该事件。
shown.bs.collapse 当折叠元素显示完成(所有CSS过渡动画执行完成)时触发该事件。
hide.bs.collapse 当折叠元素开始隐藏时触发该事件。
hidden.bs.collapse 当折叠元素隐藏完成(所有CSS过渡动画执行完成)时触发该事件。

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.1k 阅读时长 ≈ 2 分钟

8.10.3 使用JS触发折叠元素

Bootstrap为触发折叠元素提供了一个collapse()方法,该方法有如下三种用法。

  1. 不传参数:直接使用collapse()方法相当于初始化data-*属性,因此通常无须调用不带参数的collapse方法。
  2. 传字符串参数:调用collapse()方法时可传入'toggle'、'show'、'hide'等字符串参数,其中:
    • 'toggle'字符串用于切换折叠元素的显示和隐藏;
    • 'show'字符串用于显示折叠元素;
    • 'hide'字符串用于隐藏折叠元素。
  3. 传入JS对象作为参数:JS对象可支持parent和toggle两个属性,其中parent属性可以是false或CSS选择器,
    • 如果parent被指定为false(默认值),则表示该方法仅对当前折叠元素起作用;
    • 如果parent被指定为CSS选择器,则表示该方法会影响该选择器对应容器所包含的全部子元素:当一个面板显示时,其他面板都隐藏(手风琴效果)。

程序示例

下面代码示范了使用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
<!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 class="btn btn-primary" type="button" onclick="$('#myDiv').collapse('toggle');">
            切换</button>
        <button class="btn btn-primary" type="button" onclick="$('#myDiv').collapse('show');">
            展开</button>
        <button class="btn btn-primary" type="button" onclick="$('#myDiv').collapse('hide');">
            隐藏</button>
        <!-- 可折叠元素 -->
        <div class="collapse" id="myDiv">
            <div class="well">
                疯狂Java讲义是一本必读的Java学习经典。
            </div>
        </div>
    </div>
</body>

</html>

在这段代码中定义了3个按钮,这3个按钮都没有通过data-*属性来触发折叠效果,而是通过JS代码调用折叠元素的collapse()方法来实现折叠效果。调用该方法时:

  • 传入'toggle'表示切换隐藏和显示效果;
  • 传入'show'表示显示折叠元素;
  • 传入'hide'表示隐藏折叠元素。

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.5k 阅读时长 ≈ 3 分钟

8.10.2 手风琴效果

什么是手风琴效果

手风琴效果:有多个可折叠的元素这些元素在同一时刻只能展开其中一个元素,其他元素折叠.

如何实现手风琴效果

把多个折叠元素组合在同一个.panel-group元素内即可实现手风琴效果。

实现手风琴效果的步骤

实现手风琴效果的步骤如下:

  1. 定义一个被指定了class="panel-group"样式的<div>元素,该元素将可以作为手风琴效果的容器。
  2. 手风琴内每个标签页面都是一个”面板”,因此需要为该面板指定.panel、.panel-default等样式。具体可参考前面有关面板的介绍。
  3. 在”面板”内添加”面板头”和”面板体”等部分。通常来说,我们应该
    • 将触发折叠的链接放在面板头部分;
    • 将折叠元素放在面板体内。
  4. 为了让面板头中的链接能触发折叠操作,同样需要:
    • 为连接指定data-toggle属性值总是"collapse",这样才有可以展开或折叠其他元素的功能。
    • 为链接指定href和data-toggle属性,其中href属性指定该链接要触发哪个折叠元素,
    • 为连接指定一个data-parent属性,该属性指定手风琴效果的容器元素。

小结

归纳起来,需要为手风琴效果的链接或按钮指定如下属性:

1
2
3
data-toggle="collapse"
data-parent="手风琴容器"
data-target="要触发的目标折叠元素"

程序示例

如下代码示范了手风琴效果的实现。

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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">
        <!-- panel-group手风琴效果顶层容器 -->
        <div class="panel-group" id="accordion">
            <!-- 第一个面板 -->
            <div class="panel panel-info">
                <!-- 面板头 -->
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <!-- data-toggle="collapse"表示该元素可以展开或者折叠元素 -->
                        <!-- href="#java"元素用于指定要折叠的元素 -->
                        <!-- data-parent="#accordion"指定所在的顶级容器 -->
                        <a data-toggle="collapse" href="#java" data-parent="#accordion">
                            疯狂Java讲义</a>
                    </h4>
                </div>
                <!-- panel-collapse:面板内容 -->
                <!-- .collapse .in样式表示该元素可折叠,并且处于展开状态 -->
                <div id="java" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <p>必读的Java学习经典，你懂的，不多说。</p>
                    </div>
                </div>
            </div>
            <!-- 第二个面板 -->
            <div class="panel panel-info">
                <!-- 面板头 -->
                <div class="panel-heading">
                    <!-- 面板标题 -->
                    <h4 class="panel-title">
                        <!-- 该链接可以展开或者折叠id为javaee的元素 -->
                        <a data-toggle="collapse" href="#javaee" data-parent="#accordion">
                            轻量级Java EE企业应用实战</a>
                    </h4>
                </div>
                <!-- 面板内容,可折叠,并处理折叠状态 -->
                <div id="javaee" class="panel-collapse collapse">
                    <div class="panel-body">
                        <p>企业级应用开发的经典图书，畅销经典</p>
                    </div>
                </div>
            </div>
            <!-- 第三个面板 -->
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#swift" data-parent="#accordion">
                            疯狂Swift讲义</a>
                    </h4>
                </div>
                <div id="swift" class="panel-collapse collapse">
                    <div class="panel-body">
                        <p>Apple公司Swift语言的学习图书</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

手风琴效果其实是多个简单折叠效果的组合,只要为折叠效果的触发链接额外指定data-parent属性即可。

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.4k 阅读时长 ≈ 2 分钟

8.10 折叠插件

折叠插件可用于控制某个HTML元素的折叠与展开,当该元素被折叠时,该元素就会隐藏起来,该元素所占据的空间也被释放出来;当该元素被展开时,该元素会显示出来。
折叠插件可以非常方便地实现Web页面上流行的手风琴效果。
Bootstrap的折叠插件依赖collapse.js和transition.js库。这两个JS库包含在bootstrap.js或bootstrap.min.js中。

8.10.1 简单折叠效果

被折叠的元素要指定的样式

简单折叠效果可以通过在目标元素上设置如下三个CSS样式来实现。

样式 描述
.collapse 隐藏折叠元素。
.collapsing 折叠元素在折叠过程中应用该CSS样式。
.collapse .in 折叠元素被显示出来。

控制折叠的元素需要设置的属性

既可通过按钮控制元素的折叠和展开,也可通过链接控制元素的折叠和展开。为了控制元素的折叠和展开,可为按钮或链接指定如下两个属性。

属性 描述
data-toggle 将该属性指定为"collapse",表示该按钮或链接可以展开或折叠其他元素,这个属性值是固定的。
href或data-target 通常链接使用href属性,而按钮则使用data-target属性,这两个属性都用于指定要对哪个元素进行折叠和展开。该属性的值可以是任意CSS选择器。

程序示例

下面的代码示范了简单的折叠效果。

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
<!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">
        <!-- data-toggle="collapse"属性表示该链接可以展开或折叠其他元素 -->
        <!-- href="#myDiv"用于指明要展开或折叠的是id为myDiv的元素 -->
        <a class="btn btn-primary" role="button" data-toggle="collapse" href="#myDiv" aria-expanded="true"
            aria-controls="myDiv">
            使用链接控制折叠</a>
        <!-- data-toggle="collapse"属性表示该链接可以展开或折叠其他元素 -->
        <!-- data-target="#myDiv"用于指明要展开或折叠的是ID为myDiv的元素 -->
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#myDiv" aria-expanded="true"
            aria-controls="myDiv">
            使用按钮控制折叠</button>
        <!-- 应用collapse样式表示该元素是可折叠的 -->
        <div class="collapse" id="myDiv">
            <div class="well">
                疯狂Java讲义是一本必读的Java学习经典。
            </div>
        </div>
    </div>
</body>

</html>

在这段代码中定义了一个链接和一个按钮,两个元素都被指定了data-toggle="collapse",这意味着该链接和按钮都可用于触发折叠元素。其中链接使用href 属性指定要触发的目标元素,按钮则使用data-target指定要触发的目标元素。

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.2k 阅读时长 ≈ 2 分钟

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')方法会把按钮的文本切换为最初的文本内容。

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.3k 阅读时长 ≈ 3 分钟

8.9.2 单选按钮或多选按钮

Bootstrap通过.btn-group样式可实现按钮组,如果在按钮组上再添加data-toggle="buttons"属性即可实现单选按钮或多选按钮。

实现单选按钮

例如如下代码实现了单选按钮。

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
<!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">
        <!-- 按钮组 -->
        <!-- 在按钮组上加上data-toggle="buttons"属性即可实现单选按钮 -->
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary active">
                <!-- 单选框 -->
                <input type="radio" autocomplete="off" checked> HTML 5（默认选中）
            </label>
            <label class="btn btn-primary">
                <input type="radio" autocomplete="off"> Bootstrap
            </label>
            <label class="btn btn-primary">
                <input type="radio" autocomplete="off"> AngularJS
            </label>
        </div>
    </div>
</body>

</html>

在这段代码中定义了一个<div>元素,并为该元素指定了class="btn-group",这表明该元素用于包含一组按钮。此外还为该元素指定了data-toggle="buttons",这意味着该<div>元素用于包含一组单选按钮或多选按钮。
在<div>元素中定义了3 个单选框,如此便形成了单选按钮组。

实现多选按钮

下面的代码实现了多选按钮。

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">
        <!-- data-toggle="buttons"属性可以保护单选或者多选按钮 -->
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary active">
                <!-- 多选按钮 -->
                <input type="checkbox" autocomplete="off" checked> HTML 5（默认选中）
            </label>
            <label class="btn btn-primary">
                <input type="checkbox" autocomplete="off"> Bootstrap
            </label>
            <label class="btn btn-primary">
                <input type="checkbox" autocomplete="off"> AngularJS
            </label>
        </div>
    </div>
</body>

</html>

在这段代码中定义了一个<div>元素,并为该元素指定了class="btn-group",这表明该元素用于包含一个按钮组。此外还为该元素指定了data-toggle="buttons",这意味着该元素包含一组单选按钮或多选按钮。
在<div>元素中定义了3个多选框,如此便形成多选按钮组。

发表于 更新于 分类于 ， ， Waline： 本文字数： 3k 阅读时长 ≈ 3 分钟

8.9 按钮

前一章已经介绍过按钮的功能和用法,本章将会结合JS插件来介绍Bootstrap的按钮功能。

8.9.1 切换按钮状态

Bootstrap 的按钮插件依赖button.js 库。这个JS 库包含在bootstrap.js 或bootstrap.min.js中。
Bootstrap的按钮具有激活和不激活两种状态,激活状态的按钮以高亮的背景色进行区分。
切换按钮状态有两种方式:

  1. 为按钮指定data-toggle="button"属性。
  2. 调用按钮的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">
        <!-- data-toggle="button"该属性可切换按钮状态 -->
        <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>
    <!-- <script>
        $(document).ready(function () {
            $(".btn").click(function (e) {
                //切换触发事件的按钮的状态
                $(e.target).button('toggle');
            })
        });
    </script> -->
</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');
    })
});

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.7k 阅读时长 ≈ 2 分钟

8.8.3 警告框事件

Bootstrap为警告框提供了如下事件。

方法 描述
close.bs.alert 当警告框开始关闭时立即触发此事件。
closed.bs.alert 当警告框关闭完成(所有CSS过渡动画执行完成)时触发此事件。

程序示例

下面代码示范了警告框相关事件的触发时机。

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
<!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">
        <!-- 警告框 -->
        <div class="alert alert-danger" role="alert" id="myAlert">
            危险！请注意
            <!-- 关闭按钮放在警告框容器内,只需要指定data-dismiss="alert"属性即可 -->
            <button type="button" class="close" data-dismiss="alert" aria-label="关闭">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
    <script type="text/javascript">
        // 监听警告框的事件
        $('#myAlert').on("close.bs.alert", function () {
            console.log("警告框的close.bs.alert");
        }).on("closed.bs.alert", function () {
            console.log("警告框的closed.bs.alert");
        });
    </script>
</body>

</html>

点击关闭按钮,控制台输出如下:

1
2
警告框的close.bs.alert     alert-event.html:28:12
警告框的closed.bs.alert   alert-event.html:30:12