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不會改變 ... 慘念
前面也可加個「新增」鈕，當然要自己加囉

flot - plot with jQuery

http://code.google.com/p/flot/

以下節錄自魚乾的blog http://kevyu.blogspot.com/2008/03/google-code-flot.html


利用jQuery完成的圖表
也不用設定css，而是透過程式裡的參數
這點滿不錯的，免得影響到其他的設定
也滿容易上手的...
雖然偶爾還是卡住... >"<

*自訂x座標文字tick
//1.先做tick array
var titleName = [];
for(i){
//依display順序填入array
titleName.push([i, title_Name])
}

//2.再設定x座標
xaxis: {
min: 0,
ticks: titleName
}


常見問題：
卡住的地方
flot透過一個id名為placeholder的div裡做圖表
雖然是在html裡下的id，但似乎在google裡的js檔還是有靜態命稱
在js檔裡是沒找到placeholder，但當更改命名時，再透過$.plot($("#divName")
就畫不出來，但只要名稱一樣就沒問題

*隱藏圖表問題
如果將圖表隱藏後，得先顯示才能畫
否則Y軸的title會"黏"在原點的Y軸上
或出現錯誤息：throw一個錯誤未handle

jQuery Treeview

Doc & Demo: http://docs.jquery.com/Plugins/Treeview/treeview

jQuery Grid

也是用在表格的，但功能比tablesorter強大很多..

Home: http://www.trirand.com/blog/
Demo: http://trirand.com/jqgrid/jqgrid.html
Doc: http://www.secondpersonplural.ca/jqgriddocs/index.htm

以下引用自魚乾的blog http://kevyu.blogspot.com/2008/07/jqgrid.html

3.environment配置
有3個地方需要調整

(1)js的路徑
在jquery.jqGrid.js裡，有個pathtojsfiles變數
var pathtojsfiles = "js/"; // need to be ajusted
此為設定要載入的js檔路徑

(2)CSS路徑

href就指到預設的位置
<link rel="stylesheet" type="text/css" media="screen" href="lib/jqGrid/themes/basic/grid.css">
(3)圖檔路徑
在實作時，要給圖片的位置

var gridimgpath = 'themes/basic/images'; //預設的圖片
jQuery("#tbRecordList").jqGrid({
colNames: ['日期', '分數',
...
imgpath: gridimgpath, //設定gridimgpath
});


**有的沒的
//清空grid內容
$("#_TableName").clearGridData();

**備註
1.每個欄位長度至少要60以上，不然排序的icon(遞增，遞減)會看不見 (新版的不會了)
2.當遇到p.mutliselect是null時，代表設定table id不一致或未啟動jqGrid()的設定
3.利用jquery.load進來的頁面，如果也有include jquery.js會導致無法使用jqgrid的method,

[jQuery] tablesorter

http://tablesorter.com/docs/

一個jQuery提供的表格服務
可以做sorting、分頁，還可以指定一頁要顯示幾筆資料

使用方法:
把js檔和CSS都import進來
(若要使用分頁的話，記得import tablesorter.pager的CSS和js)
然後將table分成和兩部份
裡面是表格標頭，用成的方式
則是把資料都抓進來

宣告方式則是這樣:
$(function () {
$("#myTable").tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});

*<2010/04/08> 補充一下 如果在表格中有某行有colspan或rawspan就無法使用