2008年5月26日 星期一

[筆記] jQuery-Tabs

這是自己學 jQuery 所寫的第一個功能。



一開始上手有看到 ericsk 的文章,覺得看起來蠻不錯的。第二則有說明 Hello jQuery怎麼寫
function showMsg() {    // 設定 Hello 給 msg 物件
$('#msg').html(' Hello');
}

[節錄]
$ 在 jQuery 裡被定義為 jQuery 物件,
$() 則是用來取得頁面上元件(DOM element)的函式,
傳入的 ‘#msg’ 代表的即是 id 為 msg (跟 CSS 的用法一模一樣),
所以 $('#msg') 整個的意義是:
取得頁面上 id 為 msg 的元件,然後把它變成一個 jQuery 物件。

接著理解他的 DOM概念後,直接看 jQuery UI Tabs這邊,可以很清楚的看到透過指定 div 的 id 與 js code做一個對應: $('#container-1 > ul').tabs();,分頁功能就可以完成。

其中的 Start With Custom Tab,也是個很實用的功能,因為我們在有分頁的頁面,不一定跳過去都是想看到第一個分頁,可能想看到第二或其他分頁的資訊,接著我找到 getUrlParam ,透過在網址上串接變數,即可將分頁 index資訊傳到目的頁,但是需要留意
var index = $(document).getUrlParam("tab");
其中 x會被當成字元,所以得透過 eval()轉成 int!
$('#container > ul').tabs({ selected: eval(index) )});
如此一來,便大公告成。

當然,在 UI Tabs上還有很多其他切換的效果,可以選一個適當的做呈現,以Rotating UI Tabs example為例我覺得挺炫的,那麼配上我上述的 code 該怎麼改呢?只要改成以下

$('#container > ul').tabs({ selected: index , fx: { opacity: 'toggle' }});

這樣子就可以正常 work了!
ps. 原本的 .tabs('rotate', 2000) 是自動切換的秒數,用不到所以拿掉了。

備忘 switch tabs

2 則留言:

dan0605 提到...

你好:

GOOGLE到你的BLOG,你範例中的程式

$('#container > ul').tabs({ selected: eval(index) )});

看起來似乎多了一個)括號,但如果拿掉,竟無法執行.不知原因為何呢?

謝謝分享!

alsuka 提到...

不好意思,之前沒追蹤這邊的回應,所以現在才看到你的訊息。

我想我的確是多了一個括號,正確的對應應該是
$('#container > ul').tabs({ selected: eval(x) });
你可以再試看看!