[Bootstrap]7天深刻Bootstrap(5)JavaScript插件

時間  2019-11-17
標籤 bootstrap 7天 深刻 javascript 插件 欄目 Bootstarp 简体版
原文   原文鏈接

在bs3.X中，提供了12種JavaScript插件，分別是：動畫過渡（Transition）、模態彈窗（Modal）、下拉菜單（Dropdown）、滾動偵測（Scrollspy）、選項卡（Tab）、提示 框（Tooltip）、彈出框（Popover）、警告框（Alert）、按鈕（Button）、摺疊（Collapse）、旋轉輪播（Carousel）、定位浮標（Affix）。css

 

因爲各類加班,身心疲憊...html

 

 

動畫過渡jquery

源文件：transition.jsweb

使用的動畫過渡效果所有使用了 CSS3的語法，因此IE六、IE七、IE8是不能用動畫過渡效果。ajax

 

默認帶過渡效果的bootstrap

  • 模態彈窗（Modal）的滑動和漸變效果；
  • 選項卡（Tab）的漸變效果；
  • 警告框（Alert）的漸變效果；
  • 旋轉輪播（Carousel）的滑動效果。

 

源碼ide

js源碼動畫

    function transitionEnd() {
        var el = document.createElement('bootstrap')
        var transEndEventNames = {
            WebkitTransition: 'webkitTransitionEnd',
            MozTransition: 'transitionend',
            OTransition: 'oTransitionEnd otransitionend',
            transition: 'transitionend'
        }
        for (var name in transEndEventNames) {
            if (el.style[name] !== undefined) {
                return { end: transEndEventNames[name] }
            }
        }
        return false // explicit for ie8 (  ._.)
    }
transition.js部分源碼

經過以上代碼判斷是否支持動畫過渡效果。網站

CSS源碼spa

.fade {
    opacity: 0; /*100%透明*/
    -webkit-transition: opacity .15s linear; /*透明度，勻速變化0.15秒*/
    transition: opacity .15s linear;
}

.fade.in { /*應用in樣式，表示所有打開*/
    opacity: 1; /*徹底不透明*/
}

 .modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out; /*減速運行*/
    -moz-transition: -moz-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -25%); /*向下移動25%的距離，從而產生向下的 動畫視覺*/
    -ms-transform: translate(0, -25%);
    transform: translate(0, -25%);
}

.modal.in .modal-dialog { /*頁面完整顯示時，迴歸到原始位置*/
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
fade css

 

模態彈窗

源文件：modal.js

模態彈窗（也叫popup，Bootstrap裏稱爲Modal）是絕大部分交互式網站都須要的一種功能，通常有如下幾種用法：

  • 提示信息、警告信息、大文本等；
  • 確認提示（多按鈕）；
  • 顯示錶單元素（通常使用ajax操做等功能）；
  • 其餘須要特殊顯示的信息（如單擊縮略圖時放大圖片）。

 

使用

彈窗組件使用了3層 div容器元素，其分別應用了modal、modal-dialog、modalcontent樣式。而後在真正的內容容器modal-content內包括了彈窗 的頭（header）、內容（body）、尾（footer）3個部分，分別應用了3個樣式：modal-header、modal-body、modal-footer。

使用data-target

<a href="#" class="btn btn-success" data-toggle="modal" data-target=".modal">啓動模態框</a>
        <div class="modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">Modal Title</div>
                    <div class="modal-body">
                        This is body.
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-default" data-dismiss="modal">關閉</a>
                        <a href="#" class="btn btn-success">保存</a>
                    </div>
                </div>
            </div>
        </div>
modal

 

js會控制在彈出modal以前，會加一個.modal-backdrop 用來設爲灰色背景。

 

下拉菜單

源文件：dropdown.js

通常下拉菜單都是在導航條（navbar）和選項卡（tab）上實現。

 

實現原理：

  • 在網頁加載的時候，對全部帶有datatoggle="dropdown"樣式的元素進行事件綁定。
  • 用戶單擊帶有data-toggle="dropdown"樣式的連接或按鈕時，觸發JavaScript事件代碼。
  • Javascript事件代碼在父容器（本例是：<li class="dropdown">）上加一個.open樣式。
  • 默認隱藏的.dropdown-menu菜單在外部有了.open樣式後，便可顯示出來，從而達到預期的效果。

 

使用：

  • 菜單樣式和菜單項保持一致（即按照第4節的要求編寫）。
  • 被單擊的連接或者按鈕上須要應用data-toggle="dropdown"樣式，以便在初始化的時候JavaScript能夠監控單擊事件

 

使用data-target

        <a href="#" class="btn btn-default" data-toggle="dropdown" data-target="#d">啓動下拉框</a>
        <div class="dropdown" id="d">
            <a href="#" class="btn btn-default" data-toggle="dropdown">啓動下拉框</a>
            <ul class="dropdown-menu">
                <li><a>菜單1</a></li>
                <li><a>菜單2</a></li>
            </ul>
        </div>
dropdown

 

滾動偵測

源文件：scrollspy.js

滾動偵測（ScrollSpy）插件是根據滾動的位置自動更新導航 條中相應的導航項

 

使用：

  • 設置滾動容器，即在所要偵測的元素上設置data-target="#selector" data-spy="scroll"屬性。
  • 設置菜單連接容器，該容器的id（或樣式）和data-target 屬性所對應的選擇符應一致。
  • 在菜單容器內，必須有.nav樣式的元素，而且在其內部有 li元素，li內包含的a元素纔是能夠偵測高亮的菜單連接，即符 合.nav li > a這種選擇符的條件。

 

body上用data-spy

<body data-target="#selector" data-spy="scroll">
    <div id="selector">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#fat">@fat</a></li>
                <li><a href="#mdo">@mdo</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class=""><a href="#one">one</a></li>
                        <li class=""><a href="#two">two</a></li>
                        <li class="divider"></li>
                        <li class=""><a href="#three">three</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
    <div style="overflow: auto">
        <h4 id="fat">@fat</h4>
        <p>具體內容</p>
        <h4 id="mdo">@mdo</h4><p>具體內容</p>
        <h4 id="one">one</h4><p>具體內容</p>
        <h4 id="two">two</h4><p>具體內容</p>
        <h4 id="three">three</h4><p>具體內容</p>
    </div>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
</body>
data-spy

 

 

注意：

子菜單雖然會高亮，但不會打開，爲了展現效果，須要手 動打開下拉菜單查看。
該插件所須要的導航條只能在擁有.nav樣式的ul/li元素上起 做用

 

選項卡

源文件：tab.js

就像咱們平時使用的Windows操做系統裏的選項卡設置同樣，單擊一個選項，下面就顯示對應的選項卡面板

 

使用：

  • 選項卡導航和選項卡面板要同時有（但不必定要放在一 起）。
  • 導航連接裏要設置data-toggle="tab"，而且還要設置data-target="選擇符"（或href="選擇符"），以便單擊的時候能找到該選擇符所對應的tab-pane面板。
  • tab-pane要放在tab-content裏面，要有id（或者CSS樣式） 並與data-target="選擇符"（或href="選擇符"）一致

 

     <ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">home</a> </li>
        <li><a href="#concact" data-toggle="tab">concact</a> </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="home">
            <h3>Home</h3>
        </div>
        <div class="tab-pane" id="concact">
            <h3>concact</h3>
        </div>
    </div>
nav-tabs

 

 

提示框

源文件：tooltip.js

鼠標移動到特定的元素上時，顯示相關的提示語。相似於abbr的title功能，不過效果更加漂亮實用。

 

使用

  • 指定的data-toggle="tooltip"屬性
  • 而後再定義要顯示的內容,能夠在title也能夠用data-original-title
  • js初始化.$('[data-toggle="tooltip"]').tooltip();
<a data-toggle="tooltip" class="btn btn-default" title="aaaa" data-placement="bottom">bbbb</a>

    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
tooltip

 

彈出框

源文件：popover.js

彈出框其實就是一種特殊的提示框，相比來講只是多了一個title標題而已

 

使用

（彈出框插件的用法和提示框組件幾乎如出一轍），惟一不同的就是插件名稱以及多餘的content字段。而關於自動初始化，也和提示框插件同樣，須要手動初始化

  • 指定的data-toggle="popover"屬性
  • 而後再定義要顯示的標題,能夠在title也能夠用data-original-title
  • 定義內容，能夠在content也能夠data-content
  • js初始化.$('[data-toggle=popover]').popover();
    <a data-toggle="popover" class="btn btn-default" title="aaaa" data-content="ccccc" data-placement="bottom">bbbb</a>
popover

 

警告框

源文件：alert.js

就是在警告框組件的基礎上，提供了 單擊x號關閉警告框的功能

 

使用

    <div class="alert alert-danger">
        <h3>警告標題</h3>
        <hr />
        <p>警告內容警告內容</p>
        <p>
            <button class="btn btn-default" data-dismiss="alert">關閉</button>
        </p>
    </div>
alert

 

默認狀況下，若是不設置data-target屬性，則會關閉x號按鈕元素所在的父元素容器，即外部的div元素。只須要保證設置了data-dismiss="alert"便可.

 

按鈕

源文件：button.js

按鈕插件提供了一組能夠控制按鈕多種狀態的功能，好比，一個按鈕有禁用狀態、正在加載狀態、正常狀態等

 

使用

禁用狀態在這裏再也不贅述。

正在加載和加載完成控制與顯示

    <a id="aa" href="#" class="btn btn-default" data-loading-text="正在加載..." data-complete-text="已完成">提交</a>
$('#aa').dblclick(function() {
            $('#aa').button('loading');
            setTimeout(function () {
                $('#aa').button('complete');
            }, 2000);
        });
        $('#aa').click(function() {
            $('#aa').button('reset');
        });
btn

 

 

摺疊

源文件：collapse.js

當單擊一個觸發元素時，在另一個可摺疊區域進行顯示（或隱藏），再次單擊時能夠反轉顯示狀態。（經典的手風琴風格）

 

使用

    <!--  默認顯示摺疊區域-->
    <a class="btn btn-danger" data-toggle="collapse" data-target="#demo">觸發改變</a>
    <div id="demo" class="collapse in">摺疊區域...</div>

   <!--  默認隱藏摺疊區域-->
    <button class="btn btn-danger collapsed" data-toggle="collapse" data-target="#demo">按鈕</button>
    <div id="demo" class="collapse ">摺疊區域...</div>

 

 

輪播

源文件：carousel.js

旋轉輪播（Carousel）這個插件有不少種譯法，有人叫輪播，有人叫傳送帶

  <div data-ride="carousel" class="carousel slide" id="carousel-container"> 
   <!-- 圖片容器 --> 
   <div class="carousel-inner"> 
    <div class="item">
     <img alt="第一張圖" src="A" />
    </div> 
    <div class="item active">
     <img alt="第二張圖" src="B" /> 
    </div> 
    <div class="item">
     <img alt="第三張圖" src="C" /> 
    </div> 
   </div> 
   <!-- 圓圈指示符 --> 
   <ol class="carousel-indicators"> 
    <li data-slide-to="0" data-target="#carousel-container"></li> 
    <li data-slide-to="1" data-target="#carousel-container"></li> 
    <li data-slide-to="2" data-target="#carousel-container" class="active"></li> 
   </ol> 
   <!-- 左右控制按鈕 --> 
   <a data-slide="prev" href="#carousel-container" class="left carouselcontrol"> <span class="glyphicon glyphicon-chevron-left"></span> </a> 
   <a data-slide="next" href="#carousel-container" class="right carouselcontrol"> <span class="glyphicon glyphicon-chevron-right"></span> </a> 
  </div>

帶有data-ride="carousel"的div就是輪播插件的容器，容器id爲carousel-container，稍後會用到。

還有兩個樣式，其中carousel樣式作樣式容器，而slide樣式和fade相似，用來定義輪播圖片的時候是否有特效.

 

  1. carousel-inner樣式div內部包含多個含有item的div樣式，在 這些內部的div裏，定義咱們要顯示的幻燈圖片。
  2. carousel-indicators樣式ol內部定義了一組標示符，用戶單 擊這些標示符能夠直接顯示相應的圖片,data-slide-to是索引,從0開始.
  3. 另外兩個a連接是一組，用於顯示左右箭頭，能夠改變輪播的方向。這兩個元素上定義的data-slide屬性值只能是 prev或者next

針對圖片，輪播插件還提供了一個字幕說明樣式（carousel-caption），緊接着img元素定義便可。示例以下

<div class="item active"> 
   <img src="..." alt="..." /> 
   <div class="carousel-caption"> 
    <h3>標題</h3> 
    <p>描述...</p> 
   </div> 
 </div>

 

定位浮標

源文件：affix.js

 

Affix的效果就像其官方網站左邊的導航連接同樣。

<!—或者分開設置offset -- >

<div data-spy="affix" data-offset-top="60" data-offset-bottom="100" >導航內容 </div>

<!—合併設置offset -- >

<div data-spy="affix" data-offset="60" >導航內容</div>

 

data-offset-top表示一個完整的新網頁，從頂部向下拖動滾動條（也就是網頁向上滾動）這個像素之後,

而data-offset-bottom則表示距離最底部還有多少距離（本例60像素）之後，就要開始繼續滾動了.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程