基于AJAX的Tabs實(shí)現(xiàn)方法

1、基于AJAX的Tabs實(shí)現(xiàn)方法自從上次給側(cè)邊欄安裝了TabPane后, 我就對(duì)此類的網(wǎng)頁應(yīng)用產(chǎn)生了深厚的興趣, 昨天又把blogroll列表折疊了起來. 今天打算再介紹一個(gè)好玩的應(yīng)用: 基于AJAX的Tabs.Demo在這里這是如何實(shí)現(xiàn)的呢? 說來真不好意思, 我介紹的這幾個(gè)應(yīng)用, 代碼沒有一行是自己寫的, 都是把別人做好的東西(Ajax Tabs Content)搬到自己網(wǎng)站上, 就當(dāng)是拋磚引玉了, 呵呵. 讓我們開始吧! 首先下載ajaxtabscontent.zip,與其他的腳本應(yīng)用類似, 要在頁面的head標(biāo)簽之間調(diào)用腳本和相應(yīng)的CSS樣式:然后, 在需要使用Tabs的地方加入以下代碼

2、, 當(dāng)然不能照搬, 改為自己需要的, 并且保證所有涉及到的路徑都能正確訪問:IntroBirdDogCatSea Otter 這些內(nèi)容以非AJAX的方法直接嵌入默認(rèn)標(biāo)簽中./Start Ajax tabs script for UL with id=maintab Separate multiple ids each with a comma.startajaxtabs(maintab)下面我們解釋一些這些代碼中的關(guān)鍵部分: id=maintab, class=shadetabs: ID必須唯一, 它用來指定 UL 元素, class=shadetabs 用來調(diào)用此處的CSS樣式. class

3、=selected: 添加到 LI 標(biāo)簽上用來指定頁面加載時(shí)默認(rèn)處于被選擇狀態(tài)的標(biāo)簽, 與此標(biāo)簽相關(guān)的內(nèi)容也會(huì)自動(dòng)加載. 這個(gè)不是必選項(xiàng). href=page to load: 使用AJAX調(diào)用外部頁面, 可以是.htm, .txt或是.php等等, 如果希望Tab直接調(diào)用默認(rèn)內(nèi)容, 需要使用#default關(guān)鍵字. rel=ajaxcontentarea: 添加在鏈接元素中用來指定同個(gè)ID的DIV容器要裝載的頁面. rev=objects to load: 也添加在鏈接元素用來為外部頁面裝載JS腳本或CSS樣式表, 用逗號(hào)分隔多個(gè)文件. 不是必選項(xiàng). 最后, 在所有AJAX的Tabs內(nèi)容代碼

4、之后調(diào)用startajaxtabs(maintab)函數(shù)來激活腳本, maintab是整個(gè)Tab的ID, 如果在同一個(gè)頁面中想使用多個(gè)Tab, 需要把每個(gè)ID都傳遞給函數(shù), 例如: startajaxtabs(maintab, maintab2)注意: 關(guān)于調(diào)用外部頁面, 只能調(diào)用同一個(gè)域名下的文件, 如果想調(diào)用另個(gè)服務(wù)器上的文件是不可行的.另外, 如果我想點(diǎn)擊一個(gè)鏈接就打開某個(gè)Tab頁面該如何做呢?expandtab(tabcontentid, tabnumber)調(diào)用上面這個(gè)方法就好了, tabcontentid就是ul的ID名稱, tabnumber則是你想打開Tab的序號(hào), 比如想打開第3個(gè), 此處就應(yīng)該寫2, 因?yàn)樾蛱?hào)從0開始. 具體看下面的例子:選擇ID為maintab的面板上第3