JQuery_側邊選單(Side Menu)

最近回到某一個龐大的案子，是使用MapGuide圖台，以前在做系統的時候倒也沒有特別想要在介面上做什麼變化，一直都使用使用Basic Layout來進行開發，雖然版面比較普通，但倒也沒什麼不好用的地方，也就很自然的把時間都花在功能連動上面，前陣子上了Flex的課程，又自己玩了一下Flex接MapGuide的服務，現在回來又要用這個版來做就覺得心裡不太開心；而之前上教育訓練的時候，想問的另一個問題就是，「你是用什麼東西包裝MapGuide的？」，他的回答是jQuery；又因為在前一個案子有使用一個浮動視窗來包裝MapGuide的功能，所以對於不同框架的操作也比較清楚一點；最後，現正執行的案子也有一個需要比較大圖面的需求，所以不管是心情、技術及需求都需要使用一個稍具RIA概念的浮動方式來展現這次的功能頁面，而教育訓練的講師也給了一個答案，就是使用jQuery。

總之，目前的需求是，我想要一個有RIA感覺且可收合不佔版面的功能展現方式，然後要使用jQuery來進行製作。就在這個想法開始萌芽的時候，恰巧看到同事piggy的電腦螢幕滑出了一個看來不錯的側邊選單，原來他也剛好在進行這個測試，只能說人不旺的時候還是有可能發生好事情！

趕快要了原始碼，進行測試。(來源blog，範例)

這是一個如果在搜尋"側邊選單"都會找到的"有名"分享，棒的是他既是側邊隱藏式選單，又擁有一些動畫的效果，而且整個程式碼也不是非常難修改，可以很容易的客制化成自己的，就在我欣喜之虞，利用chrome跟firefox測試，卻發現chrome瀏覽會有收合不全的情況產生，當下真是晴天霹靂勒；與google的短暫會談沒有找到解法，而他又是使用JavaScript來開發，與我原本想用jQuery的決定有些違背，所以決定要再去問問google有沒有使用jQuery開發的側邊選單。

當然，如果你找側邊選單，除了上面這篇外，一定會找到我也常看常搜尋到的黑暗執行緒blog內的一篇文章(CODE-以jQuery實作側邊滑入選單)，這個範例對於jQuery幾乎不太懂的我，實在是幫助太大了！觀察黑大的程式碼他主要是將選單隱藏到整個畫面的左邊，想像起來就是使功能選單移出瀏覽器範圍的感覺；先測測firefox跟chrome可不可以使用？太好了！都正常執行！jQuery果然是正紅的技術，沒有問題！心理正想著只要把隱藏的位子從左邊改到右邊就可以開始進行客製化了。

結果一移動！發現一個我一直沒辦法解決的問題！也就是當側邊選單在右邊的時候，會讓瀏覽器有X方向的捲軸，導致不管隱藏多遠，使用者只要拉一下捲軸就可以看到你想要隱藏的部份；後來的持續修改過程已經有點忘記了，但在最後確認的前一版還是會有在點下側邊bar的的時候X方向卷軸會突然出現一下，又消失的狀況。

總之，經過前面這些過程，最後做了一個目前使用的版本，基本上的效果還算滿意，出現捲軸的問題也解決了，也可以在IE6、IE8、chrome、firefox上使用正常。
收合：

展開：

最後解決X軸的方法就是，整個側邊選單的框架在設計時，將要隱藏起來的部份包在一個Table之內，當要滑動側邊拉把時，就一併把這個Table進行隱藏，但是這個Table要往哪裡隱藏？就是隱藏在整個側邊選單的DIV之內。所以整個框架就像下面這張圖：

1. 利用一個DIV將整個側邊選單包住，並設定position: absolute。
2. 紅色DIV內放一個兩欄一列的Table。(為了方便定位工具箱圖片)
3. 藍色Table左邊td放置拉把圖片，右邊td放置要顯示的功能內容。
4. 因為我希望整個系統只有一個側邊選單，這樣就需要在功能項目中至少呈現兩個階層，所以在藍Table右邊td又放入一個定位用的兩列一欄綠Table
5. 綠Table上面以DIV放置第一層選單。
6. 綠Table下面以iframe來讀取其他功能頁面近來。
7. 所以紫色DIV項目主要是去變動iframe的讀取頁面。

最後配上參考黑大的jQuery。

1. 橘色部份利用jQuery抓取需要製作動畫的紅DIV、綠Table跟拉把
2. 因為我設定拉把寬為24px，所以當紅DIV為24時代表選單收起來了，就執行拉把圖改變、紅DIV變大跟綠Table位置移回"正值"的動畫。
3. 如果寬不是24，就代表側邊選單已經被點開了，所以執行紅DIV變回24、綠Table改成"負值及改變拉把圖三個動畫。

最後，貼上程式碼方便有需要的複製：

$(function() {

$("#sideBarTab").click(function() {
var $sb = $("#SideBar_Ola"), $tb_i = $("#FunctionTable_In"), $sbImg = $("#sideBarTabImage");

if ($sb.width() == 24) {
$sbImg.attr("src", "../../Images/flyMenu/Tool_R.gif");
$sb.animate({ width: 330 }, 500);
$tb_i.animate({ marginRight: 0 }, 500);
}
else {
$sbImg.attr("src", "../../Images/flyMenu/Tool_L.gif");
$tb_i.animate({ marginRight: -500 }, 500);
$sb.animate({ width: 24 }, 500);
}
});

jQuery真的是一個很強大的JavaScript函式庫，以往想都不敢想的側邊選單就這樣美好的呈現了。XD