[筆記] jQuery-tablesorter

這是在撰寫系統時想到可以派上用場的功能，同樣的除了 include jquery.js 外，只要多寫幾行 js，配上 html tag ，就可以完成以前可能要寫數十行程式的功能..

參考的來源在此 Flexible client-side table sorting，只要對於 jQuery 有點認識了，相信瀏覽過就知道怎麼寫了。

這邊做一些重點摘要：
1. include .js 檔
2. 定義 table id (經過測試，不透過id jQuery 也可以找到 table，可能是多 table 時才有差)
3. 新增 table 欄位標籤 ，分成 THEAD與 TBODY，並且要有 th tag(這些在撰寫一般Html都是會被忽略的)，如此一來 jQuery 才知道要對哪些欄位來進行操作。
4. 撰寫 js function

$(document).ready(function()
  {
      $("#myTable").tablesorter();
  }
);

這樣子就差不多啦，也可以套用他的 theme，顯示不同的風格。在table sorter的背景圖示部份，是在 css裡指定，把 style.css 打開來看就會知道他怎麼指定個欄位與其動作樣式啦！(thead背景圖片路徑，表格的字體樣式置中等細節，都在這邊完成。)

[筆記] 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

[學習資源] jQuery

輔助 Ajax 功能效果的套件有不少，會選這個的原因之一是承接的系統，是用這個做當前端顯示，於是藉由這個機會好好摸熟吧！

其他套有機會再多接觸來比較看看。

從摸索到上手找了不少參考資料，做一下整理吧！

#教學類
jQuery Tutorials for Designers(英)
Learning jQuery(英)
Easy Ajax with jQuery(簡)
jQuery查詢手冊(簡)

#使用心得類
jQuery Selector Test
jQuery神奇的選擇器(Selector)
jQuery 教學 - 基礎篇 (上一層還有篇文章)
jQuery, I LOVE YOU
jQuery some example (一些心得筆記)


#文件查詢類
API查詢(版本非最新)
官方文件