JavaScript 插件

一奄妨、Bootstrap 的 JavaScript 插件

1.data屬性

Bootstrap 插件提供了純 JavaScript 方式的 API涂籽。所有公開的 API 都是支持單獨(dú)或鏈?zhǔn)秸{(diào)用方式，并且返回其所操作的元素集合（注：和jQuery的調(diào)用形式一致）砸抛。例如：

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

所有的方法都可以接受一個(gè)可選的選項(xiàng)對(duì)象作為參數(shù)评雌，或者一個(gè)代表特定方法的字符串树枫，或者不帶任何參數(shù)（這種情況下，將會(huì)初始化插件為默認(rèn)行為）景东，如下所示：
// 初始化為默認(rèn)行為

$("#myModal").modal()

// 初始化為不支持鍵盤

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

// 初始化并立即調(diào)用 show

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

每個(gè)插件在 Constructor 屬性上也暴露了其原始的構(gòu)造函數(shù)：

$.fn.popover.Constructor砂轻。如果您想獲取某個(gè)特定插件的實(shí)例，可以直接通過頁面元素獲冉锿隆：

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

二搔涝、動(dòng)畫過渡

Bootstrap使用的動(dòng)畫過渡效果全部使用的時(shí)CSS3語法，所以IE6~IE8不能使用的時(shí)候可以單獨(dú)引入trasition.js曲初。不過在Bootstrap中一般不會(huì)直接使用動(dòng)畫過渡插件体谒，而是把它的功能融入到其他插件中使用，例如：
1.模態(tài)框(Modal)的滑動(dòng)的漸變效果臼婆，
2.選項(xiàng)卡(Tab)的漸變效果抒痒，
3.旋轉(zhuǎn)輪播(Carousel)的滑動(dòng)效果等。

三颁褂、模態(tài)框

模態(tài)框（Modal）是覆蓋在父窗體上的子窗體故响。通常，目的是顯示來自一個(gè)單獨(dú)的源的內(nèi)容颁独，可以在不離開父窗體的情況下有一些互動(dòng)彩届。子窗體可提供信息、交互等(如果想要單獨(dú)引用該插件的功能誓酒，那么需要引用 modal.js樟蠕。或者可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js靠柑。
)寨辩。

image.png

三、選項(xiàng)卡

image.png

淡入淡出效果

如果需要為標(biāo)簽頁設(shè)置淡入淡出效果歼冰，請(qǐng)?zhí)砑?.fade 到每個(gè) .tab-pane 后面靡狞。第一個(gè)標(biāo)簽頁必須添加 .in 類，以便淡入顯示初始內(nèi)容隔嫡，如下面實(shí)例所示：
<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：該方法可以激活標(biāo)簽頁元素和內(nèi)容容器甸怕。標(biāo)簽頁需要用一個(gè) data-target 或者一個(gè)指向 DOM 中容器節(jié)點(diǎn)的 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>

事件

下表列出了標(biāo)簽頁（Tab）插件中要用到的事件腮恩。這些事件可在函數(shù)中當(dāng)鉤子使用梢杭。

image.png

四、旋轉(zhuǎn)輪播

輪播圖的具體結(jié)構(gòu)：

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>

五秸滴、滾動(dòng)監(jiān)聽

實(shí)例代碼

<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 實(shí)例 - 滾動(dòng)監(jiān)聽（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">切換導(dǎo)航</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 是一個(gè)由蘋果公司開發(fā)和發(fā)布的手機(jī)操作系統(tǒng)式曲。最初是于 2007 年首次發(fā)布 iPhone、iPod Touch 和 Apple
        TV。iOS 派生自 OS X吝羞，它們共享 Darwin 基礎(chǔ)兰伤。OS X 操作系統(tǒng)是用在蘋果電腦上谱秽，iOS 是蘋果的移動(dòng)版本戚长。
    </p>
    <h4 id="svn">SVN</h4>
    <p>Apache Subversion，通嘲罚縮寫為 SVN恨溜，是一款開源的版本控制系統(tǒng)軟件符衔。Subversion 由 CollabNet 公司在 2000 年創(chuàng)建。但是現(xiàn)在它已經(jīng)發(fā)展為 Apache Software Foundation 的一個(gè)項(xiàng)目糟袁，因此擁有豐富的開發(fā)人員和用戶社區(qū)判族。
    </p>
    <h4 id="jmeter">jMeter</h4>
    <p>jMeter 是一款開源的測(cè)試軟件。它是 100% 純 Java 應(yīng)用程序项戴，用于負(fù)載和性能測(cè)試形帮。
    </p>
    <h4 id="ejb">EJB</h4>
    <p>Enterprise Java Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如 JBOSS周叮、Web Logic 等）的 J2EE 上辩撑。
    </p>
    <h4 id="spring">Spring</h4>
    <p>Spring 框架是一個(gè)開源的 Java 平臺(tái)，為快速開發(fā)功能強(qiáng)大的 Java 應(yīng)用程序提供了完備的基礎(chǔ)設(shè)施支持仿耽。
    </p>
    <p>Spring 框架最初是由 Rod Johnson 編寫的合冀，在 2003 年 6 月首次發(fā)布于 Apache 2.0 許可證下。
    </p>
</div>

</body>
</html>```