轻轻松松创建网页目录树菜单

原创 2004年06月25日 13:09:00

作者:阿赖 (Email: A at Lai.com.cn 主页:http://www.9499.net Blog: http://blog.csdn.net/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模板程序

<SCRIPT src="alai_tree_winxp.js"></SCRIPT>

然后将建树的一行改成:

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

Windows目录树的创建和SHGetDesktopFolder介绍

转自: Windows文件夹管理树的实现实质上是对Widows名空间的遍历。名空间的每隔文件夹都提供了一个IShellFolder接口。 遍历名空间的方法是:     1、调用SHGetDe...
  • hemeinvyiqiluoben
  • hemeinvyiqiluoben
  • 2013年12月09日 16:54
  • 1294

Html网页目录树效果

  • 2010年04月30日 16:27
  • 8KB
  • 下载

三行代码实现树形菜单(多种风格的菜单展示)

风格1:图片路径为help/tree;风格2:图片路径为base/tree(轻开B2C电子商务网站组织机构实例,文件为base/xml/tree.html);风格3:图片路径为help/tree/1;...
  • tx18
  • tx18
  • 2015年04月04日 09:12
  • 8236

目录树(树形菜单)操作网站的完整源码,有后台管理,仿照无忧视窗

  • 2008年09月20日 18:18
  • 609KB
  • 下载

Java 树状(树形菜单)关系图源码

  • 2015年01月10日 16:59
  • 6KB
  • 下载

Html网页目录树效果

  • 2008年11月07日 15:53
  • 8KB
  • 下载

xloadtree实现web动态目录树(分层加载)

最近在做老师的项目,第一个任务:做一个java web目录树要求实现数据的动态加载,即点击一个节点加载一层数据,经过一个星期的尝试探索期间用了几个比较流行的树插件 (js包),最终用xloadtree...
  • u012732618
  • u012732618
  • 2015年06月11日 10:34
  • 1667

C#界面设计之树目录TreeView的使用

还是先上效果图: 主要代码如下:using System; using System.Collections.Generic; using System.ComponentModel; usin...
  • chongshangyunxiao321
  • chongshangyunxiao321
  • 2016年04月22日 10:11
  • 3098

目录菜单树的实现及查询

要求: 获取用户能操作的资源集合,这里主要考虑菜单树的获取 框架: springboot + hibernate 菜单树的逻辑是:子菜单存单,父菜单也得存在。 算法逻辑: 传入资源节点Node...
  • m0_37530301
  • m0_37530301
  • 2017年06月20日 20:38
  • 218

Unity自定义组件之(五) 目录树 UITree

前言之前在项目中多次用到目录树,由于UGUI没有目录树这样组件,需要我们拿基础的UI去拼凑,但是这样拼凑的目录树一般需要制作为预制物,在我们想要迁移到别的工程时,总是因为打包且少资源而产生一些问题。而...
  • qq_29579137
  • qq_29579137
  • 2017年06月01日 19:22
  • 1346
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:轻轻松松创建网页目录树菜单
举报原因:
原因补充:

(最多只允许输入30个字)