Loading...

Jquery树形菜单的实现

2008-09-03 20:01:16 发表于HTML客户端, 网站技术 本文链接: Jquery树形菜单的实现

jQuey这个东西很好很强大,用jQuery操作DOM简直是易如反掌。这不,刚才icemapro小弟给我留言,希望我能写一个jQuery的树形菜单,在强大的就Query的帮助下,仅仅花了大约10分钟就完成了,其中还有大约7分钟在考虑css的问题,所以熟悉jquery可是对你很有帮助的哦,废话不多说,下面发布代码,讲解方式依然在注释中体现:
菜单的html代码如下,你可以根据需要进行扩展:


我想上面的html代码应该不用解释了吧,否则这篇文章你也没有看得必要了哈,下面是css的实现,其实css是最难搞的,目前搞定是实现目录式树形,其他树状也是很简单的,无非就是改变一下css

a:link,a:visited{font-size:12px;
color:#094477;text-decoration:none;
}
a:link:hover,a:visited:hover{
color:#000cf;text-decoration:underline;
}
ul.folder{padding:0;margin:0;list-style:none;/*重置ul的margin和padding,否则打死都无法兼容FF和IE*/}
li.folder{
background:#fff url(folderbg.png) no-repeat 0 0;padding:0px 0 0px 14px;
margin:0 2px;
text-indent:20px;
/*folder背景,目前放到是windows目录背景,如果是其他树形,用其他背景图片替代即可*/
}
li.folder-op{background:#fff url(folderbg-op.png) no-repeat 0 0;}
.disnone{
display:none;
}/*这是一个公共的css class,表示隐藏该元素*/

下面开始介绍重点,那就是js的实现,可能这个重点会让你失望,毕竟代码才那么简单的几行,当然在运用jquery之前肯定是要引入jquery库文件的,本例子中直接引用的本blog(生活点滴)中的jquery库:

下面是js代码,解释依然在注释中:
function Exp(obj){
var html_element = $(obj).parent('.folder');/*获取当前点击的父dom,在本例子中获取的dom节点将是 “第一级目录所在的li.folder”*/
var sub_element = $(html_element).children(".folder"); ;/*根据当前的父dom,获取本级的子dom*/
if( html_element.attr('class').indexOf('folder-op') != -1 ){
/*css class .folder-op表示当前已经展开的类,如果展开,则前面的+背景变成-背景,具体可以在后面的例子中看到
如果class中含有该类,则表示当前已经展开,所以下面的两行的任务是:1.隐藏该目录,2.remove掉此css class
*/
html_element.removeClass('folder-op');
sub_element.hide();
}
else{
/*否则,添加表示目录已经展开的类,展示该目录*/
html_element.addClass('folder-op');
sub_element.show(500);
}
}

对,对于js就只需要上面的几行,太简单了,对吧,下面是例子:

上面例子中包含文件有:tree-jquery
有些细节是在css中控制的,所以如果你需要其他样式请自行修改css,如下面的另外一个例子:(例子中的虚线不完美,特别没个分支最后的那一行, 所以,在css的运用上发挥你的聪明才智吧):

————end————————

标签:,
发表于 2008-09-03 20:01:16 目录:HTML客户端, 网站技术 [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
  • 相关阅读
  • homezz 美国专业主机商
    已经有7位大师动手指导 拒绝低俗
    • 1楼 雀巢 在2008.09.03 20:18发表评论如下: 回复

      好像有点问题,没有下级目录的时候前面应该显示-

      • 1楼附属品 江东 在2008.09.03 20:25发表评论如下: 回复

        这个是CSS的设置而已,没有添加那个样式表,呵呵,正常的应该在php中动态控制。例子中只有两个地方加了js控制,实际使用过程中,都得加控制!

      • 2楼 魑魅魍魉 在2008.09.03 22:36发表评论如下: 回复

        唉,俺JS嘛都不会,就只知道所谓的什么来着?忘记了!

        • 3楼 icemanpro 在2008.09.03 23:02发表评论如下: 回复

          tks

          • 4楼 ThinkAgain 在2008.09.04 14:19发表评论如下: 回复

            这个jquery的确是个好东西。几行代码就可以搞定。呵呵。

            • 4楼附属品 猪头 在2008.09.04 17:30发表评论如下: 回复

              介绍jquery的文章越来越多了

              • 4楼附属品 江东 在2008.09.04 19:07发表评论如下: 回复

                有人点播就介绍,五毛钱一篇就可以了,不能叫我五毛党,哈哈

            评论分页: 1
            (Required)
            (Required, not published)
            如果留言未显示无需重复留言,我将为你恢复!