Bootstrap插件
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap插件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1 BootStrap插件使用規(guī)則
1.1 單個(gè)引入
JavaScript 插件可以單個(gè)引入（使用 Bootstrap 提供的單個(gè)?*.js?文件），或者一次性全部引入（使用?bootstrap.js?或壓縮版的?bootstrap.min.js）。
某些插件和 CSS 組件依賴于其它插件。如果你是單個(gè)引入每個(gè)插件的，請(qǐng)確保在文檔中檢查插件之間的依賴關(guān)系。注意，所有插件都依賴 jQuery （也就是說，jQuery必須在所有插件之前引入頁(yè)面）。?bower.json?文件中列出了 Bootstrap 所支持的 jQuery 版本。
1.2 data屬性
你可以僅僅通過 data 屬性 API 就能使用所有的 Bootstrap 插件，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應(yīng)該是你的首選方式。
話又說回來，在某些情況下可能需要將此功能關(guān)閉。因此，我們還提供了關(guān)閉 data 屬性 API 的方法，即解除以?data-api?為命名空間并綁定在文檔上的事件。就像下面這樣：
$(document).off('.data-api')另外，如果是針對(duì)某個(gè)特定的插件，只需在?data-api?前面添加那個(gè)插件的名稱作為命名空間，如下：
$(document).off('.alert.data-api')1.3 編程方式的 API
我們?yōu)樗?Bootstrap 插件提供了純 JavaScript 方式的 API。所有公開的 API 都是支持單獨(dú)或鏈?zhǔn)秸{(diào)用方式，并且返回其所操作的元素集合（注：和jQuery的調(diào)用形式一致）。
$('.btn.danger').button('toggle').addClass('fat')所有方法都可以接受一個(gè)可選的 option 對(duì)象作為參數(shù)，或者一個(gè)代表特定方法的字符串，或者什么也不提供（在這種情況下，插件將會(huì)以默認(rèn)值初始化）：
$('#myModal').modal() // 以默認(rèn)值初始化 $('#myModal').modal({ keyboard: false }) // initialized with no keyboard $('#myModal').modal('show') // 初始化后立即調(diào)用 show 方法每個(gè)插件還通過?Constructor?屬性暴露了其原始的構(gòu)造函數(shù)：$.fn.popover.Constructor。如果你想獲取某個(gè)插件的實(shí)例，可以直接通過頁(yè)面元素獲取：$('[rel="popover"]').data('popover')。
默認(rèn)設(shè)置
每個(gè)插件都可以通過修改其自身的?Constructor.DEFAULTS?對(duì)象從而改變插件的默認(rèn)設(shè)置：
$.fn.modal.Constructor.DEFAULTS.keyboard = false // 將模態(tài)框插件的 `keyboard` 默認(rèn)選參數(shù)置為 false1.4 避免命名空間沖突
某些時(shí)候可能需要將 Bootstrap 插件與其他 UI 框架共同使用。在這種情況下，命名空間沖突隨時(shí)可能發(fā)生。如果不幸發(fā)生了這種情況，你可以通過調(diào)用插件的?.noConflict?方法恢復(fù)其原始值。
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality1.5 事件
Bootstrap 為大部分插件所具有的動(dòng)作提供了自定義事件。一般來說，這些事件都有不定式和過去式兩種動(dòng)詞的命名形式，例如，不定式形式的動(dòng)詞（例如?show）表示其在事件開始時(shí)被觸發(fā)；而過去式動(dòng)詞（例如?shown?）表示在動(dòng)作執(zhí)行完畢之后被觸發(fā)。
從 3.0.0 版本開始，所有 Bootstrap 事件的名稱都采用命名空間方式。
所有以不定式形式的動(dòng)詞命名的事件都提供了?preventDefault?功能。這就賦予你在動(dòng)作開始執(zhí)行前將其停止的能力。
$('#myModal').on('show.bs.modal', function (e) {if (!data) return e.preventDefault() // 阻止模態(tài)框的展示 })1.6 版本號(hào)
每個(gè) Bootstrap 的 jQuery 插件的版本號(hào)都可以通過插件的構(gòu)造函數(shù)上的?VERSION?屬性獲取到。例如工具提示框（tooltip）插件：
$.fn.tooltip.Constructor.VERSION // => "3.3.7"2 過渡效果 transition.js
2.1 關(guān)于過渡效果
對(duì)于簡(jiǎn)單的過渡效果，只需將?transition.js?和其它 JS 文件一起引入即可。如果你使用的是編譯（或壓縮）版的?bootstrap.js?文件，就無需再單獨(dú)將其引入了。
2.3 包含的內(nèi)容
Transition.js 是針對(duì)?transitionEnd?事件的一個(gè)基本輔助工具，也是對(duì) CSS 過渡效果的模擬。它被其它插件用來檢測(cè)當(dāng)前瀏覽器對(duì)是否支持 CSS 的過渡效果。
2.4 禁用過度效果
通過下面的 JavaScript 代碼可以在全局范圍禁用過渡效果，并且必須將此代碼放在?transition.js?（或?bootstrap.js?或?bootstrap.min.js）后面，確保在 js 文件加載完畢后再執(zhí)行下面的代碼：
$.support.transition = false3 模態(tài)框 modal.js
務(wù)必將模態(tài)框的 HTML 代碼放在文檔的最高層級(jí)內(nèi)（也就是說，盡量作為 body 標(biāo)簽的直接子元素），以避免其他組件影響模態(tài)框的展現(xiàn)和/或功能。
3.1 模態(tài)框定義
<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>3.2 按鈕
<!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>3.3 模態(tài)框尺寸
<!-- 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"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> ... </div> </div> </div> <!-- Small modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> ... </div> </div> </div>3.4 禁止動(dòng)畫效果
如果你不需要模態(tài)框彈出時(shí)的動(dòng)畫效果（淡入淡出效果），刪掉?.fade?類即可。
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..."> ... </div>3.5 模態(tài)框中使用柵格系統(tǒng)
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div> <div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->3.6 基于觸發(fā)器按鈕的不同模態(tài)內(nèi)容
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> ...more buttons... <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div> $('#exampleModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // Button that triggered the modal var recipient = button.data('whatever') // Extract info from data-* attributes // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. var modal = $(this) modal.find('.modal-title').text('New message to ' + recipient) modal.find('.modal-body input').val(recipient) })3.7 通過JavaScript處理模態(tài)框
打開
$('#myModal').modal(options)參數(shù)
| backdrop | boolean 或 字符串?'static' | true | I指定一個(gè)靜態(tài)的背景，當(dāng)用戶點(diǎn)擊模態(tài)框外部時(shí)不會(huì)關(guān)閉模態(tài)框。 |
| keyboard | boolean | true | 鍵盤上的 esc 鍵被按下時(shí)關(guān)閉模態(tài)框。 |
| show | boolean | true | 模態(tài)框初始化之后就立即顯示出來。 |
| remote | path | false | This option is deprecated since v3.3.0 and has been removed in v4.?We recommend instead using client-side templating or a data binding framework, or calling?jQuery.loadyourself.如果提供的是 URL，將利用 jQuery 的?load?方法從此 URL 地址加載要展示的內(nèi)容（只加載一次）并插入?.modal-content?內(nèi)。如果使用的是 data 屬性 API，還可以利用?href?屬性指定內(nèi)容來源地址。下面是一個(gè)實(shí)例：<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> |
方法
.modal(options)
將頁(yè)面中的某塊內(nèi)容作為模態(tài)框激活。接受可選參數(shù)?object。
$('#myModal').modal({keyboard: false }).modal('toggle')
手動(dòng)打開或關(guān)閉模態(tài)框。在模態(tài)框顯示或隱藏之前返回到主調(diào)函數(shù)中（也就是，在觸發(fā)?shown.bs.modal?或?hidden.bs.modal?事件之前）。
$('#myModal').modal('toggle').modal('show')
手動(dòng)打開模態(tài)框。在模態(tài)框顯示之前返回到主調(diào)函數(shù)中?（也就是，在觸發(fā)?shown.bs.modal?事件之前）。
$('#myModal').modal('show').modal('hide')
手動(dòng)隱藏模態(tài)框。在模態(tài)框隱藏之前返回到主調(diào)函數(shù)中?（也就是，在觸發(fā)?hidden.bs.modal?事件之前）。
$('#myModal').modal('hide').modal('handleUpdate')
整模態(tài)的定位，以對(duì)抗?jié)L動(dòng)條，以防出現(xiàn)一個(gè)模式，這會(huì)使模態(tài)向左跳
只需要當(dāng)模態(tài)的高度在打開時(shí)改變。
$('#myModal').modal('handleUpdate')事件
Bootstrap 的模態(tài)框類提供了一些事件用于監(jiān)聽并執(zhí)行你自己的代碼。
| show.bs.modal | show?方法調(diào)用之后立即觸發(fā)該事件。如果是通過點(diǎn)擊某個(gè)作為觸發(fā)器的元素，則此元素可以通過事件的?relatedTarget?屬性進(jìn)行訪問。 |
| shown.bs.modal | 此事件在模態(tài)框已經(jīng)顯示出來（并且同時(shí)在 CSS 過渡效果完成）之后被觸發(fā)。如果是通過點(diǎn)擊某個(gè)作為觸發(fā)器的元素，則此元素可以通過事件的?relatedTarget?屬性進(jìn)行訪問。 |
| hide.bs.modal | hide?方法調(diào)用之后立即觸發(fā)該事件。 |
| hidden.bs.modal | 此事件在模態(tài)框被隱藏（并且同時(shí)在 CSS 過渡效果完成）之后被觸發(fā)。 |
| loaded.bs.modal | 從遠(yuǎn)端的數(shù)據(jù)源加載完數(shù)據(jù)之后觸發(fā)該事件。 |
4 下拉菜單 dropdown.js
4.1 JavaScript調(diào)用
$('.dropdown-toggle').dropdown()方法
$().dropdown('toggle')
Toggles the dropdown menu of a given navbar or tabbed navigation.
事件
| show.bs.dropdown | This event fires immediately when the show instance method is called. |
| shown.bs.dropdown | This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). |
| hide.bs.dropdown | This event is fired immediately when the hide instance method has been called. |
| hidden.bs.dropdown | This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). |
5 滾動(dòng)監(jiān)聽 scrollspy.js
滾動(dòng)監(jiān)聽插件是用來根據(jù)滾動(dòng)條所處的位置來自動(dòng)更新導(dǎo)航項(xiàng)的。滾動(dòng)導(dǎo)航條下面的區(qū)域并關(guān)注導(dǎo)航項(xiàng)的變化。下拉菜單中的條目也會(huì)自動(dòng)高亮顯示。
依賴 Bootstrap 的導(dǎo)航組件
滾動(dòng)監(jiān)聽插件依賴 Bootstrap 的導(dǎo)航組件用于高亮顯示當(dāng)前激活的鏈接。
無論何種實(shí)現(xiàn)方式，滾動(dòng)監(jiān)聽都需要被監(jiān)聽的組件是?position: relative;?即相對(duì)定位方式。大多數(shù)時(shí)候是監(jiān)聽?<body>?元素
5.1 基本調(diào)用
body {position: relative; } <body data-spy="scroll" data-target="#navbar-example"> ... <div id="navbar-example"> <ul class="nav nav-tabs" role="tablist"> ... </ul> </div> ... </body>5.2 JavaScript調(diào)用
$('body').scrollspy({ target: '#navbar-example' })方法
.scrollspy('refresh')
當(dāng)使用滾動(dòng)監(jiān)聽插件的同時(shí)在 DOM 中添加或刪除元素后，你需要像下面這樣調(diào)用此刷新（ refresh） 方法：
$('[data-spy="scroll"]').each(function () {var $spy = $(this).scrollspy('refresh') })參數(shù)
可以通過 data 屬性或 JavaScript 傳遞參數(shù)。對(duì)于 data 屬性，其名稱是將參數(shù)名附著到?data-?后面組成，例如?data-offset=""。
| offset | number | 10 | 計(jì)算滾動(dòng)位置時(shí)相對(duì)于頂部的偏移量（像素?cái)?shù)）。 |
事件
| activate.bs.scrollspy | 每當(dāng)一個(gè)新條目被激活后都將由滾動(dòng)監(jiān)聽插件觸發(fā)此事件。 |
6 標(biāo)簽頁(yè) tab.js
6.1 基本使用
<div><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> <div role="tabpanel" class="tab-pane" id="messages">...</div> <div role="tabpanel" class="tab-pane" id="settings">...</div> </div> </div>6.2 Fade特效
<div class="tab-content"><div role="tabpanel" class="tab-pane fade in active" id="home">...</div> <div role="tabpanel" class="tab-pane fade" id="profile">...</div> <div role="tabpanel" class="tab-pane fade" id="messages">...</div> <div role="tabpanel" class="tab-pane fade" id="settings">...</div> </div>6.3 JavaScript調(diào)用
$('#myTabs a').click(function (e) {e.preventDefault()$(this).tab('show') }) $('#myTabs a[href="#profile"]').tab('show') // Select tab by name $('#myTabs a:first').tab('show') // Select first tab $('#myTabs a:last').tab('show') // Select last tab $('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)方法
$().tab
該方法可以激活標(biāo)簽頁(yè)元素和內(nèi)容容器。標(biāo)簽頁(yè)需要用一個(gè)?data-target?或者一個(gè)指向 DOM 中容器節(jié)點(diǎn)的?href。
.tab('show')
Selects the given tab and shows its associated content. Any other tab that was previously selected becomes unselected and its associated content is hidden.?Returns to the caller before the tab pane has actually been shown?(i.e. before the?shown.bs.tabevent occurs).
$('#someTab').tab('show')事件
| show.bs.tab | 該事件在標(biāo)簽頁(yè)顯示時(shí)觸發(fā)，但是必須在新標(biāo)簽頁(yè)被顯示之前。分別使用?event.target?和?event.relatedTarget?來定位到激活的標(biāo)簽頁(yè)和前一個(gè)激活的標(biāo)簽頁(yè)。 | $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // 激活的標(biāo)簽頁(yè) e.relatedTarget // 前一個(gè)激活的標(biāo)簽頁(yè) }) |
| shown.bs.tab | 該事件在標(biāo)簽頁(yè)顯示時(shí)觸發(fā)，但是必須在某個(gè)標(biāo)簽頁(yè)已經(jīng)顯示之后。分別使用?event.target和?event.relatedTarget?來定位到激活的標(biāo)簽頁(yè)和前一個(gè)激活的標(biāo)簽頁(yè)。 | $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // 激活的標(biāo)簽頁(yè) e.relatedTarget // 前一個(gè)激活的標(biāo)簽頁(yè) }) |
7 工具提示 tooltips.js
7.1 基本使用
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>7.2 JavaScript調(diào)用
$('#example').tooltip(options)參數(shù)
| animation | boolean?默認(rèn)值：true | data-animation | 提示工具使用 CSS 漸變?yōu)V鏡效果。 | |||||
| html | boolean?默認(rèn)值：false | data-html | 向提示工具插入 HTML。如果為 false，jQuery 的 text 方法將被用于向 dom 插入內(nèi)容。如果您擔(dān)心 XSS 攻擊，請(qǐng)使用 text。 | |||||
| placement | string\ | function?默認(rèn)值：top | data-placement | 規(guī)定如何定位提示工具（即 top\ | bottom\ | left\ | right\ | auto）。 當(dāng)指定為?auto?時(shí)，會(huì)動(dòng)態(tài)調(diào)整提示工具。例如，如果 placement 是 "auto left"，提示工具將會(huì)盡可能顯示在左邊，在情況不允許的情況下它才會(huì)顯示在右邊。 |
| selector | string?默認(rèn)值：false | data-selector | 如果提供了一個(gè)選擇器，提示工具對(duì)象將被委派到指定的目標(biāo)。 | |||||
| title | string \ | function?默認(rèn)值：'' | data-title | 如果未指定?title?屬性，則 title 選項(xiàng)是默認(rèn)的 title 值。 | ||||
| trigger | string?默認(rèn)值：'hover focus' | data-trigger | 定義如何觸發(fā)提示工具： **click\ | hover \ | focus \ | manual**。您可以傳遞多個(gè)觸發(fā)器，每個(gè)觸發(fā)器之間用空格分隔。 | ||
| delay | number \ | object?默認(rèn)值：0 | data-delay | 延遲顯示和隱藏提示工具的毫秒數(shù) - 對(duì) manual 手動(dòng)觸發(fā)類型不適用。如果提供的是一個(gè)數(shù)字，那么延遲將會(huì)應(yīng)用于顯示和隱藏。如果提供的是對(duì)象，結(jié)構(gòu)如下所示：delay: { show: 500, hide: 100 } | ||||
| container | string \ | false?默認(rèn)值：false | data-container | 向指定元素追加提示工具。 實(shí)例： container: 'body' |
方法
| Options:?.tooltip(options) | 向元素集合附加提示工具句柄。 | $().tooltip(options) |
| Toggle:?.tooltip('toggle') | 切換顯示/隱藏元素的提示工具。 | $('#element').tooltip('toggle') |
| Show:?.tooltip('show') | 顯示元素的提示工具。 | $('#element').tooltip('show') |
| Hide:?.tooltip('hide') | 隱藏元素的提示工具。 | $('#element').tooltip('hide') |
| Destroy:?.tooltip('destroy') | 隱藏并銷毀元素的提示工具。 | $('#element').tooltip('destroy') |
事件
| show.bs.tooltip | 當(dāng)調(diào)用 show 實(shí)例方法時(shí)立即觸發(fā)該事件。 | $('#myTooltip').on('show.bs.tooltip', function () { // 執(zhí)行一些動(dòng)作... }) |
| shown.bs.tooltip | 當(dāng)提示工具對(duì)用戶可見時(shí)觸發(fā)該事件（將等待 CSS 過渡效果完成）。 | $('#myTooltip').on('shown.bs.tooltip', function () { // 執(zhí)行一些動(dòng)作... }) |
| hide.bs.tooltip | 當(dāng)調(diào)用 hide 實(shí)例方法時(shí)立即觸發(fā)該事件。 | $('#myTooltip').on('hide.bs.tooltip', function () { // 執(zhí)行一些動(dòng)作... }) |
| hidden.bs.tooltip | 當(dāng)提示工具對(duì)用戶隱藏時(shí)觸發(fā)該事件（將等待 CSS 過渡效果完成）。 | $('#myTooltip').on('hidden.bs.tooltip', function () { // 執(zhí)行一些動(dòng)作... }) |
8 彈出框 popover.js
8.1 基本使用
基本
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">點(diǎn)我彈出/隱藏彈出框</button>彈出方向
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 左側(cè) </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 頂部 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 底部 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 右側(cè) </button>點(diǎn)擊并讓彈出框消失
通過使用?focus?觸發(fā)器可以在用戶點(diǎn)擊彈出框是讓其消失。
實(shí)現(xiàn)“點(diǎn)擊并讓彈出框消失”的效果需要一些額外的代碼
為了更好的跨瀏覽器和跨平臺(tái)效果，你必須使用?<a>?標(biāo)簽，不能使用?<button>?標(biāo)簽，并且，還必須包含?role="button"?和?tabindex?屬性。
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的彈出框</a>8.2 javaScript調(diào)用
$('#example').popover(options)參數(shù)
可以通過 data 屬性或 JavaScript 傳遞參數(shù)。對(duì)于 data 屬性，將參數(shù)名附著到?data-?后面，例如?data-animation=""。
| animation | boolean?默認(rèn)值：true | data-animation | 向彈出框應(yīng)用 CSS 褪色過渡效果。 | |||||
| html | boolean?默認(rèn)值：false | data-html | 向彈出框插入 HTML。如果為 false，jQuery 的 text 方法將被用于向 dom 插入內(nèi)容。如果您擔(dān)心 XSS 攻擊，請(qǐng)使用 text。 | |||||
| placement | string\ | function?默認(rèn)值：top | data-placement | 規(guī)定如何定位彈出框（即 top\ | bottom\ | left\ | right\ | auto）。 當(dāng)指定為?auto?時(shí)，會(huì)動(dòng)態(tài)調(diào)整彈出框。例如，如果 placement 是 "auto left"，彈出框?qū)?huì)盡可能顯示在左邊，在情況不允許的情況下它才會(huì)顯示在右邊。 |
| selector | string?默認(rèn)值：false | data-selector | 如果提供了一個(gè)選擇器，彈出框?qū)ο髮⒈晃傻街付ǖ哪繕?biāo)。 | |||||
| title | string \ | function?默認(rèn)值：'' | data-title | 如果未指定?title?屬性，則 title 選項(xiàng)是默認(rèn)的 title 值。 | ||||
| trigger | string?默認(rèn)值：'hover focus' | data-trigger | 定義如何觸發(fā)彈出框： **click\ | hover \ | focus \ | manual**。您可以傳遞多個(gè)觸發(fā)器，每個(gè)觸發(fā)器之間用空格分隔。 | ||
| delay | number \ | object?默認(rèn)值：0 | data-delay | 延遲顯示和隱藏彈出框的毫秒數(shù) - 對(duì) manual 手動(dòng)觸發(fā)類型不適用。如果提供的是一個(gè)數(shù)字，那么延遲將會(huì)應(yīng)用于顯示和隱藏。如果提供的是對(duì)象，結(jié)構(gòu)如下所示：delay: { show: 500, hide: 100 } | ||||
| container | string \ | false?默認(rèn)值：false | data-container | 向指定元素追加彈出框。 實(shí)例： container: 'body' |
方法
| Options:?.popover(options) | 向元素集合附加彈出框句柄。 | $().popover(options) |
| Toggle:?.popover('toggle') | 切換顯示/隱藏元素的彈出框。 | $('#element').popover('toggle') |
| Show:?.popover('show') | 顯示元素的彈出框。 | $('#element').popover('show') |
| Hide:?.popover('hide') | 隱藏元素的彈出框。 | $('#element').popover('hide') |
| Destroy:?.popover('destroy') | 隱藏并銷毀元素的彈出框。 | $('#element').popover('destroy') |
事件
| show.bs.popover | 當(dāng)調(diào)用 show 實(shí)例方法時(shí)立即觸發(fā)該事件。 | $('#mypopover').on('show.bs.popover', function () { // 執(zhí)行一些動(dòng)作... }) |
| shown.bs.popover | 當(dāng)彈出框?qū)τ脩艨梢姇r(shí)觸發(fā)該事件（將等待 CSS 過渡效果完成）。 | $('#mypopover').on('shown.bs.popover', function () { // 執(zhí)行一些動(dòng)作... }) |
| hide.bs.popover | 當(dāng)調(diào)用 hide 實(shí)例方法時(shí)立即觸發(fā)該事件。 | $('#mypopover').on('hide.bs.popover', function () { // 執(zhí)行一些動(dòng)作... }) |
| hidden.bs.popover | 當(dāng)工具提示對(duì)用戶隱藏時(shí)觸發(fā)該事件（將等待 CSS 過渡效果完成）。 | $('#mypopover').on('hidden.bs.popover', function () { // 執(zhí)行一些動(dòng)作... }) |
9 警告信息 alert.js
9.1 基本使用
當(dāng)使用?.close?按鈕時(shí)，它必須是?.alert-dismissible?的第一個(gè)子元素，并且在它之前不能有任何文本內(nèi)容。
為關(guān)閉按鈕添加?data-dismiss="alert"?屬性就可以使其自動(dòng)為警告框賦予關(guān)閉功能。關(guān)閉警告框也就是將其從 DOM 中刪除。
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>為了讓警告框在關(guān)閉時(shí)表現(xiàn)出動(dòng)畫效果，請(qǐng)確保為其添加了?.fade?和?.in?類。
9.2 JavaScript調(diào)用
方法
$().alert()
讓警告框監(jiān)聽具有?data-dismiss="alert"?屬性的后裔元素的點(diǎn)擊（click）事件。（如果是通過 data 屬性進(jìn)行的初始化則無需使用）
$().alert('close')
關(guān)閉警告框并從 DOM 中將其刪除。如果警告框被賦予了?.fade?和?.in?類，那么，警告框在淡出之后才會(huì)被刪除。
事件
Bootstrap 的警告框插件對(duì)外暴露了一些可以被監(jiān)聽的事件。
| close.bs.alert | 當(dāng)?close?方法被調(diào)用后立即觸發(fā)此事件。 |
| closed.bs.alert | 當(dāng)警告框被關(guān)閉后（也即 CSS 過渡效果完畢之后）立即觸發(fā)此事件。 |
10 按鈕 button.js
10.1 加載狀態(tài)
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> Loading state </button> <script> $('#myButton').on('click', function () { var $btn = $(this).button('loading') // business logic... $btn.button('reset') }) </script>10.2 獨(dú)立的按鈕切換狀態(tài)
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Single toggle </button>10.3 Checkbox和Radio
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked) </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 2 </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 3 </label> </div> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3 </label> </div>10.4 JavaScript方法
| button('toggle') | 切換按壓狀態(tài)。賦予按鈕被激活的外觀。您可以使用?data-toggle?屬性啟用按鈕的自動(dòng)切換。 | $().button('toggle') |
| .button('loading') | 當(dāng)加載時(shí)，按鈕是禁用的，且文本變?yōu)?button 元素的?data-loading-text?屬性的值。 | $().button('loading') |
| .button('reset') | 重置按鈕狀態(tài)，文本內(nèi)容恢復(fù)為最初的內(nèi)容。當(dāng)您想要把按鈕返回為原始的狀態(tài)時(shí)，該方法非常有用。 | $().button('reset') |
| .button(string) | 該方法中的字符串是指由用戶聲明的任何字符串。使用該方法，重置按鈕狀態(tài)，并添加新的內(nèi)容。 | $().button(string) |
11 折疊 collapse.js
11.1 基本使用
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target </button> <div class="collapse" id="collapseExample"> <div class="well"> ... </div> </div>11.2 手風(fēng)琴菜單
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>It's also possible to swap out?.panel-bodys with?.list-groups.
11.3 JavaScript調(diào)用
$('.collapse').collapse()選項(xiàng)
| parent | selector?默認(rèn)值：false | data-parent | 如果提供了一個(gè)選擇器，當(dāng)可折疊項(xiàng)目顯示時(shí)，指定父元素下的所有可折疊的元素將被關(guān)閉。這與傳統(tǒng)的折疊面板（accordion）的行為類似 - 這依賴于 accordion-group 類。 |
| toggle | boolean?默認(rèn)值：true | data-toggle | 切換調(diào)用可折疊元素。 |
方法
| Options:.collapse(options) | 激活內(nèi)容為可折疊元素。接受一個(gè)可選的 options 對(duì)象。 | $('#identifier').collapse({ toggle: false }) |
| Toggle:.collapse('toggle') | 切換顯示/隱藏可折疊元素。 | $('#identifier').collapse('toggle') |
| Show:.collapse('show') | 顯示可折疊元素。 | $('#identifier').collapse('show') |
| Hide:.collapse('hide') | 隱藏可折疊元素。 | $('#identifier').collapse('hide') |
事件
| show.bs.collapse | 在調(diào)用 show 方法后觸發(fā)該事件。 | $('#identifier').on('show.bs.collapse', function () { // 執(zhí)行一些動(dòng)作... }) |
| shown.bs.collapse | 當(dāng)折疊元素對(duì)用戶可見時(shí)觸發(fā)該事件（將等待 CSS 過渡效果完成）。 | $('#identifier').on('shown.bs.collapse', function () { // 執(zhí)行一些動(dòng)作... }) |
| hide.bs.collapse | 當(dāng)調(diào)用 hide 實(shí)例方法時(shí)立即觸發(fā)該事件。 | $('#identifier').on('hide.bs.collapse', function () { // 執(zhí)行一些動(dòng)作... }) |
| hidden.bs.collapse | 當(dāng)折疊元素對(duì)用戶隱藏時(shí)觸發(fā)該事件（將等待 CSS 過渡效果完成）。 | $('#identifier').on('hidden.bs.collapse', function () { // 執(zhí)行一些動(dòng)作... }) |
12 輪播 carousel.js
12.1 基本使用
<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>12.2 每個(gè)項(xiàng)目的標(biāo)題
<div class="item"><img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div> </div>12.3 JavaScript 調(diào)用
$('.carousel').carousel()選項(xiàng)
| interval | number?默認(rèn)值：5000 | data-interval | 自動(dòng)循環(huán)每個(gè)項(xiàng)目之間延遲的時(shí)間量。如果為 false，輪播將不會(huì)自動(dòng)循環(huán)。 |
| pause | string?默認(rèn)值："hover" | data-pause | 鼠標(biāo)進(jìn)入時(shí)暫停輪播循環(huán)，鼠標(biāo)離開時(shí)恢復(fù)輪播循環(huán)。 |
| wrap | boolean?默認(rèn)值：true | data-wrap | 輪播是否連續(xù)循環(huán)。 |
方法
| .carousel(options) | 初始化輪播為可選的 options 對(duì)象，并開始循環(huán)項(xiàng)目。 | $('#identifier').carousel({ interval: 2000 }) |
| .carousel('cycle') | 從左到右循環(huán)輪播項(xiàng)目。 | $('#identifier').carousel('cycle') |
| .carousel('pause') | 停止輪播循環(huán)項(xiàng)目。 | $('#identifier').carousel('pause') |
| .carousel(number) | 循環(huán)輪播到某個(gè)特定的幀（從 0 開始計(jì)數(shù)，與數(shù)組類似）。 | $('#identifier').carousel(number) |
| .carousel('prev') | 循環(huán)輪播到上一個(gè)項(xiàng)目。 | $('#identifier').carousel('prev') |
| .carousel('next') | 循環(huán)輪播到下一個(gè)項(xiàng)目。 | $('#identifier').carousel('next') |
事件
| slide.bs.carousel | 當(dāng)調(diào)用 slide 實(shí)例方法時(shí)立即觸發(fā)該事件。 | $('#identifier').on('slide.bs.carousel', function () { // 執(zhí)行一些動(dòng)作... }) |
| slid.bs.carousel | 當(dāng)輪播完成幻燈片過渡效果時(shí)觸發(fā)該事件。 | $('#identifier').on('slid.bs.carousel', function () { // 執(zhí)行一些動(dòng)作... }) |
13 附加 affix.js
12.1 基本使用
To easily add affix behavior to any element, just add?data-spy="affix"?to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> ... </div>13.2 JavaScript調(diào)用
Call the affix plugin via JavaScript:
$('#myAffix').affix({offset: {top: 100,bottom: function () { return (this.bottom = $('.footer').outerHeight(true)) } } })選項(xiàng)
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to?data-, as in?data-offset-top="200".
| offset | number \ | function \ | object | 10 | Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object?offset: { top: 10 }?or?offset: { top: 10, bottom: 5 }. Use a function when you need to dynamically calculate an offset. |
| target | selector \ | node \ | jQuery element | the?windowobject | Specifies the target element of the affix. |
方法
$().affix(options)
Activates your content as affixed content. Accepts an optional options?object.
$('#myAffix').affix({offset: 15 })$().affix('checkPosition')
Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The?.affix,?.affix-top, and?.affix-bottom?classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.
$('#myAffix').affix('checkPosition')事件
Bootstrap's affix plugin exposes a few events for hooking into affix functionality.
?
| affix.bs.affix | This event fires immediately before the element has been affixed. |
| affixed.bs.affix | This event is fired after the element has been affixed. |
| affix-top.bs.affix | This event fires immediately before the element has been affixed-top. |
| affixed-top.bs.affix | This event is fired after the element has been affixed-top. |
| affix-bottom.bs.affix | This event fires immediately before the element has been affixed-bottom. |
| affixed-bottom.bs.affix | This event is fired after the element has been affixed-bottom. |
轉(zhuǎn)載于:https://www.cnblogs.com/wangcheng9418/p/9544328.html
總結(jié)
以上是生活随笔為你收集整理的Bootstrap插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java通过FTP服务器上传下载文件的方
- 下一篇： IDEA工具实现反编译操作