JavaScript 插件简介

插件引入

在项目中如果遇到复杂的交互效果，如轮播图、模态框等可以使用 JavaScript 插件轻松完成。

Bootstrap 框架所有的 JavaScript 插件都依赖于 jQuery，所以必须在引入 bootstrap.min.js 之前引入 jQuery 库。

JavaScript 插件的引入方式：

• 全部引入：在项目中引入 bootstrap.min.js，即可引入所有插件。
• 按需引入：下载 Bootstrap 源码，单独引入对应插件的 js 文件以及插件依赖的文件。

data 属性

JavaScript 插件的使用方式：

• 使用原生代码来调用 JavaScript 插件。
• 使用 data 属性来调用 JavaScript 插件。

Bootstrap 提供的一系列 data 属性可以让我们不写任何的 JavaScript 代码就能实现动态效果。

Bootstrap 框架已经通过原生 JavaScript 和 jQuery 对效果的实现进行封装，只需要按照 data 属性 API 的规范就能使用所有的 Bootstrap 插件。

当我们自己封装了 data API，可以将 Bootstrap 框架的 data 属性关闭，避免影响到我们自己封装的 data API。

关闭 data API 的基本用法：

// 关闭Bootstrap所有的data属性
$(document).off('.data-api');

// 关闭旋转轮播插件的data属性
$(document).off('.carousel.data-api');

过渡插件

过渡插件效果

Bootstrap 使用的动画过渡效果都是基于 CSS3 动画来制作的。

过渡插件严格意义上不是一个标准的插件，是针对 transitionEnd（在 CSS 转换完成时发生） 事件的一个基本辅助工具。

过渡效果可以在全局范围禁用，正常开发过程中，不会禁用过渡效果。

禁用过渡插件效果的基本用法：

$.support.transition = false;

模态框

模态框结构

模态框（Model）是覆盖在父窗体上的子窗体，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动效果。

模态框的基本用法：

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">标题</h4>
            </div>
            <div class="modal-body">
                <p>内容</p>
            </div>
            <div class="modal-footer">底部</div>
        </div>
    </div>
</div>

预定义样式说明：

• .modal 预定义类用于定义模态框。
• .fade 预定义类用于给模态框添加动画效果。
• .modal-dialog 预定义类用于定义模态框的主体。
• .modal-header 预定义类用于定义模态框的头部。
• .modal-title 预定义类用于定义模态框的标题。
• .modal-body 预定义类用于定义模态框的内容区域。
• .modal-footer 预定义类用于定义模态框的底部区域。

使用模态框插件时，需要注意：

• 不要在一个模态框上重叠另一个模态框。
• 模态框的 HTML 代码必须放在 HTML 文档的最高层级（body）内，以避免其他组件的影响。

点击按钮触发模态框

点击按钮触发模态框，可以提供一个 button 按钮，点击按钮触发按钮点击事件。

示例：点击按钮触发模态框

入口页面（index.html）：

<button id="btn" class="btn btn-primary">打开模态框</button>
<script>
    $("#btn").click(function () {
        // $(模态框id).modal()
        $("#myModal").modal();
    })
</script>

示例效果：

点击按钮触发模态框，可以提供一个 button 按钮，为 button 按钮绑定 data-toggle 属性和 data-target 属性。

示例：点击按钮触发模态框

入口页面（index.html）：

<!--
    data-toggle指定模态框特效
    data-target指定要打开的模态框的id
-->
<button id="btn" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>

示例效果：

点击按钮触发模态框，可以提供一个 a 锚链接，为 a 锚链接绑定 data-toggle 属性。

示例：点击按钮触发模态框

入口页面（index.html）：

<!--
    data-toggle指定模态框特效
    href指定要打开的模态框的id（锚链接）
-->
<a href="#myModal" data-toggle="modal">打开模态框</a>

示例效果：

模态框尺寸

模态框提供两种可选尺寸：

• 大尺寸：在 .modal-dialog 盒子上添加 .modal-lg 预定义类。
• 小尺寸：在 .modal-dialog 盒子上添加 .modal-sm 预定义类。

示例：模态框尺寸

入口页面（index.html）：

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog modal-sm" role="document">
        <!-- ... -->
    </div>
</div>

示例效果：

data 属性操作模态框

模态框可以通过 data 属性来实现相应的功能。

模态框的基本 data 属性：

示例：data 属性操作模态框

入口页面（index.html）：

<div class="modal fade" tabindex="-1" role="dialog" id="myModal" data-backdrop="static">
    <!-- ... -->
</div>

示例效果：

JavaScript 操作模态框

除 data 属性之外，也可以使用 JavaScript 操作模态框。

JavaScript 操作模态框的基本用法：

$("模态框选择器").modal(options);

模态框的基本 JavaScript 属性：

示例：JavaScript 操作模态框

入口页面（index.html）：

<button id="btn" class="btn btn-primary">打开模态框</button>
<script>
    $("#btn").click(function () {
        $("#myModal").modal({
            backdrop: 'static'
        });
    })
</script>

示例效果：

模态框的基本 JavaScript 方法：

示例：JavaScript 操作模态框

入口页面（index.html）：

<div class="modal fade" tabindex="-1" role="dialog" id="myModal" data-backdrop="static">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <!-- ... -->
            <div class="modal-footer">
                <button class="btn btn-default" id="close">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- ... -->
<button id="btn" class="btn btn-primary">打开模态框</button>
<script>
    $("#btn").click(function () {
        $("#myModal").modal('show');
    })

    $("#close").click(function () {
        $("#myModal").modal('hide');
    })
</script>

示例效果：

模态框的基本 JavaScript 事件：

示例：JavaScript 操作模态框

入口页面（index.html）：

$("#myModal").on('show.bs.modal', function () {
    console.log('模态框展示');
})
$("#myModal").on('hide.bs.modal', function () {
    console.log('模态框隐藏');
})

示例效果：

选项卡

选项卡结构

选项卡（Tab）也被称为标签页，通过结合一些 data 属性，可以轻松地创建一个选项卡界面。

通过此插件可以把内容放置在选项卡甚至是下拉菜单标签页中。

选项卡的基本用法：

<ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">选项卡菜单1</a></li>
    <li><a href="#profile" data-toggle="tab">选项卡菜单2</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">选项卡面板1</div>
    <div class="tab-pane" id="profile">选项卡面板2</div>
</div>

预定义样式说明：

• .nav 预定义类用于定义选项卡菜单。
• .nav-tabs 预定义类用于定义选项卡导航，.nav-pills 预定义类用于定义胶囊式导航。
• .active 预定义类用于默认选中选项卡。
• data-toggle 属性用于定义选项卡特效，tab 为选项卡导航，pill 为胶囊式导航。
• .tab-content 预定义类用于定义选项卡面板组。
• .tab-pane 预定义类用于定义一个选项卡面板。

使用选项卡插件时，需要注意：

• 实现选项卡面板时，选项卡菜单和选项卡面板需要同时存在。
• 每个选项卡菜单和选项卡面板通过 id 属性进行一一对应。

示例：选项卡结构

入口页面（index.html）：

<ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">首页</a></li>
    <li><a href="#profile" data-toggle="tab">个人中心</a></li>
    <li><a href="#datalist" data-toggle="tab">数据列表</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">首页内容</div>
    <div class="tab-pane" id="profile">个人中心内容</div>
    <div class="tab-pane" id="datalist">数据列表内容</div>
</div>

示例效果：

JavaScript 操作选项卡

除 data 属性之外，也可以使用 JavaScript 操作选项卡。

JavaScript 操作选项卡的基本用法：

$("选项卡菜单选择器").tab(options);

选项卡的基本 JavaScript 方法：

示例：JavaScript 操作选项卡

入口页面（index.html）：

<ul class="nav nav-tabs">
    <li class="active"><a href="#home">首页</a></li>
    <li><a href="#profile">个人中心</a></li>
    <li><a href="#datalist">数据列表</a></li>
</ul>
<!-- ... -->
<script>
    $(".nav a").click(function () {
        $(this).tab('show');
    })
</script>

示例效果：

选项卡的基本 JavaScript 事件：

示例：JavaScript 操作选项卡

入口页面（index.html）：

$(".nav a").on('show.bs.tab', function () {
    console.log("选项卡切换")
})

示例效果：

旋转轮播

旋转轮播结构

旋转轮播（Carousel）又称轮播图，是一种灵活的并且响应式的向站点添加滑块的方式。轮播图的内容可以是图像、内嵌框架、视频或者其想要放置的任何类型。

旋转轮播的基本用法：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 旋转轮播圆点 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol>
    <!-- 旋转轮播主体 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="png">
            <div class="carousel-caption">
                ...
            </div>
        </div>
        ...
    </div>
    <!-- 旋转轮播左右按钮 -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

预定义样式说明：

• .carousel 预定义类用于定义旋转轮播。
• .slide 预定义类用于添加旋转轮播滑动特效。
• data-ride 属性用于定义旋转轮播特效。
• .carousel-indicators 预定义类用于定义圆圈指示符。
• data-target 属性用于定义按钮操控的旋转轮播。
• data-slide-to、data-slide 属性用于滚动到指定的旋转轮播内容。
• .carousel-inner 预定义类用于定义旋转轮播的内容区域。
• .item 预定义类用于定义一个旋转轮播的内容。
• .active 预定义类用于定义选中的旋转轮播内容。
• .carousel-caption 预定义类用于定义悬浮在旋转轮播内容上的内容。
• .carousel-control 预定义类用于定义左右控制按钮。

示例：旋转轮播结构

入口页面（index.html）：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="01.png" style="width: 100%">
        </div>
        <div class="item">
            <img src="02.png" style="width: 100%">
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

示例效果：

data 属性操作旋转轮播

旋转轮播可以通过 data 属性来实现相应的功能。

旋转轮播的基本 data 属性：

示例：data 属性操作旋转轮播

入口页面（index.html）：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000" style="width: 600px;">
    <!-- ... -->
</div>

示例效果：

JavaScript 操作旋转轮播

除 data 属性之外，也可以使用 JavaScript 操作旋转轮播。

JavaScript 操作旋转轮播的基本用法：

$("旋转轮播选择器").carousel(options);

旋转轮播的基本 JavaScript 属性：

旋转轮播的基本 JavaScript 方法：

示例：JavaScript 操作旋转轮播

入口页面（index.html）：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000" style="width: 600px;">
    <!-- ... -->
</div>

<script>
    $("#carousel-example-generic").carousel({
        interval: 2000
    });
</script>

示例效果：

旋转轮播的基本 JavaScript 事件：

示例：JavaScript 操作旋转轮播

入口页面（index.html）：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000" style="width: 600px;">
    <!-- ... -->
</div>

<script>
    $("#carousel-example-generic").on("slid.bs.carousel", function () {
        console.log("幻灯片过渡效果完成")
    })
</script>

示例效果：

滚动监听

滚动监听结构

滚动监听（Scrollspy）即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。

滚动监听固定高度元素的基本用法：

<nav id="navbar-example" class="navbar navbar-default navbar-fixed-top">
    <ul class="nav navbar-nav">
        <li class="active"><a href="锚链接">导航菜单1</a></li>
        <li><a href="锚链接">导航菜单2</a></li>
        ...
    </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 200px; position: relative; overflow-y: scroll;">
    <div id="锚链接"></div>
    ...
    <div id="锚链接"></div>
    ...
</div>

滚动监听整个页面的基本用法：

<body data-spy="scroll" data-target="#navbar-example" data-offset="0">
    <nav id="navbar-example" class="navbar navbar-default navbar-fixed-top">
        <ul class="nav navbar-nav">
            <li class="active"><a href="锚链接">导航菜单1</a></li>
            <li><a href="锚链接">导航菜单2</a></li>
            ...
        </ul>
    </nav>

    <div id="锚链接"></div>
    ...
    <div id="锚链接"></div>
    ...
</body>

预定义样式说明：

• data-spy 属性用于为该区域启用滚动监听功能。
• data-target 属性用于指定该区域关联的导航条组件。
• data-offset 属性用于指定当元素滚动到指定的偏移量时，相关的元素或功能将被触发。

示例：滚动监听结构

入口页面（index.html）：

<body data-spy="scroll" data-target="#navbar-example" data-offset="0">
    <nav id="navbar-example" class="navbar navbar-default navbar-fixed-top">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#about">关于我们</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>

    <h4 id="about">关于我们</h4>
    <!-- ... -->
    <h4 id="contact">联系我们</h4>
    <!-- ... -->
</body>

示例效果：