订阅
上一篇
下一篇
JS树形菜单共享
发布:阿智 日期:2006年11月10日
[功能介绍]
1.无限级分类
2.可用于内嵌框架
3.自动记录状态(跳转页面后目录仍然保持最后状态不会还原成全部折叠)
4.可在一个页面上存在多个DTREE
5.支持所有常用浏览器
√Internet Explorer 5+
√Netscape 6+
√Opera 7+
√Mozilla
6.符合XHTML 1.0
7.可替换图片
下载文件
[使用方法]
网页中的使用可参考此文件
http://blog.macrolong.com/attachment/dtree/index.html
推广使用到BLOG中,防止了侧边栏的冗长.
凡是模块支持html写入的BLOG程序都可以使用(包括Bo-Blog,PJ,LBS等)
演示:目前本blog的侧边栏.
1.将提供的下载文件和文件夹分别上传至BLOG根目录.
2.将以下代码填入[Blog后台-参数设置-<head>区域额外代码].
3.将以下格式代码填入你要放置的模块.
4.对于模块内代码的部分解析:
5.大家可根据自己喜好替换图
默认的一级分类文件夹和文件图片分别为folder.gif和page.gif,大家只能是替换图片
上面的 ,'Search','','','img/imgfolder.gif' 后续补充图片是指该栏目被展开时的图片.
只有在加了此句的时候,展开时会显示相对应的图片,否则显示为默认的展开图片folderopen.gif
故如有需要亦需替换此图片.
6.充分利用Tags
此目录提供的细节分类十分有用,但我不赞成大家把blog的分类设太多,故大家可以充分利用tag来做最小级分类.本blog的链接页面建议大家使用相对路径.
2006.11.25修正: 此次修正去掉了原文件CSS中关于链接部分的设置.这样当你更换模板的时候,JS目录会自动遵循当前模板样式,而无需再手动更改dtree的css文件.下载文件也已作相应更新.
大家如要转载请注明出处: http://www.shadowsky.cn/blog/read.php?442
版权归Destroydrop所有,本人只作拓展及中译.
[英文原版|English Vesion]
1.无限级分类
2.可用于内嵌框架
3.自动记录状态(跳转页面后目录仍然保持最后状态不会还原成全部折叠)
4.可在一个页面上存在多个DTREE
5.支持所有常用浏览器
√Internet Explorer 5+
√Netscape 6+
√Opera 7+
√Mozilla
6.符合XHTML 1.0
7.可替换图片
下载文件[使用方法]
网页中的使用可参考此文件
http://blog.macrolong.com/attachment/dtree/index.html
推广使用到BLOG中,防止了侧边栏的冗长.
凡是模块支持html写入的BLOG程序都可以使用(包括Bo-Blog,PJ,LBS等)
演示:目前本blog的侧边栏.
1.将提供的下载文件和文件夹分别上传至BLOG根目录.
2.将以下代码填入[Blog后台-参数设置-<head>区域额外代码].
<link rel="StyleSheet" href="dtree.css" type="text/css" /></script><script type="text/javascript" src="dtree.js"></script><style type="text/css">dtree { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; white-space: nowrap;}.dtree img { border: 0px; vertical-align: middle;}.dtree a { text-decoration: none;}.dtree a.node, .dtree a.nodeSel { white-space: nowrap; padding: 1px 2px 1px 2px;}dtree .clip { overflow: hidden;}</style>
3.将以下格式代码填入你要放置的模块.
<div style="line-height:9px">
<p align="right"><a href="javascript: d.openAll();">全部展开</a> | <a href="javascript: d.closeAll();">全部折叠</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'ShadowSky V7.0');
d.add(1,0,'返回首页','index.php','Index','','','img/imgfolder.gif');
d.add(2,0,'会员登陆','login.php','Login','','','img/imgfolder.gif');
d.add(3,2,'登陆','login.php');
d.add(4,2,'注册','login.php?job=register');
d.add(5,2,'查看所有用户','view.php?go=userlist');
d.add(6,0,'留言本','guestbook.php','GuestBook','','','img/imgfolder.gif');
d.add(7,6,'发表留言','guestbook.php');
d.add(8,6,'查看所有评论','view.php?go=comment');
d.add(9,0,'日记','index.php?go=category_17','Diary','','','img/imgfolder.gif');
d.add(10,9,'网易日记本(2004)','tag.php?tag=%E7%BD%91%E6%98%93%E6%97%A5%E8%AE%B0%E6%9C%AC');
d.add(11,9,'MSN空间(2005)','tag.php?tag=msnspaces');
d.add(12,9,'日记|感悟','index.php?go=category_17');
d.add(13,9,'文摘|其他','index.php?go=category_22');
d.add(14,0,'相册','index.php?go=category_30','PhotoAlbum','','','img/imgfolder.gif');
d.add(15,0,'模板','index.php?go=category_13','Bo-Blog Skin','','','img/imgfolder.gif');
d.add(16,15,'少女系列','tag.php?tag=%E6%BA%90%E5%AD%90%E5%B0%91%E5%A5%B3%E7%B3%BB%E5%88%97%E6%A8%A1%E7%89%88','Pictures of Gullfoss and Geysir');
d.add(17,15,'圣域系列','tag.php?tag=%E6%BA%90%E5%AD%90%E5%9C%A3%E5%9F%9F%E7%B3%BB%E5%88%97%E6%A8%A1%E7%89%88');
d.add(18,15,'其他综合','tag.php?tag=shadowsky-skin');
d.add(19,15,'移植模板','tag.php?tag=%E7%A7%BB%E6%A4%8D%E6%A8%A1%E6%9D%BF');
d.add(20,0,'设计','index.php?go=category_16','Design','','','img/imgfolder.gif');
d.add(21,20,'PhotoShop','tag.php?tag=photoshop');
d.add(22,21,'PhotoShop资源','tag.php?tag=photoshop%E8%B5%84%E6%BA%90');
d.add(23,22,'笔刷','tag.php?tag=photoshop-brush');
d.add(24,22,'图案','read.php?366');
d.add(25,22,'样式','read.php?373');
d.add(26,22,'蒙板','read.php?362');
d.add(27,22,'字体','tag.php?tag=%E5%AD%97%E4%BD%93');
d.add(28,22,'指针','read.php?293');
d.add(29,21,'PhotoShop教程','tag.php?tag=photoshop%E6%95%99%E7%A8%8B');
d.add(30,20,'Bo-Blog相关','tag.php?tag=bo-blog%E7%9B%B8%E5%85%B3');
d.add(31,20,'Web相关','index.php?go=category_16');
d.add(32,20,'工具软件','tag.php?tag=%E4%B8%8B%E8%BD%BD');
d.add(33,20,'素材','http://photo.163.com/photos/shadowblue525/');
d.add(34,0,'搜索','index.php','Search','','','img/imgfolder.gif');
d.add(35,34,'搜索博客','index.php');
d.add(36,34,'搜索整站','index.php');
d.add(37,0,'其他','index.php?go=category_31','Other','','','img/imgfolder.gif');
d.add(38,37,'关于源子','read.php?136');
d.add(39,37,'网站地图','read.php?134');
d.add(40,37,'友情链接','view.php?go=links');
d.add(41,37,'手机浏览','http://www.shadowsky.cn/blog/mobile/');
d.add(42,37,'订阅','feed.php');
d.add(43,42,'订阅全站','feed.php');
d.add(44,42,'日记分类','feed.php?go=category_17');
d.add(45,42,'相册分类','feed.php?go=category_30');
d.add(46,42,'模板分类','feed.php?go=category_13');
d.add(47,42,'设计分类','feed.php?go=category_16');
d.add(48,37,'源子求助','tag.php?tag=%E6%9C%89%E5%A5%96%E9%97%AE%E7%AD%94');
d.add(49,37,'站内更新','read.php?226');
d.add(50,37,'全部标签','tag.php');
d.add(51,37,'广告征订','read.php?389');
document.write(d);
//-->
</script>
</div>
<p align="right"><a href="javascript: d.openAll();">全部展开</a> | <a href="javascript: d.closeAll();">全部折叠</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'ShadowSky V7.0');
d.add(1,0,'返回首页','index.php','Index','','','img/imgfolder.gif');
d.add(2,0,'会员登陆','login.php','Login','','','img/imgfolder.gif');
d.add(3,2,'登陆','login.php');
d.add(4,2,'注册','login.php?job=register');
d.add(5,2,'查看所有用户','view.php?go=userlist');
d.add(6,0,'留言本','guestbook.php','GuestBook','','','img/imgfolder.gif');
d.add(7,6,'发表留言','guestbook.php');
d.add(8,6,'查看所有评论','view.php?go=comment');
d.add(9,0,'日记','index.php?go=category_17','Diary','','','img/imgfolder.gif');
d.add(10,9,'网易日记本(2004)','tag.php?tag=%E7%BD%91%E6%98%93%E6%97%A5%E8%AE%B0%E6%9C%AC');
d.add(11,9,'MSN空间(2005)','tag.php?tag=msnspaces');
d.add(12,9,'日记|感悟','index.php?go=category_17');
d.add(13,9,'文摘|其他','index.php?go=category_22');
d.add(14,0,'相册','index.php?go=category_30','PhotoAlbum','','','img/imgfolder.gif');
d.add(15,0,'模板','index.php?go=category_13','Bo-Blog Skin','','','img/imgfolder.gif');
d.add(16,15,'少女系列','tag.php?tag=%E6%BA%90%E5%AD%90%E5%B0%91%E5%A5%B3%E7%B3%BB%E5%88%97%E6%A8%A1%E7%89%88','Pictures of Gullfoss and Geysir');
d.add(17,15,'圣域系列','tag.php?tag=%E6%BA%90%E5%AD%90%E5%9C%A3%E5%9F%9F%E7%B3%BB%E5%88%97%E6%A8%A1%E7%89%88');
d.add(18,15,'其他综合','tag.php?tag=shadowsky-skin');
d.add(19,15,'移植模板','tag.php?tag=%E7%A7%BB%E6%A4%8D%E6%A8%A1%E6%9D%BF');
d.add(20,0,'设计','index.php?go=category_16','Design','','','img/imgfolder.gif');
d.add(21,20,'PhotoShop','tag.php?tag=photoshop');
d.add(22,21,'PhotoShop资源','tag.php?tag=photoshop%E8%B5%84%E6%BA%90');
d.add(23,22,'笔刷','tag.php?tag=photoshop-brush');
d.add(24,22,'图案','read.php?366');
d.add(25,22,'样式','read.php?373');
d.add(26,22,'蒙板','read.php?362');
d.add(27,22,'字体','tag.php?tag=%E5%AD%97%E4%BD%93');
d.add(28,22,'指针','read.php?293');
d.add(29,21,'PhotoShop教程','tag.php?tag=photoshop%E6%95%99%E7%A8%8B');
d.add(30,20,'Bo-Blog相关','tag.php?tag=bo-blog%E7%9B%B8%E5%85%B3');
d.add(31,20,'Web相关','index.php?go=category_16');
d.add(32,20,'工具软件','tag.php?tag=%E4%B8%8B%E8%BD%BD');
d.add(33,20,'素材','http://photo.163.com/photos/shadowblue525/');
d.add(34,0,'搜索','index.php','Search','','','img/imgfolder.gif');
d.add(35,34,'搜索博客','index.php');
d.add(36,34,'搜索整站','index.php');
d.add(37,0,'其他','index.php?go=category_31','Other','','','img/imgfolder.gif');
d.add(38,37,'关于源子','read.php?136');
d.add(39,37,'网站地图','read.php?134');
d.add(40,37,'友情链接','view.php?go=links');
d.add(41,37,'手机浏览','http://www.shadowsky.cn/blog/mobile/');
d.add(42,37,'订阅','feed.php');
d.add(43,42,'订阅全站','feed.php');
d.add(44,42,'日记分类','feed.php?go=category_17');
d.add(45,42,'相册分类','feed.php?go=category_30');
d.add(46,42,'模板分类','feed.php?go=category_13');
d.add(47,42,'设计分类','feed.php?go=category_16');
d.add(48,37,'源子求助','tag.php?tag=%E6%9C%89%E5%A5%96%E9%97%AE%E7%AD%94');
d.add(49,37,'站内更新','read.php?226');
d.add(50,37,'全部标签','tag.php');
d.add(51,37,'广告征订','read.php?389');
document.write(d);
//-->
</script>
</div>
4.对于模块内代码的部分解析:
d.add(1,0,'返回首页','index.php','Index','','','img/imgfolder.gif');
ShadowSky
d.add(x,y,'z','url','alt',",",'img-url');
x是每个项目独立的ID,不能重复,从顶级目录向下依次0,1,2......
y是此目录归属的上级目录的ID.顶级目录为-1,一级目录写0,二级目录写所属一级目录的ID...
z是目录的文字
url是相应的链接指向页面,可为绝对也可为相对,若为绝对路径前面不能省略"http://"
alt是图片所在行文字的注释
img-url是图片的路径.
注意 ,'Search','','','img/imgfolder.gif' 此句并非必须.而且只有在仍有下级目录时才生效.
x是每个项目独立的ID,不能重复,从顶级目录向下依次0,1,2......
y是此目录归属的上级目录的ID.顶级目录为-1,一级目录写0,二级目录写所属一级目录的ID...
z是目录的文字
url是相应的链接指向页面,可为绝对也可为相对,若为绝对路径前面不能省略"http://"
alt是图片所在行文字的注释
img-url是图片的路径.
注意 ,'Search','','','img/imgfolder.gif' 此句并非必须.而且只有在仍有下级目录时才生效.
5.大家可根据自己喜好替换图
默认的一级分类文件夹和文件图片分别为folder.gif和page.gif,大家只能是替换图片
上面的 ,'Search','','','img/imgfolder.gif' 后续补充图片是指该栏目被展开时的图片.
只有在加了此句的时候,展开时会显示相对应的图片,否则显示为默认的展开图片folderopen.gif
故如有需要亦需替换此图片.
6.充分利用Tags
此目录提供的细节分类十分有用,但我不赞成大家把blog的分类设太多,故大家可以充分利用tag来做最小级分类.本blog的链接页面建议大家使用相对路径.
2006.11.25修正: 此次修正去掉了原文件CSS中关于链接部分的设置.这样当你更换模板的时候,JS目录会自动遵循当前模板样式,而无需再手动更改dtree的css文件.下载文件也已作相应更新.
大家如要转载请注明出处: http://www.shadowsky.cn/blog/read.php?442
版权归Destroydrop所有,本人只作拓展及中译.
[英文原版|English Vesion]
Tags: JS 数形菜单 共享 
相关文章:IE不执行js脚本的解决方法 (2006-7-6 9:49:22)
引用通告地址: http://www.zhi541.com/cmd.asp?act=gettburl&id=31
评论: 0 | 引用: 0 | 浏览: