BootStrap3.0學習--JavaScript 插件

時間 2020-05-09

標籤 bootstrap3.0 bootstrap 學習 javascript 插件欄目 Bootstarp 简体版

原文原文鏈接

概覽

1.單個仍是所有引入：能夠單個引入bootstrap.js 和 bootstrap.min.js，也能夠所有引入，兩者都包含了全部插件，你在使用時，只需選擇一個引入頁面就能夠了。javascript

2.data屬性：經過 data 屬性 API 就能使用全部的 Bootstrap 插件，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應該是你的首選方式。html

當須要關閉的時候$(document).off('.data-api')java

3.編程的APIios

$('.btn.danger').button('toggle').addClass('fat');

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

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

4.避免命名空間衝突spring

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

5.事件：從 3.0.0 版本開始，全部 Bootstrap 事件的名稱都採用命名空間方式。編程

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

6.未對禁用 JavaScript 的瀏覽器提供補救措施bootstrap

Bootstrap 插件未對禁用 JavaScript 的瀏覽器提供補救措施。若是你對這種狀況下的用戶體驗很關心的話，請添加<noscript> 標籤向你的用戶進行解釋（並告訴他們如何啓用 JavaScript），或者按照你本身的方式提供補救措施。api

過渡效果

1.transition.js，bootstrap.js包含此插件。瀏覽器

模態框

1.可調用modal.js，bootstrap.js包含此插件。

2.實例

<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" 
               aria-hidden="true">×
            </button>
            <h4 class="modal-title" id="myModalLabel">
               模態框（Modal）標題
            </h4>
         </div>
         <div class="modal-body">
            點擊關閉按鈕檢查事件功能。
         </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 -->
<script>
   $(function () { $('#myModal').modal('hide')})});
</script>
<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('嘿，我據說您喜歡模態框...');})
   });
</script>

3.選項

選項名稱	類型/默認值	Data 屬性名稱	描述
backdrop	boolean 或 string 'static' 默認值：true	data-backdrop	指定一個靜態的背景，當用戶點擊模態框外部時不會關閉模態框。
keyboard	boolean 默認值：true	data-keyboard	當按下 escape 鍵時關閉模態框，設置爲 false 時則按鍵無效。
show	boolean 默認值：true	data-show	當初始化時顯示模態框。
remote	path 默認值：false	data-remote	使用 jQuery .load 方法，爲模態框的主體注入內容。若是添加了一個帶有有效 URL 的 href，則會加載其中的內容。以下面的實例所示： <a data-toggle="modal" href="remote.html" data-target="#modal">請點擊我</a>

4.方法

方法	描述	實例
Options: .modal(options)	把內容做爲模態框激活。接受一個可選的選項對象。	$('#identifier').modal({ keyboard: false })
Toggle: .modal('toggle')	手動切換模態框。	$('#identifier').modal('toggle')
Show: .modal('show')	手動打開模態框。	$('#identifier').modal('show')
Hide: .modal('hide')	手動隱藏模態框。	$('#identifier').modal('hide')

5.事件

事件	描述	實例
show.bs.modal	在調用 show 方法後觸發。	$('#identifier').on('show.bs.modal', function () { // 執行一些動做... })
shown.bs.modal	當模態框對用戶可見時觸發（將等待 CSS 過渡效果完成）。	$('#identifier').on('shown.bs.modal', function () { // 執行一些動做... })
hide.bs.modal	當調用 hide 實例方法時觸發。	$('#identifier').on('hide.bs.modal', function () { // 執行一些動做... })
hidden.bs.modal	當模態框徹底對用戶隱藏時觸發。	$('#identifier').on('hidden.bs.modal', function () { // 執行一些動做... })

6.可選尺寸：模態框提供了兩個可選尺寸，經過爲 .modal-dialog 增長一個樣式調整類實現。.bs-example-modal-lg和bs-example-modal-sm

<!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ... </div> </div> </div>

7.data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這裏它被用於關閉模態窗口。

1.dropdown.js

2.經過 data 屬性：向連接或按鈕添加 data-toggle="dropdown" 來切換下拉菜單

3.方法：下拉菜單切換有一個簡單的方法用來顯示或隱藏下拉菜單。

4.帶有標籤頁的下拉菜單

<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
         Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
         <li><a href="#">Swing</a></li>
         <li><a href="#">jMeter</a></li>
         <li><a href="#">EJB</a></li>
         <li class="divider"></li>
         <li><a href="#">分離的連接</a></li>
      </ul>
   </li>
   <li><a href="#">PHP</a></li>
</ul>

5.導航條內的下拉菜單

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div id="myexample">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle">Java <b 
               class="caret"></b></a>
               <ul class="dropdown-menu">
                  <li><a id="action-1" href="#">
                     jmeter</a>
                  </li>
                  <li><a href="#">EJB</a></li>
                  <li><a href="#">Jasper Report</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分離的連接</a></li>
                  <li class="divider"></li>
                  <li><a href="#">另外一個分離的連接</a></li>
               </ul>
            </li>
         </ul>
      </div>
   </nav>
</div>

滾動監聽（Scrollspy）插件

1.scrollspy.js

2.滾動監聽（Scrollspy）插件，即自動更新導航插件，會根據滾動條的位置自動更新對應的導航目標。

3.實例

<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
   <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 class="active"><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>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0" 
   style="height:200px;overflow:auto; position: relative;">
   <div class="section">
      <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
         &times; 刪除該部分</a></small>
      </h4>
      <p>iOS 是一個由蘋果公司開發和發佈的手機操做系統。最初是於 2007 年首次發佈 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操做系統是用在蘋果電腦上，iOS 是蘋果的移動版本。</p>
   </div>
   <div class="section">
      <h4 id="svn">SVN<small></small></h4>
      <p>Apache Subversion，一般縮寫爲 SVN，是一款開源的版本控制系統軟件。Subversion 由 CollabNet 公司在 2000 年建立。可是如今它已經發展爲 Apache Software Foundation 的一個項目，所以擁有豐富的開發人員和用戶社區。</p>
   </div>
   <div class="section">
      <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
         &times; 刪除該部分</a></small>
      </h4>
      <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。</p>
   </div>
   <div class="section">
      <h4 id="ejb">EJB</h4>
      <p>Enterprise Java Beans（EJB）是一個建立高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（好比 JBOSS、Web Logic 等）的 J2EE 上。</p>
   </div>
   <div class="section">
      <h4 id="spring">Spring</h4>
      <p>Spring 框架是一個開源的 Java 平臺，爲快速開發功能強大的 Java 應用程序提供了完備的基礎設施支持。</p>
      <p>Spring 框架最初是由 Rod Johnson 編寫的，在 2003 年 6 月首次發佈於 Apache 2.0 許可證下。</p>
   </div>
</div>
<span id="activeitem" style="color:red;"></span>
<script type="text/javascript">
   $(function(){
      removeSection = function(e) {
      $(e).parents(".section").remove();
      $('[data-spy="scroll"]').each(function () {
          var $spy = $(this).scrollspy('refresh')
      });
   }
   $("#myScrollspy").scrollspy();
   $('#myScrollspy').on('activate.bs.scrollspy', function () {
      var currentItem = $(".nav li.active > a").text();
      $("#activeitem").html("目前您正在查看 - " + currentItem);
   })
});
</script>

標籤頁（Tab）插件

1.bootstrap.js

2.若是須要爲標籤頁設置淡入淡出效果，請添加 .fade 到每一個 .tab-pane 後面。第一個標籤頁必須添加 .in 類，以便淡入顯示初始內容。

3.實例

<hr>
   <p class="active-tab"><strong>激活的標籤頁</strong>：<span></span></p>
   <p class="previous-tab"><strong>前一個激活的標籤頁</strong>：<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#home" data-toggle="tab">
      W3Cschool Home</a></li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" 
         data-toggle="dropdown">
         Java <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
         <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
         <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
      </ul>
   </li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>W3Cschoool菜鳥教程是一個提供最新的web技術站點，本站免費提供了建站相關的技術文檔，幫助廣大web技術愛好者快速入門並創建本身的網站。菜鳥先飛早入行——學的不只是技術，更是夢想。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一個由蘋果公司開發和發佈的手機操做系統。最初是於 2007 年首次發佈 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操做系統是用在蘋果電腦上，iOS 是蘋果的移動版本。</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans（EJB）是一個建立高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（好比 JBOSS、Web Logic 等）的 J2EE 上。
      </p>
   </div>
</div>
<script>
   $(function(){
      $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      // 獲取已激活的標籤頁的名稱
      var activeTab = $(e.target).text(); 
      // 獲取前一個激活的標籤頁的名稱
      var previousTab = $(e.relatedTarget).text(); 
      $(".active-tab span").html(activeTab);
      $(".previous-tab span").html(previousTab);
   });
});
</script>