轻轻松松创建网页目录树菜单_目录树网页-优快云博客

本文链接：https://blog.youkuaiyun.com/laily/article/details/26263

作者：阿赖（Email: A at Lai.com.cn 主页：http://www.9499.net Blog: http://blog.youkuaiyun.com/laily/ ）

关键字：Web控件目录树菜单树型菜单树形目录 Javascript编程

摘要：本文通过示例介绍使用阿赖目录树控件程序和目录树模板程序生成网页目录树菜单的方法。

阿赖目录树控件程序是一个面向对象的封装良好的javscript函数，它可以让你通过简单易懂的javascript程序轻松的构建WEB页上的目录树。通过下面几个简单的示例您就能很快领会它的使用方法和特点。想了解更多请点这里，想下载控件程序和教程请点这里。

一、用最简单易懂的方式，轻松构建目录树

首先在页面中加载目录树控件程序(alai_tree.js)和目录树模板程序(alai_tree_win2k.js)：

<SCRIPT src="alai_tree.js"></SCRIPT>
<SCRIPT src="alai_tree_win2k.js"></SCRIPT>

创建目录树的示例程序：

<SCRIPT>
var myTree=new alai_tree_win2k() //用模板程序建树
var root=myTree.root //根节点的引用
//添加目录树节点
var n1=root.add("文档中心")
   n1.addLink("doc1.htm",".NET")
   n1.addLink("doc2.htm","C++")
   n1.addLink("doc3.htm","数据库")
   n1.addLink("doc4.htm","Delphi")
with(root.add("新闻中心"))
{
   addLink("new1.htm","国内")
   addLink("new2.htm","国际")
   addLink("new3.htm","IT新闻")
}
</SCRIPT>

相信只要有点编程的经验你就能很快的理解和掌握这种构建目录树的方法。生成的目录树如下图：

二、使用目录树模板，随心所欲创建灵活多变的目录树外观样式

如果你觉得这个目录树不够COOL，没关系，还有多种目录树模板供你选择。试着加载alai_tree_winxp.js模板程序

然后将建树的一行改成：

var myTree=new alai_tree_winxp() //建树

其它部分的代码不变，这样目录树将变成windows xp的样式。同样的方法，你可以尝试alai_tree_cool.js、alai_tree_pretty、alai_tree_help.js这些现成的目录树模板。下面是使用不同的目录树模板程序生成的目录树外观对照：

目录模板程序其实关不复杂，你完全可以自己根据自己的喜好DIY更酷的目录树样式。

三、使用pathParse方法构建目录树

阿赖目录树提供的一个独特的功能就是使用pathParse方法对一组路径字符串进行剖析，快速生成对应的目录树。要同生成前面一模一样的目录树，用pathParse方法仅需要三行代码，程序如下：

<SCRIPT>
var myTree=new alai_tree_pretty() //建树
strPath="/文档中心;/文档中心/.NET;/文档中心/C++;/文档中心/数据库;/文档中心/Delphi;/新闻中心;/新闻中心/国内;/新闻中心/国际;/新闻中心/IT新闻;" //全部路径
myTree.pathParse(strPath) //
</SCRIPT>

上面只是介绍最简单的应用情况，实际上阿赖目录树还有很多的方法，事件，属性等接口可供使用，你还可以建立与ASP,PHP,JSP,ASP.NET等服务器端程序和数据库交互的动态目录树菜单。要获取更多关于阿赖目录树控件程序的教程和示例请到这里：http://www.9499.net?go=tc