首頁 > SEO優化 > Bootstrap3.0學習教程十七:JavaScript插件模態框

Bootstrap3.0學習教程十七:JavaScript插件模態框

2015-04-10 admin SEO優化 0人評論 45214

本文是Bootstrap3.0學習教程系列的第十七篇,完整教程可查看:

這篇文章中我們主要來學習一下JavaScipt插件模態框。在學習模態框之前,我們先來了解一下JavaScript插件吧。

JavaScript插件概覽

3分快3 插件可以單個引入(使用Bootstrap提供的單個*.js文件),或一次性全部引入(使用bootstrap.js或壓縮版的bootstrap.min.js)。

3分快3 不要將兩份文件全部引入

bootstrap.js和bootstrap.min.js同樣是包含了所有插件。區別是:一個沒有壓縮,一個進行了壓縮。

插件之間的依賴

某些插件和CSS組件依賴于其它插件。如果你是單個引入每個插件的,請確保在文檔中檢查插件之間的依賴關系。注意,所有插件都依賴jQuery(也就是說,jQuery必須在所有插件之前引入頁面)。 bower.json文件中列出了所支持的jQuery版本。

Data屬性

你可以僅僅通過data屬性API就能使用所有的Bootstrap插件,無需寫一行JavaScript代碼。這是Bootstrap中的一等API,也應該是你的首選方式。

3分快3 話又說回來,在某些情況下可能需要將此功能關閉。因此,我們還提供了關閉data屬性API的方式,即解除綁定到文檔命名空間上的所有事件data-api。就像下面這樣:

3分快3 $(document).off('.data-api')

3分快3 另外,如果是針對某個特定的插件,只需在data-api前面添加那個插件的名稱作為命名空間,如下:

$(document).off('.alert.data-api')

編程式API

3分快3 我們還提供了所有Bootstrap插件的純JavaScript API。所有公開的API都是支持單獨或鏈式調用的,并且返回其所操作的元素集合(注:和jQuery的調用形式一致)。

3分快3 $(".btn.danger").button("toggle").addClass("fat")

所有方法都可以接受一個可選的option對象作為參數,或者一個代表特定方法的字符串,或者什么也不提供(在這種情況下,插件將會以默認值初始化):

$("#myModal").modal() // 使用默認值初始化 $("#myModal").modal({ keyboard: false }) $("#myModal").modal('show')

每個插件還通過Constructor屬性暴露了其自身的構造器函數:$.fn.popover.Constructor。如果你想獲取某個插件的實例,可以直接從頁面元素內獲取:$('[rel=popover]').data('popover')。

避免沖突

某些時候可能需要將Bootstrap插件與其他UI框架共同使用。在這種情況下,命名空間沖突隨時可能發生。如果不行發生了這種情況,你可以通過調用插件的.noConflict方法恢復原始值。

var bootstrapButton = $.fn.button.noConflict() $.fn.bootstrapBtn = bootstrapButton 事件

Bootstrap為大部分插件所具有的動作提供了自定義事件。一般來說,這些事件都有不定式和過去式兩種動詞形式,例如,不定式形式的動詞表示其在事件開始時被觸發;而過去式動詞表示其在動作直接完畢之后被觸發。

從3.0.0開始,所有的Bootstrap事件都采用了命名空間。

所有以不定式形式的動詞命名的事件都提供了preventDefault功能。這就賦予你在動作開始執行前將其停止的能力。

3分快3 $('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() })

第三方工具庫

Bootstrap官方不提供對第三方JavaScript工具庫的支持3分快3,例如Prototype或jQuery UI。除了.noConflict和采用命名空間的事件,還可能會有兼容性方面的問題,這就需要你自己來處理了

模態框

案例

3分快3 模態框經過了優化,更加靈活,以彈出對話框的形式出現,具有最小和最實用的功能集。

不支持模態框重疊

千萬不要在一個模態框上重疊另一個模態框。要想同時支持多個模態框,需要自己寫額外的代碼來實現。

靜態案例

3分快3 以下模態框包含了模態框的頭、體和一組在放置于底部的按鈕。

<div class="modal fade">

<div class="modal-dialog">

<div class="modal-content">

3分快3 <div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

3分快3 <h4 class="modal-title">Modal title</h4>

</div> <div class="modal-body">

<p>One fine body&hellip;</p>

</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>

3分快3 </div>

</div>

</div>

首先最外層的是model,然后里面嵌套了一個model-dialog,model-dialog里面又嵌套model-content,當中包含“header”、“title”、"footer"。不過運行程序后,模態框沒有顯示出來,暫時還沒找到原因。

動態演示

點擊下面的按鈕即可通過JavaScript啟動一個模態框。此模態框將從上到下、逐漸浮現到頁面前。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

3分快3 <div class="modal-content">

3分快3 <div class="modal-header">

3分快3 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h4 class="modal-title" id="myModalLabel">Modal title</h4>

</div>

3分快3 <div class="modal-body"> One fine body&hellip; </div>

3分快3 <div class="modal-footer">

3分快3 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

3分快3 </div>

3分快3 </div>

</div>

</div>

同樣的,不過首先是一個按鈕,按鈕中添加了兩個data屬性,要設置data-toggle="modal" data-target="#myModal"。

3分快3 然后下面最大的是一個modal,并且給與屬性id賦值為上面button中的data-target ,進行交互。

增強模態框的可訪問性

請確保為.modal添加了role="dialog";aria-labelledby="myModalLabel"屬性指向模態框標題;aria-hidden="true"告訴輔助性工具略過模態框的DOM元素。

3分快3 另外,你還應該為模態框添加描述性信息。為.modal添加aria-describedby屬性用以指向描述信息。

Bootstrap3.0學習教程十七:JavaScript插件模態框  SEO優化  第1張

用法--通過data屬性

3分快3 不需寫JavaScript代碼也可激活模態框。通過在一個起控制器作用的頁面元素(例如,按鈕)上設置data-toggle="modal",并使用data-target="#foo"或href="#foo"指向特定的模態框即可。就像本例中的

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>

用法--通過JavaScript調用

3分快3 只需一行JavaScript代碼,即可通過id myModal調用模態框:

$('#myModal').modal(options)

選項

可以將選項通過data屬性或JavaScript傳遞。對于data屬性,需要將選項名稱放到data-之后,例如data-backdrop=""。

Bootstrap3.0學習教程十七:JavaScript插件模態框  SEO優化  第2張

標簽:

發表評論

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

官方微信公眾號
70755559
09:00 - 22:00
QQ客服: 70755559
客服郵箱: 678128@qq.com
2分快3-推荐 1分快3-官网 好运快3-欢迎您 幸运快3-安全购彩 网投app-Welcome 分分快3app-Home 1分快三平台-3分快3 彩票代理-推荐 五福彩票-官网 彩票大赢家-欢迎您