這次我們來看下js組件的使用,本篇文章會有點長,希望大家可以耐心看,相信收穫會有不少。不少園友加我好友,表示喜歡我寫文字的風格,簡單明了,這裡,再次謝謝你們的支持。一方面,自身技術有限,寫的東西都比較基礎,另一方面,寫的東西,都是根據自己的理解,把複雜的東西用最簡單的語言表達出來。所以,寫的有不對的地方,麻煩各位給予指正哈。
一、js文件引用
注意點: jquery必須在在其它js文件之前引入,因為其它插件都是依賴於jquery。
<!--<script src="js/jquery-1.11.3.min.js"></script> 本地引入的加載文件--><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> --必須在bootstrp.min.js之前引入<script src="js/bootstrap.min.js"></script>
二、data屬性
作用:通過data屬性,可使用任何的bootstrap插件,無須寫任何一段js代碼。前面講過的像:data-toggle="dropdown"等引用菜單插件。
那麼既然有打開功能,如何關閉功能呢?在javascript裡面添加下面代碼即可:
<script type="text/javascript"> $(document).off('.data-api'); </script>如果要關閉某一個特定的插件的功能,添加下面代碼即可:
<script type="text/javascript"> // 關閉提示框的插件功能$(document).off('.alert.data-api'); </script>所有的js插件基本都是下面幾步:
1:如何使用? ---類對應如何寫?
2:如何調用? ---類寫好了,如何使其寫的類生效?
3:事件處理---包括動作觸發前發生以及動作出發後發生
注意:所有動作觸發之前發生的,bootstrap提供了preventDefault,實現在動作執行之前將其停止。代碼如下:
$('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() // 阻止模態框的展示,當然你也可換成阻止其它插件的出現})注意: bootstrap沒有對禁用javascript的瀏覽器採取補救措施,因此,我們需要自己寫一段代碼補救,相信大家都知道。
<noscript> 你的瀏覽器不支持javascript,請下載最新的瀏覽器</noscript>
三、模態框組件(modal.js)
注意點:
1:不支持同時打開多個模態框
2:模態框盡量位於body子元素的位置,避免其它組件影響模態框的展現和功能
3:移動端說明
4:增強可訪問性--添加role屬性
5:在模態框中可嵌入視屏,即data-toggle="modal"
我們來看下下面的列子,點擊button,會彈出一個模態框,關於這裡的屬性,如果看過之前的文章,相信理解起來不難,這裡不再詳解,可自行貼碼測試:
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面,任何其他內容都*必須*跟隨其後! --><title></title><link href="css/bootstrap.css" rel="stylesheet"><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"></head><body> <button type="button" data-toggle="modal" data-target=".bs-example-modal-lg"> 彈出大模態框</button><div id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div>--大的模態框<div> <div> <button type="button" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4>Modal title</h4> </div> <div> <p>one fine body …</p> </div> <div> <button type="button" data-dismiss="modal">close</button> <button type="button">save changes</button> </div> </div> </div></div><!-- 改變模態框的大小添加類modal-sm即可--><button type="button" data-toggle="modal" data-target=".bs-example-modal-sm"> 彈出小模態框</button><div id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div> ---小模態框<div> <div> <button type="button" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4>Modal title</h4> </div> <div> <p>one fine body …</p> </div> <div> <button type="button" data-dismiss="modal">close</button> <button type="button">save changes</button> </div> </div> </div></div><!-- 禁止動畫效果,刪掉fade即可--><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $("#mymodal").modal("show"); ---調用這句代碼才能使插件生效</script></body></html>實現效果如下:
結合模態框,你也可以給body內容增加其它功能,比如嵌入表單的輸入框等,這裡不再貼碼。
模態框的事件,在javascript中添加下面的代碼即可,如下所示:
複製代碼代碼如下:<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $("#mymodal").modal("show"); ---調用這句代碼才能使插件模態框生效顯示出來$('#myModal').on('hidden.bs.modal', function (e) {
alert("111");
}) ---這個事件指當關閉模態框之後,alert事件將會被觸發</script>
我們來看看模態框如何嵌入視屏,自己需要添加一些代碼,自動播放,停止等功能。先來看看代碼
<a href="#" data-toggle="modal" data-target="#videoModal" data-theVideo="http://v.youku.com/v_show/id_XMTU2ODMyMDUyMA==.html" >VIDEO</a><div id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <div> <iframe src=""></iframe> </div> </div> </div> </div></div><!-- <script src="js/jquery-1.11.3.min.js"></script> 本地的加載文件--> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> //視屏函數function autoPlayModal(){ var trigger = $("body").find('[data-toggle="modal"]'); trigger.click(function() { var theModal = $(this).data( "target" ); var videoSRC = $(this).attr( "data-theVideo" ); var videoSRCauto = videoSRC+"?autoplay=1" ; $(theModal+' iframe').attr('src', videoSRCauto); $(theModal+' button.close').click(function () { $(theModal+' iframe').attr('src', videoSRC); }); });}//調用該函數$(document).ready(function(){ autoPlayModal();}); </script><noscript>不支持javascript瀏覽器</noscript>效果不再截圖,上面的src引入的是優酷的地址。
四、滾動監聽組件
以導航條舉列,即根據滾動的位置來自動切換標籤頁。我們來看下代碼。
1:保證出現滾動條。
2:通常給body加data-spy,即使用data-spy="scroll" <body data-spy="scroll" data-target=".navbar" data-offset="70"> <div id="myScrollspy"> <nav role="navigation"> <div> <div id="navbar-scroll"> <ul> <li><a href="#home">home</a></li> <li><a href="#message">message</a></li> <li><a href="#about">about</a></li> <li> <a href="#" data-toggle="dropdown">下拉菜單<b></b></a> <ul> <li><a href="#one">one</a> <li><a href="#two">two</a> <li><a href="#three">three</a> </ul> </li> </ul> </div> </div> </nav> <!-- 展示的內容--> <h1 id="home">home</h1> <p>111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 </p> <hr> <h1 id="message">message</h1> <p>111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 </p> <hr> <h1 id="about">about</h1> <p>111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 </p> <hr> <h1 id="one">one</h1> <p>111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 </p> <h1 id="two">two</h1> <p>111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 </p> <h1 id="three">three</h1> <p>111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111 </p> </div><!-- 理解data-offset的意思-->
理解data-offset的意思:即當滾動位置時,距離頂部的偏移量。其次它的事件處理,與模態框的用法類似,不再講解。
效果如下:
五、提示框組件
注意:
1:使用data-toggle="tooltip"
2:data-placement表示提示框的方向,共有四個方向,left,right,bottom,top
3:data-animation是將其動畫效果設為false,即鼠標移過去後,由原來的漸入漸出變為瞬間出現,沒有緩衝效果。
<div> <p> <!-- 緩和--> this is a test title,<a href="#" id="clickEvent" data-toggle="tooltip" data-placement="bottom" data-original-title="cnblog.com/jtjds" data-animation="false">click me,remember </p></div> <!-- <script src="js/jquery-1.11.3.min.js"></script> 本地的加載文件--><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript"> $('[data-toggle="tooltip"]').tooltip();//初始化$('#clickEvent').tooltip('show') //打開就直接顯示$('#clickEvent').on('shown.bs.tooltip', function () { alert("2222"); //事件處理,顯示後將彈出此項}) </script>六、彈出框組件
注意:
1:彈出框即為任意元素添加一小塊懸浮層,存放非主要信息。
2:當內容長度為0時,不顯示彈出框。使用data-toggle="popover"
3:依賴於提示框插件,且需手動初始化(見javascript裡的初始化)
看下下面這段代碼,不再截圖:
複製代碼代碼如下:<!-- 點擊按鈕實現彈出,再點擊按鈕實現隱藏-->
<button type="button" data-toggle="popover" data-content="and here is some amazing content,it's very engaging,right?">點我彈出/隱藏彈出框</button>
點擊button時,出現,再點擊button,消失,如果想在空白處點擊便可將其隱藏怎麼辦?
添加data-trigger="focus"即可,隱藏焦點,trigger表示觸發的意思。
複製代碼代碼如下:<!-- 點擊按鈕彈出,點擊任一點空白處隱藏,最好使用a標籤,當然你也可以使用button-->
<a tabindex="0" id="myPopover" role="button" data-toggle="popover"
data-trigger="focus" data-content="and this is a beautiful content">點我可消失</a>
七、警告框組件
注意:
1:使用data-dismiss="alert"
2:次插件可為警告信息添加點擊並消失的功能
3:使用關閉按鈕時,即close類時,它必須是alert的第一個子元素,且在它之前不許出現文本。
我們來看下代碼:
<!-- 警告框--><div id="myalert"> <button type="button" data-dismiss="alert" aria-label="close"> <span aria-hidden="true">×</span> </button> <span>歡迎你</span> <button type="button">詳情</button></div><div id="myalert1"> <button type="button" data-dismiss="alert" aria-label="close"> <span aria-hidden="true">×</span> </button> <span>歡迎你</span> <button type="button">詳情</button></div>
如果在javascript中存在多個警告框,並且你想將某個警告框關閉時,在javascript裡添加下面代碼即可,如下:
$("#myalert").alert('close') //第一個警告框備關閉了,或者將#myalert換成#myalert1時,第二個警告框將關閉$('#myalert1').on('closed.bs.alert', function () { alert("close"); --當點擊關閉按鈕後,執行alert事件})八、按鈕組件
注意:
1:切換按鈕的狀態(禁用還是打開的)--這個用到autocomplete="off"來實現
2:將多個按鈕形成工具條等
3:通過設置data-loading-text="loading....."來設置加載的狀態
<!-- 按鈕--><button type="button" id="myButton" data-loading-text="loading...." autocomplete="off" >loading state</button><button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">single toggle</button><!-- button組--><div data-toggle="buttons"> <label> <input type="checkbox" autocomplete="off" checked>home </label> <label> <input type="checkbox" autocomplete="off" >message </label> <label> <input type="checkbox" autocomplete="off" >profile </label></div>
如果希望在點擊button後,更改其內容,添加data-complete-text=“xxxx”即可,同時添加javascript代碼如下:
複製代碼代碼如下:<!-- 點擊觸發後,將內容進行更改data-complete-text表示為完成後的內容-->
<button type="button" data-complete-text="finish" autocomplete="off">點擊後內容自動更改</button><script> $('.mybtn').on('click', function () { $(this).button('complete') // 內容將變為finish })</script>
設置點擊button切換狀態,並設置切換狀態時的時間,可在javascript裡面添加如下代碼:
<script> $('#myButton').on('click', function (e) { var btn = $(this).button('loading'); setTimeout(function(e){ btn.button('reset');//設置恢復原始狀態},3000) })</script>九、折疊框組件
注意:使用data-toggle="collapse" 看下代碼:
<a role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href</a><div id="collapseExample"> <div> hello ,this is test! </div></div>
另外可結合面板組來進行使用,如下所示:
<!-- 面板組--> <div id="mypanel" role="tablist"> <!-- 第一個面板--> <div> <div role="tab" id="headingone"> <h4> <a data-toggle="collapse" data-parent="#mypanel" href="#collapseone" >home</a> </h4> </div> <!-- 內容--> <div id="collapseone" role="tabpanel"> <div> 關於我你好啊碎碎念</div> </div> </div> <!-- 第二個面板--> </div>
通過點擊home來控制內容部分,是設置它的href="#collapseone"即內容所對應的id。
關於事件,跟前面使用的類似,這些組件,進行的時間用法都類似,如下
<script type="text/javascript"> $('#mypanel').on('hidden.bs.collapse', function () { alert("2222");}) </script>十、carsousel滑動組件
注意:使用data-ride="carousel" ,比如像我們通常製作的輪播圖等。先看下我製作的輪播圖代碼:
<div id="myContainer"> ---注意data-target的目標<div id="carousel1" data-ride="carousel" > <ol> --indicators表示滑動指示,即從哪一張滑到哪一張<li data-target="#carousel1" data-slide-to="0"></li>--從第一張開始滑動<li data-target="#carousel1" data-slide-to="1"></li> <li data-target="#carousel1" data-slide-to="2"></li> </ol> <!-- 呈現內容--> <div role="listbox"> <div> <img src="bg.jpeg"> <div> --carousel-caption承載添加的文字等<h3>綠色陽光</h3> <p>陽光心情,你我同行</p> </div> </div> <div> <img src="timg.jpg"> </div> <div> <img src="xx.jpg"> </div> </div> <!-- 左右兩個標籤--> <a href="#carousel1" role="button" data-slide="pre"> <span aria-hidden="true"></span> <span>previous</span> </a> <a href="#carousel1" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>next</span> </a> </div></div>
效果如下:
關於滑動的快慢,你可以直接在div中添加data-interval="2000" 設置2秒切換,但這種方法出現問題就是
當你刷新瀏覽器的時候,必須手動的去點一下左右按鈕,然後才能實現切換,最好的辦法是在javascript裡進行設置。如下代碼所示
<script type="text/javascript"> $(".carousel").carousel({ interval:2000; }) </script>十一、Affix組件
注意:使用position:fixed進行定位,利用data-spy="affix" 結合data-offset來實現監聽,當發生某一事件時,進行偏移。貼碼看下列子:
<div> <!-- 柵格系統進行佈局--> <div> <ul> <li>1111111111</li> <li>222222222</li> <li>3333333333333</li> <li>44444444444</li> <li>555555555</li> <li>6666666666</li> <li>777777777777</li> </ul> </div> <div> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> </div> <div > <ul> <li>1111111111</li> <li>222222222</li> <li>3333333333333</li> <li>44444444444</li> <li>555555555</li> <li>6666666666</li> <li>777777777777</li> </ul> </div></div> <!-- <script src="js/jquery-1.11.3.min.js"></script> 本地的加載文件--><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript"> $('.js-affixed-element-top').affix({ offset:{ }}) $('.js-affixed-element-bottom').affix({ offset:{bottom:200 }---當鼠標滾到最下面時,該div會自動偏移到距離底部200px的地方}) </script>js組件差不多到此結束,學習bootstrap這個框架也差不多結束了,下一篇終結篇,打算自己專門用bootstrap設計一個頁面製作出來,跟大家分享。如果你也正在學習bootstrap框架,歡迎交流學習哈!
如果大家還想深入學習,可以點擊這裡進行學習,再為大家附3個精彩的專題:
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。