Html 動態 Menu Tree + Frame Hide

Html 動態 Menu Tree + Frame Hide

因為很少寫網頁程式了,但最近碰到公司接到一個案子,主要是寫公司內部的網頁,只是因為原公司有個舊系統(使用vb寫的ap),所以這次要把web 的畫面變成看起來像ap,所以就要使用javasript來控制menuframe

網路上找了一堆javascript的範例來改,把程式放上來順便備份及記錄!

相關文章Javascript API + Html API 說明

Html 動態 Menu Tree

收縮時的Menu Tree:
Html 動態 Menu Tree
展開時的Menu Tree

Html 動態 Menu Tree


Html 動態 Menu Tree程式結構說明:程式中有三個目錄,一個是放置 tree Menu 圖的目錄-"img"、一個是放置javascript的目錄- "javascript"、最後一個是放置css的目錄-"css"。針對css及img目錄的內容就不用多做說明,主要說明是javascript內的檔案。

javascript目錄檔案有四個:

1. treeItem.js :是放置 Tree Menu 功能也就是結點,所以有的功能是放置在裡面,以結點來設定,內容 "// nodeId | parentNodeId | nodeName | nodeUrl; ,第一個本身的id = nodeId,第二個是就本身上個結點 parentNodeId,第三個 顯示的名稱 nodeName ,連結的url=nodeUrl,所以就會成為:

Html 動態 Menu Tree


2. ssmItems.js:主要是Menu Tree 的屬性設定,例如背景色,字體大小…,例如:

Html 動態 Menu Tree


3.ssm.js:產生Tree的程式。

4.tree.js:產生Tree時圖檔的位置及套用的圖片位置。

Html 動態 Menu Tree:範例檔


Frame Hide:目前只放畫面,程式之後再說明吧,有需要再mail給我吧!

隱藏時的Hide frame

Frame Hide

展開時的Hide frame

Frame Hide


0 意見: