jquery分类树形菜单插件代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery分类树形菜单插件代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery分类树形菜单插件代码</title>
<link rel="stylesheet" type="text/css" href="css/SimpleTree.css"/>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/SimpleTree.js"></script>
<script type="text/javascript">
$(function(){

	$(".st_tree").SimpleTree({
	
		/* 可无视代码部分*/
		click:function(a){
			if(!$(a).attr("hasChild"))
				alert($(a).attr("ref"));
		}
		
	});
	
});
</script>

</head>
<body>
<div class="st_tree" style="width:400px;margin:0 auto;">
	<ul>
		<li><a href="#" ref="hyjm">欢迎界面</a></li>
		<li><a href="#" ref="xtgl">系统管理</a></li>
		<ul show="true">
			<li><a href="#" ref="yhgl">用户管理</a></li>
			<li><a href="#" ref="rzck">日志查看</a></li>
		</ul>
		<li><a href="#" ref="ckgl">仓库管理</a></li>
		<ul>
			<li><a href="#" ref="kcgl">库存管理</a></li>
			<li><a href="#" ref="shgl">收货管理</a></li>
			<li><a href="#" ref="fhgl">发货管理</a></li>
			<ul>
				<li><a href="#" ref="yhgl">用户管理</a></li>
				<li><a href="#" ref="rzck">日志查看</a></li>
			</ul>
		</ul>
	</ul>
</div>
</body>
</html>

JS代码(SimpleTree.js):

/*Author���źƻ�Date��2011.11.25 0:12Version��SimpleTree 1.0*/
$(function(){
	$.fn.extend({
	SimpleTree:function(options){
	//��ʼ������var option = $.extend({
	click:function(a){
}
}
,options);
	option.tree=this;
	/* �ڲ�����������ӶԵ�ǰ�˵��������ã��Ա��ڶ�����ʹ�øò˵��� */
option._init=function(){
	/* * ��ʼ���˵�չ��״̬���Լ��ֲ�ڵ����ʽ */
this.tree.find("ul ul").hide();
	/* ���������Ӽ��˵� */
this.tree.find("ul ul").prev("li").removeClass("open");
	/* �Ƴ������Ӽ��˵����ڵ�� open ��ʽ */
this.tree.find("ul ul[show='true']").show();
	/* ��ʾ show ����Ϊ true ���Ӽ��˵� */
this.tree.find("ul ul[show='true']").prev("li").addClass("open");
	/* ��� show ����Ϊ true ���Ӽ��˵����ڵ�� open ��ʽ */
}
/* option._init() End */
/* �������г����Ӳ���Ӧ�����¼� */
this.find("a").click(function(){
	$(this).parent("li").click();
	return false;
}
);
	/* �˵��� <li> ���ܵ��� */
this.find("li").click(function(){
	/* * �������˵��� <li> * 1.�����û��Զ���ĵ����¼������� <li> ��ǩ�еĵ�һ����������Ϊ�������ݹ�ȥ * 2.�޸ĵ�ǰ�˵���������Ӳ˵�����ʾ״̬��������� true ��������Ϊ false������������Ϊ true�� * 3.���³�ʼ���˵� */
option.click($(this).find("a")[0]);
	/* �������� */
/* * �����ǰ�ڵ���������Ӳ˵��������� show ���Ե�ֵΪ true�����޸��� show ����Ϊ false * �����޸��� show ����Ϊ true */
if($(this).next("ul").attr("show")=="true"){
	$(this).next("ul").attr("show","false");
}
else{
	$(this).next("ul").attr("show","true");
}
/* ��ʼ���˵� */
option._init();
}
);
	/* �������и��ڵ���ʽ */
this.find("ul").prev("li").addClass("folder");
	/* ���ýڵ㡰�Ƿ�����ӽڵ㡱���� */
this.find("li").find("a").attr("hasChild",false);
	this.find("ul").prev("li").find("a").attr("hasChild",true);
	/* ��ʼ���˵� */
option._init();
}
/* SimpleTree Function End */
}
);
}
);

CSS代码(SimpleTree.css):

@charset "utf-8";/*Author：张浩华Date：2011.11.25 0:12Version：SimpleTree 1.0*/
.st_tree{padding:10px;}
/* 超链接 */
.st_tree a{text-decoration:none;}
/* 鼠标经过的超链接 */
.st_tree a:hover{color:#f33;text-decoration:underline;}
/* 菜单 */
.st_tree ul{padding:0 18px;margin:0;}
/* 菜单项 */
.st_tree ul li{font-size:13px;color:#222;line-height:18px;cursor:pointer;list-style:none;background:url(imgs/st_node.gif);background-repeat:no-repeat;padding:0 0 3px 20px;}
/* 子菜单 */
.st_tree ul li ul{}
/* 子菜单项 */
.st_tree ul li ul li{}
/* 子菜单的父节点 */
.st_tree .folder{list-style-image:url(imgs/st_icon.png);background:url(imgs/st_folder.gif);background-repeat:no-repeat;padding:0 0 0 20px;}
/* 展开的父节点 */
.st_tree .open{list-style-image:url(imgs/st_icon_open.png);background:url(imgs/st_folder_open.gif);background-repeat:no-repeat;padding:0 0 0 20px;}

附件:下载该文件资源,减少时间成本(增值服务)