JavaScript 插件

一、Bootstrap 的 JavaScript 插件

1.data属性

Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。例如：

$(".btn.danger").button("toggle").addClass("fat")

所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数（这种情况下，将会初始化插件为默认行为），如下所示：
// 初始化为默认行为

$("#myModal").modal()

// 初始化为不支持键盘

$("#myModal").modal({ keyboard: false })

// 初始化并立即调用 show

$("#myModal").modal('show')

每个插件在 Constructor 属性上也暴露了其原始的构造函数：

$.fn.popover.Constructor。如果您想获取某个特定插件的实例，可以直接通过页面元素获取：

$('[rel=popover]').data('popover').

二、动画过渡

Bootstrap使用的动画过渡效果全部使用的时CSS3语法，所以IE6~IE8不能使用的时候可以单独引入trasition.js。不过在Bootstrap中一般不会直接使用动画过渡插件，而是把它的功能融入到其他插件中使用，例如：
1.模态框(Modal)的滑动的渐变效果，
2.选项卡(Tab)的渐变效果，
3.旋转轮播(Carousel)的滑动效果等。

三、模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等(如果想要单独引用该插件的功能，那么需要引用 modal.js。或者可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
)。

image.png

三、选项卡

image.png

淡入淡出效果

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容，如下面实例所示：
<div class="tab-content">
<div class="tab-pane fade in active" id="home">...</div>
<div class="tab-pane fade" id="svn">...</div>
<div class="tab-pane fade" id="ios">...</div>
<div class="tab-pane fade" id="java">...</div>
</div>

方法

.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>
.....
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
.....
</div>
<script>
$(function () {$ ('#myTab a:last').tab('show')
})
</script>

事件

下表列出了标签页（Tab）插件中要用到的事件。这些事件可在函数中当钩子使用。

image.png

四、旋转轮播

轮播图的具体结构：

div id="myCa" class="carousel slide" data-ride="carousel" >

<div class="carousel-inner">
<div class="item active">
<img src="image/img1.jpg" alt=""/>
</div>
<div class="item">
<img src="image/img2.jpg" alt=""/>
</div>
<div class="item">
<img src="image/img3.jpg" alt=""/>
</div>
</div>

<ol class="carousel-indicators">
<li data-target="#myCa" data-slide-to="0" class="active"></li>
<li data-target="#myCa" data-slide-to="1"></li>
<li data-target="#myCa" data-slide-to="2"></li>
</ol>

<a class="left carousel-control" href="#myCa" data-slide="prev">
</a>
<a class="right carousel-control" href="#myCa" data-slide="next">
</a>
</div>

五、滚动监听

实例代码

<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 滚动监听（Scrollspy）插件</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse"
                    data-target=".bs-js-navbar-scrollspy">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">教程名称</a>
        </div>
        <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
            <ul class="nav navbar-nav">
                <li><a href="#ios">iOS</a></li>
                <li><a href="#svn">SVN</a></li>
                <li class="dropdown">
                    <a href="#" id="navbarDrop1" class="dropdown-toggle"
                       data-toggle="dropdown">Java
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu"
                        aria-labelledby="navbarDrop1">
                        <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                        <li><a href="#ejb" tabindex="-1">ejb</a></li>
                        <li class="divider"></li>
                        <li><a href="#spring" tabindex="-1">spring</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
     style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">iOS</h4>
    <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
        TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
    </p>
    <h4 id="svn">SVN</h4>
    <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
    </p>
    <h4 id="jmeter">jMeter</h4>
    <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
    </p>
    <h4 id="ejb">EJB</h4>
    <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
    </p>
    <h4 id="spring">Spring</h4>
    <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
    </p>
    <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
    </p>
</div>

</body>
</html>```