使用树型目录结构管理BLOG中的文章。

.Text 只提供了2层的目录来管理blog中的文章，当文章多起来的时候，就未必能十分迅速的找到你自己原来的文章了，要是能使用像文件目录一样的分类的结构来管理，这样的情况就不会出现了，所以我写一个目录页来管理自己BLOG中的文章。

不过这个的处理办法还是很繁琐的，强烈建议.Text开发组能构实现多层的目录索引功能。

这个页面使用到一个javaScript函数 和两个可以相互嵌套的表格块。

 

<!--这个函数实现了隐藏/显现单个数据单位的功能。-->

<script language="javascript">

function ShowHide(eleID){

  var obj = document.getElementById(eleID);

  if( obj.style.display == "none" ){

    obj.style.display = "block";

  }

  else{

    obj.style.display = "none";

  }

}

 

/*************************************************

// 2个可以相互嵌套的表格项目。

 

<!--　Ａ．文件条目目标准格式　-->

<TR>

<TD><IMG src="文件图片的URL"/></TD>

<TD><A href="#">文件</A></TD>

</TR>

 

<!--　Ｂ．目录条目标准格式　-->

<TR><!--目录标题-->

    <TD><IMG src="文件图片的URL "/></TD>

    <TD><A href="#" onClick="ShowHide('目录的内容');">目录标题</A></TD>

</TR>

<TR id="目录的内容" style="display:none;"><TD></TD><TD><TABLE><!--该目录的内容-->

</TABLE></TD></TR>

*/

</script>

 

 

 下面是一个使用的实例（实现效果）：

 

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.01 transitional//en">

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=gb2312">

    <title>Tree</title>

</head>

<body>

 

<!--这个函数实现了隐藏/显现单个数据单位的功能。-->

<script language="javascript">

function ShowHide(eleID){

  var obj = document.getElementById(eleID);

  if( obj.style.display == "none" ){

    obj.style.display = "block";

  }

  else{

    obj.style.display = "none";

  }

}

 

/*

// 在"目录的内容"中使用下面2中项目。

 

<!--　Ａ．文件条目目标准格式　-->

<TR>

<TD><IMG src="http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/netmicrobe/188384/r_file.gif"/></TD>

<TD><A href="#">文件</A></TD>

</TR>

 

<!--　Ｂ．目录条目标准格式　-->

<TR><!--目录标题-->

     <TD><IMG src="http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/netmicrobe/188384/r_file.gif"/></TD>

     <TD><A href="#" onClick="ShowHide('目录的内容');">目录标题</A></TD>

</TR>

<TR id="目录的内容" style="display:none;"><TD></TD><TD><TABLE><!--该目录的内容-->

</TABLE></TD></TR>

*/

</script>

 

 

<!--目录树数据显示实现-->

<!-- 技术 - root 目录条目 START ------------------------------------------------------>

<TABLE>

  <TR><!-- 技术 - root 目录标题-->

    <TD><IMG src="http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/netmicrobe/188384/r_folder.gif"/></TD>

    <TD><A href="#" onClick="ShowHide('技术的内容');">技术</A></TD>

  </TR>

 

  <!--  技术 - root 目录的内容-->

  <TR id="技术的内容" style="display:none;"><TD></TD><TD><TABLE>

    

          <!-- 技术/平台或语言 目录条目 START ------------------------------------------------------>

    <TR><!--目录标题-->

      <TD><IMG src="http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/netmicrobe/188384/r_folder.gif"/></TD>

      <TD><A href="#" onClick="ShowHide('平台或语言的内容');">平台或语言</A></TD>

    </TR>

   

    <TR id="平台或语言的内容" style="display:none;"><TD></TD><TD><TABLE>

   

               <!-- 技术/平台或语言/J2ME的内容 目录条目 START ------------------------------------------------------>

               <TR><!--目录标题-->

                 <TD><IMG src="http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/netmicrobe/188384/r_folder.gif"/></TD>

                 <TD><A href="#" onClick="ShowHide('J2ME的内容');">J2ME</A></TD>

               </TR>

              

               <TR id="J2ME的内容" style="display:none;"><TD></TD><TD><TABLE>

               </TABLE></TD></TR>

               <!-- 技术/平台或语言/J2ME的内容 目录条目 END ---------------------------------------------------------->

              

               <!-- 技术/平台或语言/MS windows 目录条目 START ------------------------------------------------------>

               <TR><!--目录标题-->

                 <TD><IMG src="http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/netmicrobe/188384/r_folder.gif"/></TD>

                 <TD><A href="#" onClick="ShowHide('MS windows的内容');">MS windows</A></TD>

               </TR>

              

               <TR id="MS windows的内容" style="display:none;"><TD></TD><TD><TABLE>

                   <!--　com网络资源 文件条目　-->

                   <TR>

                   <TD><IMG src="http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/netmicrobe/188384/r_file.gif"/></TD>

                   <TD><A href="http://blog.youkuaiyun.com/NetMicrobe/archive/2006/03/23/635920.aspx">com网络资源</A></TD>

                   </TR>

               </TABLE></TD></TR>

               <!-- 技术/平台或语言/MS windows 目录条目 END ---------------------------------------------------------->

              

               <!-- 技术/平台或语言/Java Script 目录条目 START ------------------------------------------------------>

               <TR><!--目录标题-->

                 <TD><IMG src="http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/netmicrobe/188384/r_folder.gif"/></TD>

                 <TD><A href="#" onClick="ShowHide('Java Script的内容');">Java Script</A></TD>

               </TR>

              

               <TR id="Java Script的内容" style="display:none;"><TD></TD><TD><TABLE>

                   <!--　JavaScript教程--从入门到精通(转) 文件条目　-->

                   <TR>

                   <TD><IMG src="http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/netmicrobe/188384/r_file.gif"/></TD>

                   <TD><A href="http://blog.youkuaiyun.com/NetMicrobe/archive/2006/03/29/643211.aspx">JavaScript教程--从入门到精通(转)</A></TD>

                   </TR>

               </TABLE></TD></TR>

               <!-- 技术/平台或语言/Java Script 目录条目 END ---------------------------------------------------------->

 

    </TABLE></TD></TR>

     <!-- 技术/平台或语言 目录条目 END ---------------------------------------------------------->

    

          <!-- 技术/多媒体 目录条目 START ------------------------------------------------------>

       <TR><!--目录标题-->

         <TD><IMG src="http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/netmicrobe/188384/r_folder.gif"/></TD>

         <TD><A href="#" onClick="ShowHide('多媒体的内容');">多媒体</A></TD>

       </TR>

      

       <TR id="多媒体的内容" style="display:none;"><TD></TD><TD><TABLE>

         

               <!-- 技术/多媒体/音频技术 目录条目 START ------------------------------------------------------>

               <TR><!--目录标题-->

                 <TD><IMG src="http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/netmicrobe/188384/r_folder.gif"/></TD>

                 <TD><A href="#" onClick="ShowHide('音频技术的内容');">音频技术</A></TD>

               </TR>

              

               <TR id="音频技术的内容" style="display:none;"><TD></TD><TD><TABLE>

                   <!--　音频技术的内容 文件条目　-->

                   <TR>

                   <TD><IMG src="http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/netmicrobe/188384/r_file.gif"/></TD>

                   <TD><A href="http://blog.youkuaiyun.com/NetMicrobe/archive/2006/03/23/636289.aspx">音频技术网络资源收集</A></TD>

                   </TR>

               </TABLE></TD></TR>

               <!-- 技术/多媒体/音频技术 目录条目 END ---------------------------------------------------------->

              

       </TABLE></TD></TR>

          <!-- 技术/多媒体 目录条目 END ---------------------------------------------------------->

   

  </TABLE></TD></TR>

 

</TABLE>

<!-- 技术 - root 目录条目 END ---------------------------------------------------------->

 

</body>

</html>

 

2006/9/23

这个方法过于复杂，我的东西还没那么多，暂时格式吧

有空话写个程序来管理输出这种JS目录。

目录本身的内容可以使用XML来组织。