bootstrap3-javascript插件- 慕課筆記

時間 2019-12-10

標籤 bootstrap3 bootstrap javascript 插件筆記欄目 Bootstarp 简体版

原文原文鏈接

bootstrap支持的js插件

說明：文中內容系本人在某網站學習筆記，本着本站禁止推廣的原則，在此就不著明學習站點的名稱及地址。其實開博客的目的也就是爲了方便記錄學習，由於平時本地的記錄太多丟三落四。但有時會傻傻分不清關於侵權的界限，尤爲技術這塊兒，很容易形成侵權的發生。此篇內容在源網站爲免費提供，因此想來在此發佈也無傷大致。原本boostrap的知識在其官網有比較完整的文檔，對於學習能力強的人來講並不用花費很大的精力去學習。怎奈筆者天資愚鈍，每到實際用時總覺概念模糊，致使費時費力。由於主要精力沒在前端這塊兒，因此本文記述並不詳盡，僅僅臨時抱佛腳的學，勉強湊合着用。javascript

概覽

bootstrap中的JavaScript插件：

插件名稱	定義文件
動畫過濾	transition.js
模態框	modal.js
下拉菜單	dropdown.js
滾動偵測	scrollspy.js
選項卡	tab.js
提示框	tooltop.js
彈出框	popover.js
警告框	alert.js
按鈕	button.js
摺疊/手風琴	collapse.js
圖片輪播	carousel.js
自動定位浮標	affix.js

兩套API:

data屬性APIcss
1. 能夠僅僅經過 data 屬性 API 使用全部的 Bootstrap 插件，無需寫一行 JavaScript 代碼，建議首選html
2. 關閉data屬性API的方法：前端
3. 關閉全部：$(document).off('.data-api')
4. 關閉特定插件：$(document).off('.插件名稱.data-api')java

編程方式API（js控制）css3

全部公開api支持單獨或鏈式調用編程

全部方法都接受一個可選的option對象或一個表明特定方法的字符串做爲參數，不傳參時以默認值初始化。好比bootstrap

$('#myModal').modal()                      // 以默認值初始化
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // 初始化後當即調用 show 方法

修改插件默認設置api

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 將模態框插件的 `keyboard` 默認選參數置爲 false

事件

Bootstrap爲大部分插件所具備的動做提供了自定義事件。通常來講，這些事件都有不定式和過去式兩種動詞的命名形式，例如，不定式形式的動詞（例如 show）表示其在事件開始時被觸發；而過去式動詞（例如 shown ）表示在動做執行完畢以後被觸發。數組

全部以不定式形式的動詞命名的事件都提供了阻止默認事件功能：

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // 阻止模態框的展現
})

1、動畫過渡

定義功能的文件：transition.js
動畫過渡功能採用css3實現，IE六、IE七、IE8,不支持
bootstrap中使用了過分動畫效果的組件包括：
1. 模態彈（Modal）
2. 選項卡（Tab）
3. 警告框（Alert）
4. 圖片輪播（Carousel）
全局範圍禁用過渡效果：
```
$.support.transition=false
```

2、模態框

不要在一個模態框上重疊另外一個模態框，不支持同時打開多個模態框

模態框需做爲body標籤的直接子元素

在 IOS 和 Android 上，當滾動屏幕超過模態框的頂部或底部時，<body> 中的內容將開始隨着滾動

結構

data-target觸發：

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" type="button">經過data-target觸發</button>
<div class="modal fade"  id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模態彈出窗標題</h4>
            </div>
            <div class="modal-body">
                <p>模態彈出窗主體內容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

js觸發：

<!-- 觸發按鈕 -->
<button class="btn btn-primary" type="button">點擊我</button>
<!-- 模態框 -->
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模態框標題</h4>
            </div>
            <div class="modal-body">
                <p>模態框主體內容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- js代碼 -->
<script>
       $(function(){
            $(".btn").click(function(){
                $("#mymodal").modal();
            });
        });             
</script>

關鍵類名：.modal > .modal-dialog > .modal-content > .modal-header + .modal-body + .modal-footer

關鍵點：觸發按鈕上的屬性「data-toggle=modal」和"data-target=#id",其中前者的值必須時「modal」，後者能夠是模態框的id值，也能夠是其餘css選擇器

另外：模態框的觸發器還能夠是<a>元素，使用時能夠用href代替data-target

模態框大小

modal-lg 大模態框

modal-sm 小模態框

添加的對象爲類名爲modal-dialog的元素

模態框彈出時的動畫效果

模態框彈出時的淡入淡出的動畫效果經過類名fade'控制

添加.fade'增長動畫效果，不想要動畫效果刪除便可

data-參數

js觸發模態框方式用到的一些設置

屬性設置

使用方法：

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({
            keyboard:false
        });
    });
});

參數設置

事件設置

調用方法：

$('#myModal').on('hidden.bs.modal', function (e) {
    // 處理代碼...
})

3、選項卡

結構

一個選項卡包括兩個部分：菜單項和內容面板

基本HTML結構：

<!-- 選項卡組件（菜單項nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab">公告</a></li>
    <li><a href="#rule" role="tab">規則</a></li>
    <li><a href="#forum" role="tab">論壇</a></li>
    <li><a href="#security" role="tab">安全</a></li>
    <li><a href="#welfare" role="tab">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告內容面板</div>
    <div class="tab-pane fade" id="rule">規則內容面板</div>
    <div class="tab-pane fade" id="forum">論壇內容面板</div>
    <div class="tab-pane fade" id="security">安全內容面板</div>
    <div class="tab-pane fade" id="welfare">公益內容面板</div>
</div>

關鍵點： 選項卡中連接的錨點要與對應的面板內容容器ID匹配

效果

普通選項卡：data-toggle="tab"
膠囊式選項卡：*data-toggle="pill"

切換效果：面板中的每項添加類名：fade

注意： 在添加fade樣式時，在想要顯示的面板上必定要額外添加類名in,不然不會顯示其內容

觸發方式

data屬性觸發：

選項卡導航中的連接設置：data-toggle="tab/pill"
選項卡導航中的連接設置：data-target="對應內容面板的選擇符（通常是ID）";若是是連接，還可經過href="對應內容面板的選擇符（通常是ID）"方式

<!-- 選項卡組件（菜單項nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">規則</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li>
    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告內容面板</div>
    <div class="tab-pane fade" id="rule">規則內容面板</div>
    <div class="tab-pane fade" id="forum">論壇內容面板</div>
    <div class="tab-pane fade" id="security">安全內容面板</div>
    <div class="tab-pane fade" id="welfare">公益內容面板</div>
</div>

js觸發：

選項卡導航連接的HTML代碼中不用帶data-toggle屬性
在每一個連接的單擊事件中調用tab("show")方法

4、提示框

結構

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

關鍵點：

元素上設置data-toggle="tooltip"
經過title屬性或data-original-title屬性定義提示信息
經過data-placement屬性控制提示框的位置：四個位置（頂部、右邊、底部、左邊）分別對應的值（top、right、bottom、left）

注意： 若是同時設置了 data-original-title 和 title 定義提示信息，那麼 data-original-title 的優先級要高於 title。只有 data-original-title 值爲空時，纔會取 title 的值作爲提示信息的內容

觸發方式

注意： 不能經過data屬性方式觸發

js方式觸發

$(function(){
    $('#myTooltip').tooltip();
});

提示：tooltip()方法能夠接收一個對象做爲參數，在對象中定義相關屬性用來代替html中的data屬性

$(function(){
    $('#myTooltip').tooltip({
       title:"我是一個提示框，我在頂部出現",
       placement:'top'
    });
});

關於提示框的其餘自定義屬性

data-方式

js方式

5、彈出框

彈出框和提示框的區別：

彈出框除了有標題 title 之外還增長了內容 content 部分。這個在提示框中是沒有的

提示框 tooltip 的默認觸發事件是 hover 和 focus，而彈出框 popover 是 click

結構

<button type="button" 
        class="btnbtn-default" 
        data-container="body" 
        data-placement="bottom" 
        data-toggle="popover" 
        data-original-title="Bootstrap彈出框標題" 
        data-content="Bootstrap彈出框的內容" >
        猛擊我吧
</button>

關鍵點：

data-toggle="popover"代表是一個彈出框
data-content屬性定義彈出框的內容

觸發方式

同tooltip的觸發方式，不能經過data屬性方式觸發，而只能經過js方式觸發

6、按鈕插件

結構

html

<button class="btnbtn-primary" data-loading-text="正在加載中,請稍等..." type="button" id="loaddingBtn">加載</button>

$(function(){
    $("#loaddingBtn").click(function () {
        $(this).button("loading");
      });
});

關鍵點：

經過data-loading-text屬性定義加載的文本信息
給元素綁定事件，並添加button("loading")方法

模擬單選按鈕

html結構：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options1">男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options2">女
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options3">未知
    </label>
</div>

運行效果

關鍵點：給按鈕組添加屬性data-toggle="buttons"

注意： 使用這種效果的時候，無需藉助JavaScript代碼來觸發，由於默認Bootstrap就已經爲用戶初始化好了。

模擬多選按鈕

html結構

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options1">電影
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options2">音樂
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options3">遊戲
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options4">攝影
    </label>
</div>

運行效果

按鈕狀態切換

html結構

<button type="button" data-toggle="button" class="btn btn-primary">確認</button>

注意： 自定義屬性是 data-toggle="button"，而不是 data-toggle="buttons"

7、輪播圖

html結構

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

輪播圖容器

<div id="slidershow" class="carousel"></div>

知識點：容器的類名爲carousel，傳入的ID值方便後面採用data屬性方式觸發

輪播圖片計數器

<div id="slidershow" class="carousel">
<!-- 設置圖片輪播的順序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        ...
    </ol>
</div>

知識點：計數器的類名爲carousel-indicators，功能是顯示圖片播放順序，有幾張圖片就放置幾個li，通常採用順序列表

輪播圖呈現區

<div id="slidershow" class="carousel">
    <!-- 設置圖片輪播的順序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
        …
    </ol>
    <!-- 設置輪播圖片 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
        </div>
        …
        <div class="item">
            <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
        </div>
    </div>
</div>

知識點：呈現區經過carousel-inner樣式控制

輪播圖控制器

<div id="slidershow" class="carousel">
    <!-- 設置圖片輪播的順序 -->
    <ol class="carousel-indicators">
       …
    </ol>
    <!-- 設置輪播圖片 -->
    <div class="carousel-inner">
        …
    </div>
    <!-- 設置輪播圖片控制器 -->
    <a class="left carousel-control" href="" >
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
   
</div>

知識點：控制器類名爲carousel-control，

觸發方式

data屬性觸發

相關data屬性：

data-rige:值爲carousel,定義在容器元素
data-target:值爲容器元素的ID值或其餘有效標識符，，定義在輪播圖計數器的每個li上
data-slide:值爲prev(向前)、next(向後)，定義在輪播圖控制器的a連接上，同時須要設置控制器href值爲容器的ID值或其餘有效標識符
data-slide-to:值爲圖片幀下標（下標從0開始），定義在輪播圖計數器的每一個li上

<div id="slidershow" class="carousel" data-ride="carousel">
<!-- 設置圖片輪播的順序 -->
    <ol class="carousel-indicators">
        <li class="active" data-target="#slidershow" data-slide-to="0"></li>
        <li data-target="#slidershow" data-slide-to="1"></li>
        <li data-target="#slidershow" data-slide-to="2"></li>
        <li data-target="#slidershow" data-slide-to="3"></li>
        <li data-target="#slidershow" data-slide-to="4"></li>
        <li data-target="#slidershow" data-slide-to="5"></li>
    </ol>
    <!-- 設置輪播圖片 -->
    <div class="carousel-inner">
    …
    </div>
    <!-- 設置輪播圖片控制器 -->
    <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

小提示：能夠爲容器添加類名slide來使圖片切換效果有平滑感

其餘data屬性：

js方式觸發

$("#slidershow").carousel();

carousel()方法接受參數：

使用方法：

$("#slidershow").carousel({
       interval: 3000
});

其餘特殊的調用方法：

.carousel("cycle")：從左向右循環播放；
.carousel("pause")：中止循環播放；
.carousel("number")：循環到指定的幀，下標從0開始，相似數組；
.carousel("prev")：返回到上一幀；
.carousel("next")：下一幀

8、固定定位

說明： Affix插件能夠對任何元素進行固定定位

相關參數設置：

data-spy:取值affix,表示元素固定不變
data-offset:整數值，好比90，表示元素距離頂部和底部的距離都是90px
data-offset-top:設置元素距離頂部的距離
data-offset-bottom:設置元素距離底部的距離

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

bootstrap3-javascript插件- 慕課筆記

bootstrap支持的js插件

概覽

bootstrap中的JavaScript插件：

兩套API:

事件

1、動畫過渡

定義功能的文件：transition.js

動畫過渡功能採用css3實現，IE六、IE七、IE8,不支持

bootstrap中使用了過分動畫效果的組件包括：

2、模態框

結構

模態框大小

模態框彈出時的動畫效果

data-參數

js觸發模態框方式用到的一些設置

3、選項卡

結構

效果

觸發方式

4、提示框

結構

觸發方式

js方式觸發

關於提示框的其餘自定義屬性

5、彈出框

結構

觸發方式

6、按鈕插件

結構

模擬單選按鈕

模擬多選按鈕

按鈕狀態切換

7、輪播圖

輪播圖容器

輪播圖片計數器

輪播圖呈現區

輪播圖控制器

觸發方式

data屬性觸發

js方式觸發

8、固定定位