.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个可以相互嵌套的表格项目。
<!-- A.文件条目目标准格式 -->
<TR>
<TD><IMG src="文件图片的URL"/></TD>
<TD><A href="#">文件</A></TD>
</TR>
<!-- B.目录条目标准格式 -->
<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中项目。
<!-- A.文件条目目标准格式 -->
<TR>
<TD><IMG src="http://blog.csdn.net/images/blog_csdn_net/netmicrobe/188384/r_file.gif"/></TD>
<TD><A href="#">文件</A></TD>
</TR>
<!-- B.目录条目标准格式 -->
<TR><!--目录标题-->
<TD><IMG src="http://blog.csdn.net/images/blog_csdn_net/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.csdn.net/images/blog_csdn_net/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.csdn.net/images/blog_csdn_net/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.csdn.net/images/blog_csdn_net/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.csdn.net/images/blog_csdn_net/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.csdn.net/images/blog_csdn_net/netmicrobe/188384/r_file.gif"/></TD>
<TD><A href="http://blog.csdn.net/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.csdn.net/images/blog_csdn_net/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.csdn.net/images/blog_csdn_net/netmicrobe/188384/r_file.gif"/></TD>
<TD><A href="http://blog.csdn.net/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.csdn.net/images/blog_csdn_net/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.csdn.net/images/blog_csdn_net/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.csdn.net/images/blog_csdn_net/netmicrobe/188384/r_file.gif"/></TD>
<TD><A href="http://blog.csdn.net/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来组织。