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

jsp 程式透過 session 取得 hashmap 值

承接的系統，因為需要處理一個比較複雜的資料傳遞，想說試著用 hashmap 看看。日前是卡在傳完後要怎麼引用，經過多番嘗試與查詢，終於踹出來惹。

sample code:

.java
Map list = new HashMap();
ArrayList ar=new ArrayList();
ar.add(new String[]{"101","honda"});
ar.add(new String[]{"102","asuka"});

list.put("100",ar);
request.getSession().setAttribute("Slist",list);

是由 arraylist 串到 hashmap 的資料型態，構成 arraylist 又是 String[]。

.jsp
"${sessionScopeSlist['100'][0][0]}"

在呈現單筆資料，如此可以正確印出「101」
後面的 index如為 ['100'][1][1] 則是印出「asuka」

之前會卡在無法正確引用，應是 'single quotes'，卻一直在試 double quote, [number]組合。

不過原本的系統的資料是有好幾組 key與 value對應，所以顯示部份是包在 foreach 裡，如下：

﹤c:forEach items="${sessionScope.Slist}" var="rowdata">
﹤li> "${rowdata}" ﹤/li>
﹤/c:forEach>

以塞入 99、100 之key 為例，會秀出
- "99=[[Ljava.lang.String;@c2ee15, [Ljava.lang.String;@19cd75a]"
- "100=[[Ljava.lang.String;@c2ee15, [Ljava.lang.String;@19cd75a]"
(物件資訊)

如要指定 string array 的值，或是取 key值寫法就是 .key 與 .value，所以改成這樣子就可以了！

"${rowdata.value[0][0]}"

Vim plugin - taglist

現今除非是已熟悉 command 環境下作業的人，不然大多數 programmer 還是習慣
用個圖形介面的編輯器/IDE，來協助程式撰寫，而如果在某些情況下，
不得不用 unix-like 系統下的 vi來編修程式，也可以考慮這個方便的外掛，
相信使用上會更加便利。

當然，如果是想摸熟 vi編輯器的人，更是不能錯過的一項利器。

操作說明：，輸入`Tlist'，左邊就會出現該程式裡的class、function、variable列表，
藉由 highlight focus可以快速跳到該程式片段，

快速鍵 ctrl-w h 與 ctrl-w l 用來切換 taglist `左列對照視窗'與`編輯視窗'。

使用畫面快照

留意使用前要先裝 ctags (/usr/ports/devel/ctags/)

安裝與設定
http://blog.elleryq.idv.tw/2006/05/vimtaglist.html
http://blog.johnpupu.tw/?p=125

更詳盡的操作請參考

Screen Tool in Unix-Like

現在大多數電腦使用者在作業時，通常會使用多重視窗/分頁的方式進行操作，
比如逛網頁會使用 Firefox 或 IE7 的 multi-Tabs 功能，
上 B會使用 PCman、KKman等軟體方便登入多個站台，
那麼假如我們是要使用工作站，為了安全起見通常是使用支援 ssh 的 putty 工具，
那在這終端機上同樣想要操作多個視窗，有什麼方便的機制呢？

解決方案是使用`Screen'，command中下了這個指令就可以使用了
#常用上手指令 ( ^: ctrl)
^a+c : Creat new screen
^a+z : 丟到背景 //fg: 回前景
^a+a : switch screen between two windows
^a+n : next screen
^a+x : lock screen
^a+0 1 2 .. n : 指定視窗
exit : close window

Tips: 常用指令的可以加到 .cshrc ，讓自己的熱鍵更順手

#參考資料

Wiki解說
unix 上 screen 指令用法
screen 教學

從 ASP.NET 3.5看樣板抽換

是說之前有一段時間沒碰 ASP.NET 了，所以在想網頁架構時，不曉得 .NET這邊是怎麼做 MVC的，找了一些資料來看目前能做到的事。


仔細想想，中文字面上的樣板(Template)抽換有兩種含意，第一個是網頁呈現(View)與後端資料處理的分離，是指在變更版面設計時，其他程式片段(程式邏輯，連接資料)不太需要更動的設計理念，也就是廣泛稱之 MVC的架構，而這個其實在 ASP.NET 3.5已經有支援了！裡面的影片展示蠻詳細的。

另一個層面，則只是探討網頁版面的風格樣式不同(圖片顏色大小等)，實做上的解決方案其實只要透過 ASP.NET Themes and Skins就可以快速切換佈景主題了。

延伸閱讀：
ASP.NET MVC Framework(微軟Web平台的總經理Scott Gu Blog的教學文件)

ASP.NET Themes and Skins 範例
ASP.NET MVC + jQuery + Newtonsoft.Json 快樂的AJAX