在開(kāi)發(fā)B/S程序時(shí)，我們經(jīng)常會(huì)使用到一些頁(yè)面級(jí)的效果控件。比如：樹(shù)形目錄，ComboBox和一些其他的控件，由于這些控件的存在使得我們的程序異常的奪目。但是在開(kāi)發(fā)這些控件的時(shí)候或多或少的都會(huì)比較麻煩。而大部分的程序員是使用發(fā)布的一些開(kāi)源的JS控件來(lái)減輕工作量而且也使得自己的程序健壯。下面我介紹一個(gè)在開(kāi)源社區(qū)中赫赫有名的樹(shù)形控件：TreeView。
首先介紹一下TreeView，TreeView原名是FolderTree，是一款比較早就出世的樹(shù)形JS控件，當(dāng)時(shí)是由個(gè)人開(kāi)發(fā)的，之后由公司購(gòu)買(mǎi)了。但是現(xiàn)在還可以免費(fèi)使用。
TreeView 有兩個(gè)JS文件和一些資源文件組成。兩個(gè)JS文件分別是：主要實(shí)現(xiàn)功能的ftiens4.js和實(shí)現(xiàn)多瀏覽器支持的ua.js文件。只有我們?cè)陂_(kāi)發(fā)的頁(yè)面中加入如上兩個(gè)文件的話(huà)就可以開(kāi)發(fā)如上圖所顯示的樹(shù)形目錄了。代碼如下：
<html>
<head>
<script type="text/javascript" src="../treeview/ftiens4.js" ></script>
<script type="text/javascript" src="../treeview/ua.js" ></script>
<script type="text/javascript">
//TreeView 環(huán)境變量
BUILDALL = 0 //創(chuàng)建所有的節(jié)點(diǎn)對(duì)象 0:延時(shí)創(chuàng)建 1:立即創(chuàng)建
GLOBALTARGET = 'R' //節(jié)點(diǎn)觸發(fā)時(shí)的目標(biāo) 'B':打開(kāi)新窗口 'R':右邊的Frame 'S':當(dāng)前Frame 'T':當(dāng)前瀏覽器窗口
HIGHLIGHT = 0 //高亮顯示當(dāng)前選中的節(jié)點(diǎn) 0:不高亮顯示 1:高亮顯示
HIGHLIGHT_BG = 'blue' //高亮顯示的背景顏色
HIGHLIGHT_COLOR = 'white' //高亮顯示的顏色
ICONPATH = '' //指定節(jié)點(diǎn)的顯示圖標(biāo)，使用URL方式，而且必須用"/"結(jié)尾 如:http://www.x.com/y/
PRESERVESTATE = 0 //保存TreeView的狀態(tài)到Cookie中，當(dāng)再次顯示的時(shí)候會(huì)自動(dòng)的回置狀態(tài) 0:不保存 1:保存
STARTALLOPEN = 0 //默認(rèn)打開(kāi)所有節(jié)點(diǎn) 0:只打開(kāi)根節(jié)點(diǎn) 1:打開(kāi)所以節(jié)點(diǎn)
USEFRAMES = 1 //頁(yè)面是否使用了Frame,注意：如果未使用Frame一定要設(shè)置此參數(shù) 0:未使用 1:使用了
USEICONS = 1 //是否使用圖標(biāo) 0:不顯示圖標(biāo) 1:顯示圖標(biāo)
USETEXTLINKS = 0 //節(jié)點(diǎn)文字是否為鏈接 0:否 1:是
WRAPTEXT = 0 //節(jié)點(diǎn)顯示超出一行時(shí)是否折行 0:不折行 1:折行
foldersTree = gFld("test", "") //創(chuàng)建一個(gè)名為"test"的根節(jié)點(diǎn)
foldersTree.treeID = "t1" //設(shè)置test節(jié)點(diǎn)的唯一編號(hào)為"t1"
aux1 = insFld(foldersTree, gFld("Day of the week", "b.html")) //在根節(jié)點(diǎn)中加入一個(gè)名為"Day of the week"的子節(jié)點(diǎn),當(dāng)點(diǎn)擊的時(shí)候打開(kāi)b.html
aux1.addChildren([["1","1.html"],["2","2.html"],["3","3.html"],["4","4.html"],["5","5.html"]]) //在aux1節(jié)點(diǎn)中連續(xù)加入1,2,3,4,5節(jié)點(diǎn)，并相應(yīng)的打開(kāi)1.html,2.html,3.html,4.html,5.html.
aux2 = insFld(foldersTree, gLnk("R","Day of the week2", "b.html")) //在根節(jié)點(diǎn)中加入名為"Day of the week2"的節(jié)點(diǎn)，當(dāng)點(diǎn)擊的時(shí)候在右側(cè)的frame中打開(kāi)b.html
aux3 = insDoc(foldersTree, gLnk("R","<input type=\"checkbox\">Day of the week3", "c.html")) //在根節(jié)點(diǎn)中加入名為"Day of the week3"并帶有復(fù)選框的節(jié)點(diǎn)，當(dāng)點(diǎn)擊的時(shí)候在右側(cè)的frame中打開(kāi)c.html
</script>
</head>
<body>
<A style="font-size:7pt;text-decoration:none;color:silver" href=" target=_blank>Javascript Tree Menu</A> <script type="text/javascript">
initializeDocument();//構(gòu)造TreeView
</script>
</body>
</html>
TreeView中主要的方法:
gFld(Title, Link);//創(chuàng)建節(jié)點(diǎn) 例：gFld("Test A", "javascript:parent.op()")
Argument
Title
Specifies the text that appears in the folder name. This text can include simple HTML tags, such as enclosing formatting tags (i, b, div, and so on). It can even include an img tag if you want to place a small icon in the node name, such as a "new!" icon for example.
Link
Specifies an optional URL. The URL can be a simple file name like demoFramesetRightFrame.html or a string with protocol, domain, path, and file name like http://www.treeview.net/treemenu/demopics/beenthere_europe.gif.
gLnk(Target, Title, Link);//創(chuàng)建一個(gè)帶有鏈接的節(jié)點(diǎn) 例：gLnk("B", "My File", http://www.mysite.com/MyFile.doc)
Argument
Target
Configures the target location for the link. Specify one of the following values:
"R": Open the document in the right frame (a frame named basefrm)
"B": Open the document in a new window
"T": Open the document in the current browser window, replacing the frameset if one exists
"S": Open the document in the current frame, replacing the tree
Note: This argument is case sensitive; make sure to use uppercase letters.
Title
Specifies the text that appears in the link. This text can include simple HTML tags, such as enclosing formatting tags (i, b, div, and so on). It can even include an img tag if you want to place a small icon in the node name, such as a "new!" icon for example.
Link
Specifies the URL of the document. This can be an absolute URL or a relative URL. Do not enter any other information in this string; adding a target parameter or an event handler will not work.
insFld(Parent Folder, Child Folder); //在父節(jié)點(diǎn)中插入一個(gè)子節(jié)點(diǎn) 例：aux1 = insFld(foldersTree, gFld("Europe", "http..."))
Argument
Parent Folder
Specifies the parent folder. That is, this argument specifies the folder node in which you want to place the other folder node.
Child Folder
Specifies the child folder. That is, this argument specifies the folder node that you want to place under the parent folder node.
insDoc(Parent Folder, Document Node); //在節(jié)點(diǎn)中加入一個(gè)Dom對(duì)象 例：insDoc(aux2, gLnk("S", "Boston", "..."))
Argument
Parent Folder
Specifies the parent folder. That is, this argument specifies the folder node in which you want to place the document node.
Document Node
Specifies the document node. That is, this argument specifies the document node that you want to place in the parent folder node
更多的參考信息到 http://www.treeview.net/tv/instructions.asp