模組應用JAVA SCRIPT選單
使用JSCookTree於xoops中
當新聞模組(news)的分類太多時，網頁上的導引框就變得又長又亂，很難點選又會排列失序。
所以若是把這個JAVA SCRIPT目錄選單應用上來，分類就可以很明顯好用了。
這個JAVA SCRIPT目錄選單來自 JSCookTree，首先簡單解說一下這個網站使用方法。
JSCookTree Tutorial 這是說明頁，簡單翻譯說明如下。
第一步：建立選單(1. Creating a Tree)
這一步中灰色的部份是你的選單，這段是要放到選單網頁上的。
可以藉由JSCookTree提供的選單編碼器來製作 Menu Builder for JSCookMenu
第二步：選擇布景(2. Pick a Theme)
挑選一個布景下載，可以在它左邊的目錄上Themes先看看四種布景效果。
確定後到 Download下載該布景ZIP檔和JSCookMenu.js這個檔案。
這個zip解開後和JSCookMenu.js檔都要放在網站中。
然後在你的選單網頁上，<head>與</head>之間，依序插入兩段灰色部份，須注意其中的檔案路徑。
第三步：呈現目錄選單(3. Display the Menu)
這一步中灰色的部份是你的選單，這段是要放到選單網頁上的。
第二段的灰色部分配合第一步：建立選單(1. Creating a Tree)中所建立的選單編碼，放在網頁上。
有看沒有懂嗎？沒關係，接下來詳細解釋把它應用到XOOPS中。
具體來說，在xoops網頁中它是這樣運用的：
STEP1.
將挑選的下載的theme解壓縮後放在主目錄下，JSCookMenu.js檔我也是放在這個folder中。
STEP2.
參考「第二步：選擇布景(2. Pick a Theme)」將兩段SCRIPT LANGUAGE和LINK依序放到你的網頁布景的theme.html檔，<head>與</head>之間。
請注意兩段中的檔案路徑須與STEP1中的位置配合。以本例來說是這樣的：
<SCRIPT LANGUAGE="JavaScript" SRC="<{$xoops_url}>/ThemePanel/JSCookMenu.js"></SCRIPT> <LINK REL="stylesheet" HREF="<{$xoops_url}>/ThemePanel/theme.css" TYPE="text/css"> <SCRIPT LANGUAGE="JavaScript" SRC="<{$xoops_url}>/ThemePanel/theme.js"></SCRIPT>若網站使用了數個布景，每個布景的theme.html檔都需要修改。全部theme.html檔修改後，別忘了去更新一下「更新 templates_c」，或是清空 templates_c 資料夾，或是更新預設樣板。讓修改後的theme.html能呈現出來。
STEP3.
到後台加入一個新聞區的自訂新增區塊，這個是顯示選單的部分，將「第三步：呈現目錄選單(3. Display the Menu)」提到的部分放上來即可。
以本例來說，此區塊內容為：
<DIV ID=myMenuID></DIV> <SCRIPT LANGUAGE="JavaScript"> var myMenu = [ [null,'希代/高寶',null,null,null, [null,'香頌名作','/modules/news/index.php?storytopic=11',null,null], [null,'柔情系列','/modules/news/index.php?storytopic=15',null,null], [null,'迷你影集','/modules/news/index.php?storytopic=17',null,null], [null,'小說族','/modules/news/index.php?storytopic=16',null,null], ...中略 ] ]; cmDraw ('myMenuID', myMenu, 'hbr', cmThemePanel, 'ThemePanel'); </SCRIPT>備註TIP：
註1.另外它的呈現方式有好幾種，可以參考它的說明來做變化：
註2.由於xoops有它自己的css，這個選單有時候會被影響到，所以本文附了一個改過的JSCookMenu布景CSS在裡面，可參考看看。
註3. Menu Builder for JSCookMenu的使用方法
在中間這一行中加入母類別的icon、title、url、target、description，沒有的就空白，再來按下add node鈕。
*注意加入的url路徑。
接下來加入子類別的icon、title、url、target、description，再來按下add child鈕。
重復上述步驟，配合移動標記的位置，將整個分類目錄建好。
add split鈕：加入分隔線
modify鈕：修改標記的內容
move up鈕：上移
move down鈕：下移
indent鈕：縮排成子目錄
unindent鈕：反縮排成母目錄
整個排好後，按下show code鈕，目錄部分的編碼就完成了！配合STEP3.，放到區塊中就ok啦。