jquery 初步实现树形菜单

　2012-11-01 20:37:30　来源：WEB开发网　　　

核心提示： 贴代码： 15597_com.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

贴代码：

15597_com.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ul2tree</title>
<style type="text/css">
	body{font-family:"微软雅黑" verdana}
	#div_tree{display:block; float:left; width:50%; }
</style>
<script type="text/javascript" src="../jquery-1.8.0.min.js" ></script>
<script type="text/javascript" src="ul2tree.0.1.0.js" ></script>


</head>
<body>
<div id="div_tree">
	<ul>
		<li>第一条</li>
			<ul>
				<li>二级一条</li>
				<li>二级二条</li>
				<li>二级三条</li>
			</ul>
		<li>第二条</li>
			<ul>
				<li>第二条二级一</li>
					<ul>
						<li>三级一条</li>
						<li>三级二条</li>
							<ul>
								<li>三级一条</li>
								<li>三级二条</li>
									
								<li>三级三条</li>
							</ul>
						<li>三级三条</li>
					</ul>
			</ul>
		<li>第三条</li>
		<li>第四条</li>
			<ul>
				<li>二级一条</li>
				<li>二级二条</li>
				<li>二级三条</li>
			</ul>
	</ul>
</div>
<script type="text/javascript" >

	$(document).ready(function(){
		
		$.ul2tree({
			obj:$("#div_tree ul")
		});
	});
</script>
</body>
</html>

ul2tree.0.1.0.js

/** 
* 将ul结构转化为树形菜单函数 
* 待解决问题： 
* 1 列表最后一个线形图改为 L 形 
* 2 可以选择带连接线或者不带连接线 
* 3 增加文字点击函数 
* 4  
*/  
$.extend({  
    ul2tree:function(opt,callback){  
    // 默认参数  
    this.defaults = {  
        obj           :"",  
        forderOpen    :"images/folderOpen.gif", // 打开的文件夹图片  
        forderClosed  :"images/folderClosed.gif", // 关闭的文件夹图片  
        fileImg       :"images/leaf.gif", // 文件图片  
        img_width     :"18px",  
        line_height   :"18px", // 行高  
        font_size     :"12px"  
    };  
      
    //参数初始化  
    var opts = $.extend(this.defaults,opt);  
      
    // ul样式初始化  
    $(opts.obj).css({  
        "list-style-type":"none",  
        "padding-left":"0px"  
    });  
      
    // 添加文件夹及文件图片  
    $(opts.obj).find("li").each(function(){  
        $(this).css({  
            "height":opts.line_height,  
            "line-height":opts.line_height,  
            "font-size":opts.font_size  
        });  
        if($(this).next().children().size() > 0){  
            $(this).prepend("<img src=\"" + opts.forderOpen + "\" />");  
              
            // 展开关闭  
            $(this).find("img[src='" + opts.forderOpen + "']:last").click(function(){  
                if($(this).attr("src")==opts.forderClosed){  
                    $(this).attr("src",opts.forderOpen);  
                    $(this).parent().next().css({  
                        "display":"block",  
                        "visibility":"visible"  
                    });  
                }else{  
                    $(this).parent().next().css({  
                        "display":"none",  
                        "visibility":"hidden"  
                    });  
                    $(this).attr("src",opts.forderClosed);  
                }  
            });  
        }else{  
            $(this).prepend("<img src=\"" + opts.fileImg + "\" />");  
        }  
    });  
      
    // 增加线条  
    $(opts.obj).find("ul").each(function(){  
        $(this).find("li").each(function(){  
            $(this).prepend("<img src=\"images/line3.gif\" />");  
            if($(this).next().size == 0){  
                alert("");  
                $(this).prepend("<img src=\"images/line2.gif\" />");  
            }  
        });  
    });  
      
    // 处理线条  
    $(opts.obj).find("li").each(function(){  
        var img_size = $(this).find("img").size();  
        //alert(img_size);  
        if(img_size >= 0){  
            for(var i = 0; i < img_size - 2; i++){  
                $(this).find("img:eq(" + i + ")").attr("src","images/line1.gif");  
            }  
        }  
    });  
}});