天天看點

手動實作jQuery Tools裡面tab功能

平時開發中用的javascript類庫都是

jquery,用到插件或者第三方類庫能從jquery tools裡面找到,基本不用其他的。當然有時同僚喜歡使用jquery

ui裡面的插件。并且jquery tools裡面的插件和jquery

ui裡面的插件還會出現沖突。這個事情就不舒服了。不過基本開發之前就确定好用哪個類庫,免得後期開發中因為沖突的增加,增加項目的開發周期和開發成本。

當然如果你掌握好jquery tools裡面的插件,有些功能和效果很快就開發好了。之前一個項目,就隻使用了jquery

明:公司一個項目使用的asp.net mvc 1.0,jquery版本是visual

studio建立項目時自帶的版本。1.4.2。然後項目中使用到一個拖拽功能,以前開發的同僚估計也隻找到了基于jquery

1.4.2的第三方類庫,我沒有具體去分析這個拖拽插件。現在項目要進行改版更新,增加了一個tab功能,我平時用jquery

tools用的多,首先想到是用jquery tools裡面的tab插件。但是jquery

。先說明一下,我之前也沒有解決過一個項目中用到不同版本的jquery問題,然後我就在網上搜尋解決方法。但是基本上是把老版本放在一個變量中,然後使

用$.noconflict(true)方法。但是特殊的是jquery tools貌似用不了這個方法把高版本的jquery傳入到類庫中。

手動實作jQuery Tools裡面tab功能

點選不同tab,高亮目前的tab背景,然後下面顯示相對應的内容。樣式和布局盡可能利用jquery toolst提供的,代碼如下所示,這裡主要說一下this的使用和jquery中index()和eq()函數的使用。

代碼相對比較簡單。在開發過程有2個問題,第一需要知道目前點選了那個tab,也就是最上

面的a标簽。第二個如何去指定的内容div顯示。$(this)就是表明目前點選的哪個元素,是以此時就是目前點選的哪個a标

簽。$(this).parent()就是目前點選a标簽的父級元素。通過chrome檢視如下圖所示:

手動實作jQuery Tools裡面tab功能

$(".panes .panesitem").eq(currenttab)此時currenttab為1,是以代碼相當于$(".panes .panesitem").eq(1),其實$(".panes .panesitem")傳回的是一個元素集合,eq(1)表明從0開始計算,為1的元素被選中。這也正是我要達到的效果。點選上面的tab,顯示下面對應的tab content。

繼續閱讀