蓝蓝站点

Java读书笔记

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

8.2.5 基于事件源改变对话框内容

由于Bootstrap支持为对话框事件绑定事件监听函数,而且可通过事件对象来获取触发对话框的事件源,因此我们就可以根据触发对话框的事件源来改变对话框内容。

程序示例

例如如下代码。

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
<!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">
</head>

<body>
    <!-- 该按钮会触发对话框 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-who="crazyit">
        发送信息给crazyit
    </button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-who="fkjava">
        发送信息给fkjava
    </button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-who="fkit">
        发送信息给fkit
    </button>
    <!-- 对话框 -->
    <div class="modal" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal">
                        <span aria-hiden="true">&times;</span>
                    </button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">收信人</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">消息内容</label>
                            <textarea class="form-control" id="message-text"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">
                        关闭</button>
                    <button class="btn btn-primary" type="button">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        // 当对话框完全显示出来的时候
        $('#myModal').on('show.bs.modal', function (event) {
            // 获取触发对话框的按钮
            var button = $(event.relatedTarget);
            // 获取按钮上的who属性值
            var recipient = button.data('who');
            // 包装对话框为jQuery对象
            var modal = $(this)
            // 更新对话框的内容
            modal.find('.modal-title').text('向' + recipient + "发送新信息")
            modal.find('.modal-body input').val(recipient)
        });
    </script>
</body>

</html>

上面代码定义了3个按钮用于触发对话框,不管用户单击哪个按钮都会打开对话框。
当用户打开对话框时,代码将会获取按钮上设置的data-who 属性值,然后在事件监听器中通过data-who属性值修改对话框的内容。

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

8.2.4 对话框事件

Bootstrap的对话框支持如下事件。

事件 描述
show.bs.modal 当对话框的show方法被调用时立即触发该事件。如果是通过单击某个元素来触发对话框的显示,则可通过事件的relatedTarget属性来访问该元素。
shown.bs.modal 当对话框完全显示出来(且CSS过渡效果执行完成)后触发该事件。如果是通过单击某个元素来触发对话框的显示,则可通过事件的relatedTarget 属性来访问该元素。
hide.bs.modal 当对话框的hide方法被调用时立即触发该事件。
hidden.bs.modal 当对话框被完全隐藏(且CSS过渡效果执行完成)时触发该事件。
loaded.bs.modal 从远端的数据源加载数据之后触发该事件。

程序示例

通过上面这些事件,程序可在对话框的弹出过程中执行自己的代码。例如如下代码。

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
<!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">
</head>

<body>
    <!-- 通过data-*方式控制对话框 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        单击我
    </button>
    <!-- 对话框整体容器 -->
    <div class="modal" tabindex="-1" role="dialog" id="myModal">
        <!-- 对话框 -->
        <div class="modal-dialog" role="document">
            <!-- 对话框内容 -->
            <div class="modal-content">
                <!-- 对话框标题 -->
                <div class="modal-header">
                    <!-- 该按钮可以关闭对话框 -->
                    <button class="close" type="button" data-dismiss="modal">
                        <span aria-hiden="true">&times;</span>
                    </button>
                    <h4 class="modal-title"></h4>
                </div>
                <!-- 对话框主体 -->
                <div class="modal-body">
                    <p></p>
                </div>
                <!-- 对话框脚注 -->
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">
                        关闭</button>
                    <button class="btn btn-primary" type="button">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        // 监听对话框完全显示事件
        $('#myModal').on('show.bs.modal', function (event) {
            // 获取激发的按钮中的html内容
            var src = event.relatedTarget.innerHTML;
            // 封装对话框为jQuery对象
            let modal = $(this);
            // 设置对话框标题
            modal.find('.modal-title').html("【" + src + "】激发的对话框")
            // 设置对话框主体中的段落
            modal.find('.modal-body p').html("<h4>对话框被显示出来了！</h4>");
        });
    </script>
</body>

</html>

上述代码为对话框的show.bs.modal事件绑定了事件监听器,这意味着当对话框显示时该事件监听函数将会被激发,该事件监听函数会修改对话框的内容。

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

8.2.3 使用JS弹出对话框

Bootstrap允许调用对话框的modal()方法来弹出对话框,该方法支持如下3种参数。

  1. 不传入参数:以默认方式打开对话框,这是最简单的方式。
  2. 传入字符串参数:Bootstrap支持传入'show'、'hide'、'toggle'或'handleUpdate'这几个字符串,分别表示显示对话框、隐藏对话框、切换对话框的隐藏显示状态、更新对话框位置。
  3. 传入JS对象。

modal的JS对象参数的属性

从以上介绍可以看出,第一种方式最为简单,第三种方式最为复杂,但功能最强大。当传入JS对象作为参数时,该JS对象可支持如下属性。

属性 描述
backdrop 相当于前面介绍的data-backdrop 属性,用于指定是否可通过单击背景来关闭对话框。
keyboard 相当于前面介绍的data-keyboard属性,用于指定是否可通过键盘的Esc键来关闭对话框。
show 相当于前面介绍的data-show属性,用于指定是否在页面加载时自动显示对话框。
remote 该属性指定一个URL,该URL加载的内容将会显示在对话框的主体(被指定class="modal-body"的元素)内,但该属性从Bootstrap 3.3时已过时了,因此尽量避免使用该属性。

程序示例

如下代码示范了如何使用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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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">
</head>

<body>
    <!-- 通过调用modal()方法打开对话框 -->
    <button type="button" class="btn btn-primary" onclick="$('#myModal').modal();">打开对话框
    </button>
    <button type="button" class="btn btn-primary" onclick="$('#myModal').modal({backdrop:false});">打开无背景对话框
    </button>
    <button type="button" class="btn btn-primary" onclick="$('#myModal').modal({keyboard:true});">可通过Esc关闭的对话框
    </button>
    <!-- 对话框整体容器 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <!-- 对话框 -->
        <div class="modal-dialog" role="document">
            <!-- 对话框内容 -->
            <div class="modal-content">
                <!-- 对话框头 -->
                <div class="modal-header">
                    <!-- data-dismiss="modal"表示该按钮可关闭对话框 -->
                    <button class="close" type="button" data-dismiss="modal">
                        <span aria-hiden="true">&times;</span>
                    </button>
                    <h4>对话框</h4>
                </div>
                <!-- 对话框主体 -->
                <div class="modal-body">
                    <p>对话框内容</p>
                </div>
                <!-- 对话框脚注 -->
                <div class="modal-footer">
                    <!-- data-dismiss="modal"表示该按钮可关闭对话框 -->
                    <button class="btn btn-default" type="button" data-dismiss="modal">
                        关闭</button>
                    <button class="btn btn-primary" type="button">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

在代码中定义了3个按钮来打开对话框,

  • 点击第一个按钮时调用了无参数的modal()方法,该方法打开的对话框具有默认行为。
  • 点击第一个按钮时传入了{backdrop:false}对象,这意味着该对话框将不包括背景,且不可通过单击背景关闭对话框;
  • 点击第一个按钮时传入了{keyboard:true}对象,这意味着该对话框可通过键盘的Esc键来关闭。

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

8.2.2 使用data-*属性弹出对话框

正如前面介绍的,Bootstrap也支持两种方式弹出对话框。

  1. 通过data-*属性。
  2. 通过JS脚本调用方法来弹出对话框。

先看Bootstrap推荐的方式。使用data-*属性弹出对话框,这种方式无须使用JS脚本,因此使用起来简单、方便。使用这种方式需要为弹出对话框的按钮或链接指定如下两个属性。

  1. data-toggle:将该属性的属性值指定为modal。
  2. data-target:该属性用于指定对话框容器(被指定了class="modal"属性的元素),该属性的属性值可以是各种CSS选择器,通常会使用ID选择器。

使用data-*属性来弹出对话框

如果要在对话框内定义关闭按钮或链接,只要为关闭按钮或链接指定data-dismiss="modal"样式即可。下面代码示范了如何使用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
<!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">
</head>

<body>
    <!-- 打开对话框的按钮 -->
    <!-- 1号代码 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        打开对话框
    </button>
    <!-- 对话框容器 -->
    <div class="modal" tabindex="-1" role="dialog" id="myModal">
        <!-- 对话框 -->
        <div class="modal-dialog" role="document">
            <!-- 对话框内容 -->
            <div class="modal-content">
                <!-- 对话框头 -->
                <div class="modal-header">
                    <!-- 对话框关闭按钮,data-dismiss="modal"表示该按钮可以关闭对话框-->
                    <button class="close" type="button" data-dismiss="modal">
                        <!-- 关闭图标 -->
                        <span aria-hiden="true">&times;</span>
                    </button>
                    <h4>对话框</h4>
                </div>
                <!-- 对话框主体 -->
                <div class="modal-body">
                    <p>对话框内容</p>
                </div>
                <!-- 对话框脚注 -->
                <div class="modal-footer">
                    <!-- 关闭按钮 data-dismiss="modal"表示该按钮可以关闭对话框 -->
                    <button class="btn btn-default" type="button" data-dismiss="modal">
                        关闭</button>
                    <!-- 其他按钮 -->
                    <button class="btn btn-primary" type="button">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

1号代码定义了一个按钮,且该按钮还被指定了data-toggle="modal" 和data-target="#myModal"样式,其中#myModal是一个ID选择器,用于表示界面上的对话框,因此用户单击该按钮即可弹出对应对话框。
此外,还为对话框中内两个关闭按钮指定了data-dismiss="modal“属性,因此用户可通过这两个按钮来关闭对话框。

对话框其他属性

除了前面介绍的data-toggle、data-target两个属性之外,Bootstrap对于弹出对话框的按钮还提供了如下属性支持:

  • data-backdrop:属性值为boolean值或'static'字符串,用于指定是否包含一个背景<div>元素,如果该属性值被设为true,则用户单击背景时对话框消失;如果该属性值被设为false或'static',则用户单击背景时对话框不会消失。
  • data-keyboard:属性值为boolean值。指定是否可通过键盘上的Esc键来关闭对话框。
  • data-show:属性值为boolean值。指定是否在页面加载时自动显示对话框。

设置对话框时具有过渡的动画效果

如果希望弹出对话框时具有过渡的动画效果,则可为对话框的第一层容器指定.fade样式,也就是将对话框的第一层<div>元素改为如下形式:

1
2
3
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
...
</div>

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

8.2 对话框

在Web页面上经常以对话框的方式完成某种操作,比如用户注册、登录或阅读一段提示信息,Bootstrap的JS插件则为对话框提供了支持。
Bootstrap的对话框插件依赖transition.js和modal.js库。这两个JS库都包含在bootstrap.js或bootstrap.min.js中。

8.2.1 静态对话框

从理论上来说,Bootstrap 可以将大部分HTML 元素(如<div>元素)当成对话框处理,Bootstrap可以在页面上弹出或隐藏这些元素。
但从实际界面效果来看,开发者当然希望给用户呈现一个优雅、美观的用户界面,因此Bootstrap也为对话框提供了如下支持。

对话框组成

Bootstrap的对话框分为如下几个部分。

  1. 第一层容器:这层容器需要被指定class="modal"样式,它是整个对话框的容器。
  2. 第二层容器:这层容器需要被指定class="modal-dialog"样式,该样式设置一个居中的对话框。
  3. 第三层容器:这层容器需要被指定class="modal-content"样式,该样式用于设置对话框的主体,这层容器的样式用于控制对话框的边框、背景、阴影等效果。

对话框主体构成

如果要为对话框添加内容,则需要在class="modal-content"容器内添加。该容器内可包含如下三个子部分。

  1. 对话框头:这部分需要被指定class="modal-header"样式,这部分包括对话框的标题、关闭按钮等。
  2. 对话框主体:这部分需要被指定class="modal-body"样式,这部分包括对话框的主要内容,可以任意设置这些内容,比如使用网格布局添加内容。
  3. 对话框尾注:这部分需要被指定class="modal-footer"样式,这部分包括对话框的各种操作按钮。

程序示例 创建静态对话框

下面代码示范了一个静态对话框的构建方法。

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
<!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">
</head>

<body>
    <!-- 第一层容器,对话框的整体容器 -->
    <div class="modal show" tabindex="-1" role="dialog">
        <!-- 第2层容器,对话框-->
        <div class="modal-dialog" role="document">
            <!-- 第3层容器,对话框主体 -->
            <div class="modal-content">
                <!-- 对话框头 -->
                <div class="modal-header">
                    <button class="close" type="button">
                        <span aria-hiden="true">&times;</span>
                    </button>
                    <h4>对话框</h4>
                </div>
                <!-- 对话框主体 -->
                <div class="modal-body">
                    <p>对话框内容</p>
                </div>
                <!-- 对话框尾注 -->
                <div class="modal-footer">
                    <button class="btn btn-default" type="button">关闭</button>
                    <button class="btn btn-primary" type="button">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

上面代码分别定义了3个<div>容器,这三个<div>容器就是构建Bootstrap对话框的三层容器。接下来代码在第三层容器中添加对话框头、对话框主体和对话框尾注三个部分。
在上面的对话框代码中,第一层容器除了被指定了.modal样式之外,还被指定了一个.show样式,该样式用于控制在加载页面时自动显示该对话框;与此对应的还有一个.fade 样式,该样式用于隐藏对话框。
提示:该对话框目前只是一个静态的对话框,用户无法通过底部的关闭按钮和右上角的关闭按钮来关闭对话框,本节后面会介绍如何关闭对话框。

Bootstrap对话框特征

Bootstrap的对话框优雅、美观。同时该对话框还具有如下特征:

  1. 对话框会自动浮动在浏览器中央,而且宽度会自适应浏览器的大小。
  2. 当浏览器viewport宽度小于768px时,对话框宽度为600px。
  3. 在对话框的底部会自动添加一个灰色的蒙层,用于防止用户单击对话框底部分的元素。
  4. 对话框的显示、隐藏过程具有过渡效果。

另外需要说明的是,Bootstrap不支持同时打开多个对话框,如果需要同时打开多个对话框,则需要自己修改代码。

控制对话框大小的样式

Bootstrap为控制对话框大小提供了如下两个样式。

样式 描述
.modal-sm 设置小的对话框。
.modal-lg 设置大的对话框。
对于大的对话框,则可以向对话框中添加更多的内容。在向对话框添加更多内容时,应该考虑将内容添加在对话框主体(也就是被指定了class="modal-body"属性的元素)内。

程序示例 在对话框主体内使用网格布局

例如如下代码示范了如何在对话框主体内使用网格布局。

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
<!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">
    <style type="text/css">
        .row {
            margin-bottom: 20px;
        }

        [class*="col-"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>

<body>
    <!-- 第1层容器,大的对话框,立即显示 -->
    <div class="modal modal-lg show" tabindex="-1" role="dialog">
        <!-- 第2层容器,对话框 -->
        <div class="modal-dialog" role="document">
            <!-- 第3层容器,对话框主体 -->
            <div class="modal-content">
                <!-- 对话框头 -->
                <div class="modal-header">
                    <button class="close" type="button">
                        <span aria-hiden="true">&times;</span>
                    </button>
                    <h4>对话框</h4>
                </div>
                <!-- 对话框主体 -->
                <div class="modal-body">
                    <!-- 网格布局 -->
                    <div class="row">
                        <div class="col-sm-6">
                            .col-sm-6
                        </div>
                        <div class="col-sm-6">
                            .col-sm-6
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            .col-sm-4
                        </div>
                        <div class="col-sm-8">
                            .col-sm-8
                        </div>
                    </div>
                </div>
                <!-- 对话框脚注 -->
                <div class="modal-footer">
                    <button class="btn btn-default" type="button">关闭</button>
                    <button class="btn btn-primary" type="button">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

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

8.1.1 使用插件的两种方式

Bootstrap提供了两种使用插件的方式。

  1. 使用data-*属性:data-*属性是HTML 5的一个新特性,data-*属性用于存储页面或应用程序的自定义数据,这些自定义数据可以被JS读取、利用,用于创建更好的用户体验。Bootstrap会负责读取这些data-*属性的值,并根据这些属性的值来启用JS插件的功能。
  2. 使用JS代码:使用类似前端框架的方式调用JS方法来使用JS插件。

两种方式的区别

事实上,使用data-*属性和JS代码两种方式的本质是一样的:当开发者在HTML标签上指定大量data-*属性之后,Bootstrap的JS插件会读取这些data-*属性,然后调用JS代码来启用JS插件的功能。由此可见,这两种方式的本质依然是通过JS脚本来提升用户体验。
区别之处在于

  • 使用data-*属性时由Bootstrap负责生成JS脚本来启用插件功能;
  • 使用JS脚本则可直接启用插件功能。

正因为使用data-*属性启用插件功能开发者无须书写任何JS代码,所以Bootstrap推荐通过这种方式来使用JS插件。

关闭插件的data属性

在某些特殊的时候,开发者可能需要通过JS方式来使用Bootstrap插件,此时就需要关闭插件的data-*属性。
如果需要关闭Bootstrap插件的data API功能,可调用如下代码:

1
$(document).off('.data-api')

上面代码关闭document及其所有子元素上绑定的data-*属性的功能。

另外,如果只是想关闭某个特定插件的功能,只需在data API前面添加那个插件的名称作为命名空间即可。例如如下代码关闭document 及其所有子元素上绑定的data-*属性和关于警告框的属性:

1
$(document).off('.alert.data-api')

当开发者打算使用JS代码来启用插件时,Bootstrap都提供了单独调用或链式调用的方式,方法返回所操作的元素集合(注:和jQuery的调用形式一致)。例如如下代码:

1
$('.btn.danger')button('toggle').addClass('fat')

Bootstap方法调用方式

Bootstrap提供的方法可支持3种调用方式。

  1. 无参数调用:例如$('#myModal').modal();,启用默认初始化
  2. 传入字符串参数:例如$('#myModal').modal('show');,初始化后立即调用show方法
  3. 传入JS对象指定选项:例如$('#myModal').modal({keyboard:false});

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

8.1 插件库概述

Bootstrap除了提供前面介绍的全局CSS样式和内置组件之外,还提供了一些JS插件。使用这些JS 插件很简单,既可单独引用所需要的JS 插件,也可直接引用bootstrap.js或bootstrap.min.js(压缩版),bootstrap.js或bootstrap.min.js都包含了Bootstrap的所有JS插件。

Bootstrap插件

Bootstrap提供了如下JS插件。

  • 过渡动画(Transition),对应transition.js插件文件。该插件主要用于为其他插件提供过渡动画支持。
  • 对话框(Model Dialog),对应modal.js插件文件。
  • 下拉菜单(Dropdown Menu),对应dropdown.js插件文件。
  • 滚动监听(Scrollspy),对应scrollspy.js插件文件。
  • 选项卡(Tab),对应tab.js插件文件。
  • 提示框(Tooltips),对应tooltips.js插件文件。
  • 弹出框(Popover),对应popover.js插件文件。
  • 警告框(Alert),对应alert.js插件文件。
  • 按钮(Button),对应button.js插件文件。
  • 折叠(Collapse),对应collapse.js插件文件。
  • 轮播图(Carousel),对应carousel.js插件文件。
  • 附件组件(Affix),对应affix.js插件文件。

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

第8章 Bootstrap的JS插件

本章要点

  • Bootstrap插件库概述与两种使用方式
  • 掌握对话框插件的用法
  • 掌握下拉菜单的用法
  • 掌握滚动监听插件的功能和用法
  • 掌握标签页插件的用法
  • 掌握胶囊式标签页的用法
  • 掌握工具提示插件的用法
  • 掌握弹出框插件的功能和用法
  • 掌握警告框插件的用法
  • 掌握按钮插件的用法
  • 掌握折叠插件的用法
  • 利用折叠插件实现手风琴效果
  • 掌握轮播图插件的功能和用法

虽然前面介绍Bootstrap主要是一个CSS框架,其提供了大量CSS样式供开发者使用,但它也提供了警告框等组件,这些组件也需要JS 脚本的支持。实际上,Bootstrap也提供了JS库,前面介绍Bootstrap安装时就介绍了必须在页面中添加bootstrap.min.js或bootstrap.js库,这两个库就是Bootstrap的JS库,这些JS库不仅负责为JS组件提供支持,也负责提供系列内置的JS插件。本章将会详细介绍Bootstrap内置的系列JS插件的功能和用法。

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

7.14 本章小结

本章主要介绍Bootstrap提供的大量内置组件,如按钮组件、下拉菜单组件、输入框组件、导航组件、导航条、面板、警告框、进度条、媒体对象及列表组等。Bootstrap的这些UI组件使用起来并不难,只要在传统HTML标签上添加合适的CSS样式即可。
对于开发者而言,掌握Bootstrap的UI组件只要记住两点:

  1. 各UI组件需要由HTML标签组合构成。
  2. 需要在各HTML标签上添加合适的CSS样式。

掌握这两点即可熟练地使用Bootstrap的内置组件。