8.7.2 焦点触发的弹出框

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

8.7.2 焦点触发的弹出框

默认情况下,Bootstrap的弹出框需要通过鼠标单击来触发显示、隐藏。与工具提示类似的是,Bootstrap也允许改变弹出框的触发方式:通过trigger选项改变弹出框的触发方式,添加trigger通过在HTML元素中需使用data-trigger属性。
为了有更好的跨浏览器和跨平台效果,建议使用<a>元素,而不能使用<button>元素,并且还需要指定role="button"属性和tabindex属性。

程序示例

如下代码示范了焦点触发的弹出框。

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="popover"属性表示该链接可以触发弹出框 -->
        <!-- title属性表示弹出框的内容 -->
        <!-- data-trigger设置在得到焦点时触发弹出框的 -->
        <!-- tabindex="0"表示当第一次按下tab键时该链接将获得焦点 -->
        <a class="btn btn-info" role="button" data-toggle="popover" title="焦点触发的弹出框" tabindex="0" data-trigger="focus"
            data-content="弹出框的内容<br>第二行内容">
            焦点触发的弹出框</a>
    </div>
    <script type="text/javascript">
        $(function () {

            $("[data-toggle='popover']").popover({
                // 运行弹出框内容中带有html代码
                html: true
            });
        });
    </script>
</body>

</html>

上面的代码使用<a>标签定义了一个按钮,由于该链接只是作为按钮使用,因此为该按钮指定了role="button"属性。<a>标签指定了data-trigger="focus",这意味着该弹出框将会通过焦点来触发:得到焦点时打开弹出框,失去焦点时关闭弹出框。
将tabindex设为0是为了保证该按钮最先得到焦点,可就是当用户第一次按下Tab键时,该按钮将会得到焦点。
浏览该页面,按下键盘上的Tab键,将会打开该按钮的弹出框;再次按下Tab键(或用鼠标单击页面上其他任意地方),该按钮失去焦点,弹出框将会被自动关闭。