[實作] 建構 Ajax連動式選單 @jsp

原本我做連動式選單的方式，是在載入頁面時，就把主，副選項都寫到 js array裡，因此在運作上是純粹 js的對應顯示，並無用到 Ajax 的動態機制。

[web] jQuery/Tab + anchor(錨點)在 IE的跳躍問題

問題是寫完某個具有 jQuery/TAB 功能的頁面，在點擊錨點時，第一次會導致頁面更新(refresh)，而且這個狀況只有在 IE會發生，在 Firebox 跟 Chrome 裡都是運作正常。

補充描述系統的情境，該網頁如果是從別的地方代登入進來的，會接受一個 page的參數，假如是 2，網址最後就會串 #2，透過產生第一頁時讓使用者看到 tab=2 的頁面。

而問題會產生的狀況，假如系統是自己登入的，網址會變 #null，如"在 IE"的情況下，第一次點錨點類link(ex X)，雖然會跳到該區塊，但造成頁面刷新，也就讓使用者原本在看的區快跑掉了。

經過數次交叉比對測試，終於發現解決方式，就是程式在收完參數，判斷如是 null 後，不要在 url串入 #p
ex: xxx.jsp?ooo=xxx&oo=xx#p
不論是p值或是#都不要加入網址，這樣子 IE的問題就解決。

原本懶惰一律加上去網址變數的寫法，因為在 firefox 沒有問題，所以就不理這樣 o.0

[筆記] 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查詢(版本非最新)
官方文件