TaskMenu3.0（仿xp界面）

TaskMenu3.0（仿xp界面）使用js和htm實現，可以方面的使用到您的網站上。界面美觀漂亮，完全模仿windows xp的側邊欄，效果非常不錯，有三種風格可供選擇。

演示請看：/demo/taskmenu/

新特點:

(1) 重新設計的數據結構，使用了更合理的雙向鍊表，代替了舊版本的父子包含結構，更容易以後擴展。

(2) 重新設計了控制函式接口，更方便使用者。

(3) 通過重寫css樣式檔案，就可以換選單膚表，不需要刷新，並可自定義樣式。

(4) 兼容最新的firefox 瀏覽器。

使用特點:

選單有一些比較特殊的地方，跟前兩個版本不同的是，在構建TaskMenu類之後，必須調用init方法，才可以讓

選單顯示。在調用init方法之前add的條目，會立即顯示，而在init後添加的或使用中動態添加的，都會以動態效果

添加到選單。

選單的動作基本分為open(伸出）,close (縮回),extend (變長),shorten(變短);

四種操作可同時載入在同一個選單，而且同一個操作可載入在多個選單上。 也可算上是異步操作。

但open和close 其中回響一種操作只會停止之前操作，畢竟選單要么打開，要么關閉。

extend 和 shorten 同上。

同一個選單條目添加到不同的選單，之後添加的是該條目的科隆版本。 如果你要返回該選單變數建議您直角調用cloneNode函式。

var item = new TaskMenuItem("條目");

var menu1 = new TaskMenu("選單");

var menu2 = new TaskMenu("選單");

menu1.add(item);

menu2.add(item); 同item被兩次添加，這裡實際隱式的調用的是 menu2.add(item.cloneNode ());

這樣如果您要調用 menu2.remove(item);是不會成功的。因為被添加的是科隆條目，並不是item變數，引用不一致。

解決辦法就是 調用 menu2.remove(menu2.items(0)); menu2.item(0)方法返回的就是那個被科隆的版本，

因為它是第一條目。或者直接調用科隆方法。

var item1 = new TaskMenuItem("條目");

var item2 = item.cloneNode();

配製: 默認情況下，選單已經能很好的使用了，不過，根據大家的需要，可能還是需要更改，先說下TaskMenu.js中頭部 中一些全局變數的用途:

默認配製如下 [注:檔案頭部中以INF打頭的變數不要更改]

var CFG_FRAME_COUNT = 6;

var CFG_DOCUMENT_MARGIN = 12;

var CFG_MENU_SPACING = 15;

var CFG_MENU_WIDTH = 185;

var CFG_SCROLLBAR_WIDTH = 17;

var CFG_TITLEBAR_HEIGHT = 25;

var CFG_TITLEBAR_LEFT_WIDTH = 13;

var CFG_TITLEBAR_RIGHT_WIDTH = 25;

var CFG_MENUBODY_PADDING = 9;

var CFG_TITLEBAR_BORDER_WIDTH = 0;

var CFG_MENUBODY_BORDER_WIDTH = 1;

var CFG_SLEEP_TIME_BEGIN = 20;

var CFG_SLEEP_TIME_END = 60;

var CFG_ALPHA_STEP = Math.ceil( 100 / (CFG_FRAME_COUNT) );

var CFG_IS_SCROLLBAR_ENABLED = true;

var CFG_TITLEBAR_MIDDLE_WIDTH = CFG_MENU_WIDTH - CFG_TITLEBAR_LEFT_WIDTH - CFG_TITLEBAR_RIGHT_WIDTH;

CFG_IS_SPECIAL_HEAD_NODE = false

CFG_FRAME_COUNT 變數設定選單變動效果需要的貞數。越小越快。最小為1 (不要設定為0 喔)，就沒有變動的效果了。

CFG_DOCUMENT_MARGIN 變數設定選單的上方向和左方向離 文檔邊緣的空隙。

CFG_MENU_WIDTH 用來設定選單的寬度 CFG_TITLEBAR_HEIGHT 用來設定選單標題欄的高度。 CFG_TITLEBAR_LEFT_WIDTH 標題欄實際被分為三個部分，此變數決定左邊的寬度，也就是裝載titlebarLeft.gif部分除非您設計了自己的樣式，否則不要更改 CFG_TITLEBAR_RIGHT_WIDTH 同上，是右邊的寬度，也就是選單狀態箭頭的部分。

CFG_TITLEBAR_MIDDLE_WIDTH 標題欄中間部分寬度，這裡是總長度減去兩邊的部分，也就是titlebarMiddle.gif部分。

CFG_TITLEBAR_BORDER_WIDTH 標題欄的框線大小，這裡被設定為0

CFG_MENUBODY_PADDING 選單身體的內部空隙大小

CFG_MENUBODY_BORDER_WIDTH 選單實體的框線大小

CFG_SLEEP_TIME_BEGIN 起始時間間隔 不要更改

CFG_SLEEP_TIME_END 結束時間間隔 不要更改

CFG_ALPHA_STEP 選單變化中，每貞透明度發生變化的值。

CFG_IS_SPECIAL_HEAD_NODE 默認情況下，是否特殊化頭選單，建議不要更改此變數，而使用TaskMenu.setHeadMenuSpecial設定。

CFG_IS_SCROLLBAR_ENABLED 默認情況下滾動條是否可用，建議不要更改此變數，而使用TaskMenu.setScrollbarEnabled(value)來更改。

使用中遇到的缺點：

由於微軟IE瀏覽器的升級，TaskMenu 3.0不能夠兼容IE10和IE11版本，會出現顯示錯亂的情況，請喜歡TaskMenu的朋友們在開發的時候注意。