2009年5月19日 星期二

jQuery UI Tabs


http://www.stilbuero.de/jquery/tabs_3/
doc: http://docs.jquery.com/UI/Tabs

以下節錄自魚乾的blog http://kevyu.blogspot.com/2008/03/jquery-tabsversion-3.html


利用jQuery完成的tab
比上一版多了
1.Tabs Extensions
2.Rotating tabs 會輪播
3.Nested tabs 就多層tab

除了多新功能外
原本的使用上也更加方便
也解決了一些問題
原來只能固定用#container-n
這些原先設定的div現在都可以自訂了
加上更操作上都以jQuery的存取方式設計
coding上更加便利...只要copy...paste.....

問題:
取得目前選取的tab
官網提供的方法
var $tabs = $('#example').tabs().data('selected.tabs');
只能在ie跑,firefox會印出undefine (後記...怎麼好像又可以= =")(後記..原來有偷改)
即然這樣就自己寫吧,但不能在ie跑...
因為ie會自動幫href加絕對路徑....更
var currentTab; //記錄目前選到的tab
$('#container-bag > ul').tabs({
select: function(ui) {
currentTab="#"+ui.panel.id;
}
});
$("#example > ul > li").find("a[@href="+currentTab+"]").text();



*取得目前tab名
var selected =$('#container-tab').tabs().data('selected.tabs');
var tabName=$("#container-tab" > ul > li").eq(selected).text();

上述方法可以取到值,但會導致tab無法切換了
所以就照著官網寫的方法
var selected =$('#container-tab > ul').data('selected.tabs');


**自訂jTab**

jTab裡也可以加圖示進去
把編輯、刪除放在同一格裡還滿實用的
不過似乎jtab多了一層,使得點擊圖示會trigger,但cursor不會改變 ... 慘念
前面也可加個「新增」鈕,當然要自己加囉

沒有留言:

張貼留言