jquery 实现树形菜单【更新】

最新推荐文章于 2023-09-06 11:44:59 发布

blatar

最新推荐文章于 2023-09-06 11:44:59 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/blatar/article/details/8135440

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1 修改了线条图片样式

2 增加了文字点击函数

先上图：

贴代码：

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%; }
	img{vertical-align:bottom;}
</style>
<script type="text/javascript" src="../jquery-1.8.0.min.js" ></script>
<script type="text/javascript" src="ul2tree.0.1.1.js" ></script>
</head>
<body>
<div id="div_tree">
	<ul>
		<li>第一条</li>
		<ul>
			<li>二级一条</li>
			<li>二级二条</li>
			<li>二级三条</li>
		</ul>
		<li>第二条</li>
		<ul>
			<li>第二条二级一</li>
			<li>第二条二级二</li>
			<ul>
				<li>三级一条</li>
				<li>三级二条</li>
				<ul>
					<li>三级一条</li>
					<li>三级二条</li>
						<ul>
							<li>four one</li>
							<li>four two</li>
						</ul>
					<li>三级三条</li>
				</ul>
				<li>三级三条</li>
				<ul>
					<li>三级一条</li>
					<li>三级二条</li>
						<ul>
							<li>four one</li>
							<li>four two</li>
						</ul>
				</ul>
				<li>三级四条</li>
				<ul>
					<li>三级一条</li>
					<li>三级二条</li>
						<ul>
							<li>four one</li>
							<li>four two</li>
						</ul>
					<li>三级三条</li>
				</ul>
			</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"),
			clickFun:function(obj){
				alert($(obj).text());
				$(obj).css({
					"background":"red"
				});
			}
		});
	});
</script>
</body>
</html>

ul2tree.0.1.1.js

/**
* 将ul结构转化为树形菜单函数
* 待解决问题：
* 1 异步加载
* 2 
* 3 
* 4 
*/
$.extend({
	ul2tree:function(opt,callback){
	// 默认参数
	this.defaults = {
		obj           :"",
		img_width     :"18px", // 图片宽度
		line_height   :"18px", // 行高
		font_size     :"12px", // 字体大小
		clickFun      :false, // 文字点击函数，带一个参数，是<li />节点，点击事件的目标节点是<li />下的<span />标签
		isLineImg     :true, // 是否使用线形图片
		forderOpen    :"images/folderOpen.gif", // 打开的文件夹图片
		forderClosed  :"images/folderClosed.gif", // 关闭的文件夹图片
		fileImg       :"images/leaf.gif", // 文件图片
		blankImg      :"images/blank.gif", // 空白占位图片
		lineImg1      :"images/line1.gif", // 竖线图片
		lineImg2      :"images/line2.gif", // └ 线图片
		lineImg3      :"images/line3.gif", // ├ 线图片
		lineImg4      :"images/line4.gif" // ┌ 线图片
	};
	
	//参数初始化
	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(opts.clickFun){
			$(this).html("<span>" + $(this).text() + "</span>");
			$(this).find("span").click(function(){
				opts.clickFun($(this).parent());
			});
		}
		
		// 增加节点图片
		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 + "\" />");
		}
	});
	
	// 判断是否使用线条图片
	if(opts.isLineImg){
		// 增加线条
		$(opts.obj).parent().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).parent().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",opts.lineImg1);
				}
			}
		});
		
		// 处理根节点的线条样式
		$(opts.obj).find("li").first().find("img[src='" + opts.lineImg3 + "']:last").attr("src", opts.lineImg4);
		
		// 处理各级目录以 li 结尾的线条样式
		$(opts.obj).find("li").each(function(){
			if($(this).next().size() == 0){
				$(this).find("img[src='" + opts.lineImg3 + "']:first").attr("src", opts.lineImg2);
			}
		});
		
		// 处理各级目录以 ul 结尾的线条样式
		$(opts.obj).find("ul").each(function(){
			if($(this).next().size() == 0){
				$(this).prev().find("img[src='" + opts.lineImg3 + "']:first").attr("src", opts.lineImg2);
				
				// 添加空白占位图片
				var size = $(this).children().first().find("img").size() - 3;
				$(this).find("li").each(function(){
					$(this).find("img:eq(" + size + ")").attr("src",opts.blankImg);
				});
			}
		});
	}else{
		// 不适用线条图片时，使用空白分出级别
		$(opts.obj).find("ul").each(function(){
			$(this).css({
				"padding-left":opts.img_width
			});
		});
	}
}});

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