一个web左侧菜单例子

最新推荐文章于 2024-07-18 16:15:24 发布

bcbobo21cn

最新推荐文章于 2024-07-18 16:15:24 发布

阅读量7.6k

点赞数 1

分类专栏：原创教程 .Net web前端文章标签： html css 左侧菜单

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/48517953

版权

.Net 同时被 3 个专栏收录

382 篇文章 14 订阅

订阅专栏

原创教程

190 篇文章 6 订阅

订阅专栏

web前端

150 篇文章 1 订阅

订阅专栏

一左侧菜单简介并更换图标

图图：

码码：

<link rel="stylesheet" type="text/css" href="js/tree_themes/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">
<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>

这是一个较常用的网上可下载到的左侧菜单例子；

图1 是其运行效果；

首先定义div，其css类为st_tree;

然后定义列表ul；每个li为一个一级菜单；

下级菜单再在某个li下定义ul li列表；

下面改造一下，把图标换成兔兔图标看看；

换完之后一看，效果如图2；图标重叠了，兔子都看不到；黑兔子图标并挡住了字；

先把黑兔子换成白兔子，然后调整css文件内容；

/* 菜单项 */
.st_tree ul li{ 
	font-size:13px; 
	color:#222; 
	line-height:18px; 
	cursor:pointer;
	list-style:none; 
	background:url(imgs/tutu2.png); 
	background-repeat:no-repeat; 
	padding:0 0 50px 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/tutu3.png); 
	background-repeat:no-repeat; 
	padding:0 50 0 20px; 
}

/* 展开的父节点 */
.st_tree .open{ 
	list-style-image:url(imgs/st_icon_open.png); 
	background:url(imgs/tutu1.png); 
	background-repeat:no-repeat; 
	padding:0 50 0 20px; 
}

把相关的三个上或下边距由0改为50；再运行；好了；效果如图3、4；

兔子出来了；

现在可以查看兔子库存、收兔子、发兔子......；

源码下载：

http://pan.baidu.com/s/1CzwRk

看下我的兔子图标，相当的可爱；

二 SimpleTree.js分析

$(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 */
		
	});
});

主要是初始化参数和函数，a和li的点击函数；样式和属性设置；

$.fn.extend({ 是什么：

jQuery为开发插件提拱了两个方法，分别是：

jQuery.fn.extend();
jQuery.extend();

jQuery.extend(object)

为jQuery类添加类方法，可以理解为添加静态方法

jQuery.fn.extend(object);

对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

参阅
http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html