Xoops‎ > ‎MODULE‎ > ‎

模組應用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.另外它的呈現方式有好幾種,可以參考它的說明來做變化:
 JSCookMenu Demo/Tips

註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啦。 

ċ
ThemePanel.zip
(11k)
CHENG-CHEN HSU,
2010年3月21日 下午2:53
Comments