jquery 初始实现树形菜单 _Web前端

jquery 初步实现树形菜单

先上图：

贴代码：

ul2tree.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");
			}
		}
	});
}});

文件下载：http://download.csdn.net/detail/blatar/4709713