📄 轻轻松松创建网页目录树菜单.htm
字号:
<LI><A id=SingleColumn1_Categories_CatList__ctl6_LinkList__ctl6_Link
href="http://blog.csdn.net/laily/posts/101065.aspx">在N-Gage上折腾一个Hello World程序
</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl6_LinkList__ctl7_Link
href="http://blog.csdn.net/laily/archive/2004/06/30/30360.aspx">小程序大作为,JS工具脚本</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl6_LinkList__ctl8_Link
href="http://blog.csdn.net/laily/posts/50331.aspx">搞笑,安全套广告语大全</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl6_LinkList__ctl9_Link
href="http://blog.csdn.net/laily/posts/78327.aspx">新欢乐时光病毒源码分析</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl6_LinkList__ctl10_Link
href="http://blog.csdn.net/laily/posts/55963.aspx">跟我玩转CSDN BLOG界面</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl6_LinkList__ctl11_Link
href="http://blog.csdn.net/laily/archive/2004/09/22/113031.aspx">酷！用VB/VB.NET开发各种智能手机应用</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl6_LinkList__ctl12_Link
href="http://blog.csdn.net/laily/archive/2004/08/02/59207.aspx">面向对象的jscript目录树程序</A>
</LI></UL>
<H3>网址收藏</H3>
<UL>
<LI><A id=SingleColumn1_Categories_CatList__ctl7_LinkList__ctl1_Link
href="http://blog.aspcool.com/" target=_blank>ASPCOOL Blog</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl7_LinkList__ctl2_Link
href="http://www.codeproject.com/" target=_blank>Code Project</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl7_LinkList__ctl3_Link
href="http://community.csdn.net/expert/forum.asp" target=_blank>CSDN社区</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl7_LinkList__ctl4_Link
href="http://dotnet.mblogger.cn/" target=_blank>DotNet博客</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl7_LinkList__ctl5_Link
href="http://msdn.microsoft.com/library/default.asp" target=_blank>MSDN</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl7_LinkList__ctl6_Link
href="http://www.cnblogs.com/" target=_blank>博客园</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl7_LinkList__ctl7_Link
href="http://blog.joycode.com/" target=_blank>博客堂</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl7_LinkList__ctl8_Link
href="http://www.mscenter.edu.cn/" target=_blank>微软高校信息交流中心</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl7_LinkList__ctl9_Link
href="http://www.51js.com/" target=_blank>无忧脚本</A>
<LI><A id=SingleColumn1_Categories_CatList__ctl7_LinkList__ctl10_Link
href="htttp://www.baidu.com/">百度搜索</A> </LI></UL></DIV>
<DIV id=main>
<DIV class=post>
<H2><A id=viewpost.ascx_TitleUrl
href="http://blog.csdn.net/laily/archive/2004/06/25/26263.aspx">轻轻松松创建网页目录树菜单</A>
</H2>
<P>作者：阿赖 （Email: A at Lai.com.cn 主页：<A href="http://www.9499.net/"><FONT
color=#cc0000>http://www.9499.net</FONT></A> Blog: <A
href="http://blog.csdn.net/laily/"><FONT
color=#cc0000>http://blog.csdn.net/laily/</FONT></A> ）</P>
<P>关键字：Web控件 目录树菜单 树型菜单 树形目录 Javascript编程</P>
<P>摘要：本文通过示例介绍使用阿赖目录树控件程序和目录树模板程序生成网页目录树菜单的方法。</P>
<P>阿赖目录树控件程序是一个面向对象的封装良好的javscript函数，它可以让你通过简单易懂的javascript程序轻松的构建WEB页上的目录树。通过下面几个简单的示例您就能很快领会它的使用方法和特点。想了解更多<A
href="http://www.9499.net/?go=tc"><FONT
color=#cc0000>请点这里</FONT></A>，想下载控件程序和教程请<A
href="http://www.9499.net/?go=downtc"><FONT color=#cc0000>点这里</FONT></A>。</P>
<P><STRONG><FONT color=#ff0000>一、用最简单易懂的方式，轻松构建目录树</FONT></STRONG></P>
<P>首先在页面中加载目录树控件程序(alai_tree.js)和目录树模板程序(alai_tree_win2k.js)：</P>
<P><FONT color=#ee82ee><FONT color=#006400><FONT color=#006400><SCRIPT
src="alai_tree.js"></SCRIPT><BR><SCRIPT
src="alai_tree_win2k.js"></SCRIPT><BR></FONT> </FONT><BR></FONT>创建目录树的示例程序：</P>
<P><FONT color=#006400><SCRIPT><BR>var myTree=new alai_tree_win2k()
//用模板程序建树<BR>var root=myTree.root //根节点的引用<BR>//添加目录树节点<BR>var
n1=root.add("文档中心")<BR>
n1.addLink("doc1.htm",".NET")<BR>
n1.addLink("doc2.htm","C++")<BR>
n1.addLink("doc3.htm","数据库")<BR>
n1.addLink("doc4.htm","Delphi")<BR>with(root.add("新闻中心"))<BR>{<BR>
addLink("new1.htm","国内")<BR>
addLink("new2.htm","国际")<BR>
addLink("new3.htm","IT新闻")<BR>}<BR></SCRIPT></FONT> <BR></P>
<P>相信只要有点编程的经验你就能很快的理解和掌握这种构建目录树的方法。生成的目录树如下图：</P>
<P><IMG alt="" hspace=0 src="轻轻松松创建网页目录树菜单.files/o_tree_win2k.gif"
align=baseline border=0></P>
<P><STRONG><FONT color=#ff0000>二、使用目录树模板，随心所欲创建灵活多变的目录树外观样式</FONT></STRONG></P>
<P>如果你觉得这个目录树不够COOL，没关系，还有多种目录树模板供你选择。试着加载alai_tree_winxp.js模板程序</P>
<P><FONT color=#006400><SCRIPT src="alai_tree_winxp.js"></SCRIPT>
</FONT></P>
<P>然后将建树的一行改成：</P>
<P><FONT color=#006400>var myTree=new alai_tree_winxp() //建树</FONT></P>
<P>其它部分的代码不变，这样目录树将变成windows
xp的样式。同样的方法，你可以尝试alai_tree_cool.js、alai_tree_pretty、alai_tree_help.js这些现成的目录树模板。下面是使用不同的目录树模板程序生成的目录树外观对照：</P>
<P align=center><IMG alt="" hspace=0 src="轻轻松松创建网页目录树菜单.files/o_tree_all.jpg"
align=baseline border=0></P>
<P>目录模板程序其实关不复杂，你完全可以自己根据自己的喜好DIY更酷的目录树样式。</P>
<P><STRONG><FONT color=#ff0000>三、使用pathParse方法构建目录树</FONT></STRONG></P>
<P>阿赖目录树提供的一个独特的功能就是使用pathParse方法对一组路径字符串进行剖析，快速生成对应的目录树。要同生成前面一模一样的目录树，用pathParse方法仅需要三行代码，程序如下：</P>
<P><FONT color=#006400><SCRIPT><BR>var myTree=new alai_tree_pretty()
//建树<BR>strPath="/文档中心;/文档中心/.NET;/文档中心/C++;/文档中心/数据库;/文档中心/Delphi;/新闻中心;/新闻中心/国内;/新闻中心/国际;/新闻中心/IT新闻;"
//全部路径<BR>myTree.pathParse(strPath) //<BR></SCRIPT><BR></FONT></P>
<P>上面只是介绍最简单的应用情况，实际上阿赖目录树还有很多的方法，事件，属性等接口可供使用，你还可以建立与ASP,PHP,JSP,ASP.NET等服务器端程序和数据库交互的动态目录树菜单。要获取更多关于阿赖目录树控件程序的教程和示例请到这里：<A
href="http://www.9499.net/?go=tc"><FONT
color=#cc0000>http://www.9499.net?go=tc</FONT></A></P>
<P><IMG alt="" hspace=0
src="E:\down\AlaiJSCtr\轻轻松松创建网页目录树菜单.files\counter(1).gif" align=baseline
border=0></P><B><BR><BR>版权声明：CSDN是本Blog托管服务提供商。如本文牵涉版权问题，CSDN不承担相关责任，请版权拥有者直接与文章作者联系解决。</B><BR>
<P class=postfoot>posted on 2004年06月25日 1:09 PM </P></DIV><LINK
href="http://blog.csdn.net/laily/Services/Pingback.aspx" rel=pingback><!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
<rdf:Description
rdf:about="http://blog.csdn.net/laily/archive/2004/06/25/26263.aspx"
dc:identifier="http://blog.csdn.net/laily/archive/2004/06/25/26263.aspx"
dc:title="轻轻松松创建网页目录树菜单"
trackback:ping="http://blog.csdn.net/laily/services/trackbacks/26263.aspx" />
</rdf:RDF>
--><A name=feedback>
<DIV id=comments>
<H3>Feedback</H3>
<H4><A title="permalink: 回复：轻轻松松创建网页目录树菜单"
href="http://blog.csdn.net/laily/archive/2004/06/25/26263.aspx#42615">#</A> <A
name=42615></A>回复：轻轻松松创建网页目录树菜单 <SPAN>2004-07-16 3:22 AM </SPAN><A
id=Comments.ascx_CommentList__ctl0_NameLink
href="http://blog.csdn.net/laily/archive/2004/06/30/30926.aspx"
target=_blank>lai</A> </H4>
<P>相关链接 阿赖实用Javascript控件程序及教程资源列表 <BR><A href="http://www.9499.net/?go=tc"
target=_new>http://www.9499.net/?go=tc</A> 控件教程首页 <BR><A
href="http://www.9499.net/?go=downtc"
target=_new>http://www.9499.net/?go=downtc</A> 控件程序和教程下载 <BR><A
href="http://gf.yf163.com/tmp/tc/readme.htm"
target=_new>http://gf.yf163.com/tmp/tc/readme.htm</A> 教程和程序使用说明 <BR><A
href="http://gf.yf163.com/tmp/tc/update.htm"
target=_new>http://gf.yf163.com/tmp/tc/update.htm</A> 教程和程序更新记录 <BR><BR><BR><A
href="http://gf.yf163.com/tmp/tc/tree_intro.htm"
target=_new>http://gf.yf163.com/tmp/tc/tree_intro.htm</A> 目录树控件简介 <BR><A
href="http://gf.yf163.com/tmp/tc/tree_teach.htm"
target=_new>http://gf.yf163.com/tmp/tc/tree_teach.htm</A> 目录树控件使用说明 <BR><A
href="http://gf.yf163.com/tmp/tc/tree_ref.htm"
target=_new>http://gf.yf163.com/tmp/tc/tree_ref.htm</A> 目录树控件对象参考 <BR><A
href="http://gf.yf163.com/tmp/tc/tree_exam1.htm"
target=_new>http://gf.yf163.com/tmp/tc/tree_exam1.htm</A> 目录树应用示例一 <BR><A
href="http://gf.yf163.com/tmp/tc/tree_exam2.htm"
target=_new>http://gf.yf163.com/tmp/tc/tree_exam2.htm</A> 教程导航菜单程序 <BR><A
href="http://gf.yf163.com/tmp/tc/tree_exam3.htm"
target=_new>http://gf.yf163.com/tmp/tc/tree_exam3.htm</A> 用模板快速建目录树 <BR><A
href="http://gf.yf163.com/tmp/tc/tree_exam4.htm"
target=_new>http://gf.yf163.com/tmp/tc/tree_exam4.htm</A> 使用模板和扩展程序 <BR><A
href="http://gf.yf163.com/tmp/tc/tree_exam5.htm"
target=_new>http://gf.yf163.com/tmp/tc/tree_exam5.htm</A> 无限精彩，无限酷! <BR><A
href="http://gf.yf163.com/tmp/tc/tree_exam6.htm"
target=_new>http://gf.yf163.com/tmp/tc/tree_exam6.htm</A> ASP+数据库的动态树
<BR><BR><BR><A href="http://gf.yf163.com/tmp/tc/tc_intro.htm"
target=_new>http://gf.yf163.com/tmp/tc/tc_intro.htm</A> 表格控件使用说明 <BR><A
href="http://gf.yf163.com/tmp/tc/tc_exam1.htm"
target=_new>http://gf.yf163.com/tmp/tc/tc_exam1.htm</A> 表格控件参数的使用示例 <BR><A
href="http://gf.yf163.com/tmp/tc/tc_exam2.htm"
target=_new>http://gf.yf163.com/tmp/tc/tc_exam2.htm</A> 表格控件方法的调用示例 <BR><A
href="http://gf.yf163.com/tmp/tc/tc_exam3.htm"
target=_new>http://gf.yf163.com/tmp/tc/tc_exam3.htm</A> 表格控件功能扩展高级示例
<BR><BR><BR><A href="http://gf.yf163.com/tmp/tc/menu_ref.htm"
target=_new>http://gf.yf163.com/tmp/tc/menu_ref.htm</A> 菜单控件参考手册 <BR><A
href="http://gf.yf163.com/tmp/tc/menu_class.htm"
target=_new>http://gf.yf163.com/tmp/tc/menu_class.htm</A> 经典Windows样式菜单 <BR><A
href="http://gf.yf163.com/tmp/tc/menu_xp.htm"
target=_new>http://gf.yf163.com/tmp/tc/menu_xp.htm</A> 仿Office XP样式菜单
<BR><BR><BR><A href="http://gf.yf163.com/tmp/tc/win_ref.htm"
target=_new>http://gf.yf163.com/tmp/tc/win_ref.htm</A> 窗口控件参考手册 <BR><A
href="http://gf.yf163.com/tmp/tc/win_cool.htm"
target=_new>http://gf.yf163.com/tmp/tc/win_cool.htm</A> 酷浮动层窗口示例 <BR><A
href="http://gf.yf163.com/tmp/tc/win_xp.htm"
target=_new>http://gf.yf163.com/tmp/tc/win_xp.htm</A> XP蓝色风格窗口示例 <A
id=Comments.ascx_CommentList__ctl0_EditLink
href="javascript:__doPostBack('Comments.ascx$CommentList$_ctl0$EditLink','')"></A></P>
<H4><A title="permalink: 回复：轻轻松松创建网页目录树菜单"
href="http://blog.csdn.net/laily/archive/2004/06/25/26263.aspx#42617">#</A> <A
name=42617></A>回复：轻轻松松创建网页目录树菜单 <SPAN>2004-07-16 3:26 AM </SPAN><A
id=Comments.ascx_CommentList__ctl1_NameLink target=_blank>lai</A> </H4>
<P>任何问题可到 <A href="http://www.9499.net/?go=ly"
target=_new>http://www.9499.net/?go=ly</A> 给我留言 <BR>轻轻松松创建网页目录树菜单 <BR>Web控件
目录树菜单 树状菜单 树型菜单 树形目录 网页菜单设计 Javascript目录树菜单 <A
id=Comments.ascx_CommentList__ctl1_EditLink
href="javascript:__doPostBack('Comments.ascx$CommentList$_ctl1$EditLink','')"></A></P>
<H4><A title="permalink: 回复：轻轻松松创建网页目录树菜单"
href="http://blog.csdn.net/laily/archive/2004/06/25/26263.aspx#59200">#</A> <A
name=59200></A>回复：轻轻松松创建网页目录树菜单 <SPAN>2004-08-02 11:23 PM </SPAN><A
id=Comments.ascx_CommentList__ctl2_NameLink href="http://blog.csdn.net/laily/"
target=_blank>阿赖.COM</A> </H4>
<P>相关链接： <BR>面向对象的javascript目录树控件设计与应用 <A
href="http://blog.csdn.net/laily/archive/2004/08/02/59182.aspx?Pending=true"
target=_new>http://blog.csdn.net/laily/archive/2004/08/02/59182.aspx?Pending=true</A>
<A id=Comments.ascx_CommentList__ctl2_EditLink
href="javascript:__doPostBack('Comments.ascx$CommentList$_ctl2$EditLink','')"></A></P>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -