原文:bootstrap插件學習-bootstrap.tab.js

先看bootstrap tab.js的結構 HTML結構 先從初始化開始 讓body監聽a標簽的click事件,並且阻止其冒泡,調用了jQuery的原型方法tab。 這個結構跟之前的幾個插件差不多,不過最后它是執行了show方法的,進入構造器 將對象封裝成構造器實例的一個屬性。接下來我們執行show方法 根據標簽a的data target屬性或是其href找到對應的id的dom節點。最后我們執行了 ...

2013-08-22 09:02 7 8335 推薦指數:

查看詳情

bootstrap插件學習-bootstrap.tab.js(讀碼)

先看bootstrap-tab.js的結構 var Tab = function ( element ) {} //構造器 Tab.prototype ={} //構造器的原型 $.fn.tab = function ( option ){} //jQuery原型上自定義的方法 ...

Mon Mar 13 15:14:00 CST 2017 0 4828
bootstrap插件學習-bootstrap.modal.js

先從bootstrap.modal.js的結構看起。 其HTML結構 我們開始過一遍插件源碼:從初始化開始 根據HTML提供的結構,$target為a標簽所指向的彈出框div的Jquery對象。另外$this.data()存在數據,為{toggle ...

Tue Aug 20 01:31:00 CST 2013 2 13935
bootstrap插件學習-bootstrap.dropdown.js

先看bootstrap.dropdown.js的結構 HTML結構 從初始化即時函數開始 這里需要注意事件的冒泡,一般我們點擊頁面上的一個按鈕(或者一個可見的標簽時)時,現在你點擊的這個標簽上先觸發事件,如果你這個標簽上有事件的話,觸發完之后,它會 ...

Tue Aug 20 18:24:00 CST 2013 0 4873
bootstrap插件學習-bootstrap.tooltip.js

先看bootstrap-tooltip.js的結構 因為tooltip插件的使用比較多,調用者比較雜,源碼中沒有給出初始化的步驟,在看源碼的過程中,我們手動添加初始化。 在script標簽部分加入以上代碼,我們可以鼠標移入'卡梅隆'時顯示提示框 ...

Fri Aug 23 17:06:00 CST 2013 5 9162
bootstrap插件學習-bootstrap.alert.js

我們先看bootstrap.alert.js的結構 HTML結構 alert插件,比較簡單。我們先從初始化開始 body去監聽所有擁有data-dismiss = 'alert'屬性的標簽,並為它們綁定上Alert原型上的close方法,注意 ...

Mon Aug 26 17:16:00 CST 2013 2 6991
bootstrap插件學習-bootstrap.carousel.js

先看bootstrap.carousel.js的結構 HTML結構 先從初始化開始 根據HTML結構,為擁有data-slide屬性的標簽綁定click事件,如果我們點擊向左按鈕,代碼會獲取該標簽的href,並獲取整個控件的對象。接着讓整個控件調用 ...

Wed Aug 28 17:06:00 CST 2013 5 6686
bootstrap插件學習-bootstrap.scrollspy.js

先看bootstrap.dropdown.js的結構 HTML結構 我們從初始化開始 根據HTML結構,這個很簡單,獲取body對象,並執行jQuery原型上的方法scrollspy,其中$spy.data()中的值,前幾次的源碼分析,這個值已經 ...

Wed Aug 21 17:11:00 CST 2013 1 3856
bootstrap插件學習-bootstrap.popover.js

先看bootstrap.popover.js的結構 個人感覺bootstrap.popover.jsbootstrap.tooltip.js的放大版。。源碼處很多相似的地方,並且bootstrap.popover.js依賴與bootstrap.tooltip.js插件 ...

Sat Aug 24 23:45:00 CST 2013 2 6567
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM