【SSH网上商城项目实战04】EasyUI菜单的实现

上一节我们使用EasyUI搭建了后台页面的框架，这一节我们主要使用EasyUI技术简单实现后台菜单，先将简单功能做出来，后期再继续丰富。

1. 实现左侧菜单

首先看一下效果图：

我们可以点击“基本操作”和“其他操作”来切换菜单选项，在具体的选项内，点击不同的连接，会在右侧显示出来。我们先把左边的菜单做出来。

左侧菜单内容主要有两个：“类别管理”和“商品管理”。我们知道，上一节中，在aindex.jsp中应将后台页面的框架搭建好了，那么现在我们只要做好这两个超链接，然后放到aindex.jsp中相应的div中即可。所以我们先在WebRoot文件夹下新建一个temp.jsp文件作为临时开发文件，因为在这里写jsp可以直接测出来，等效果可以后，再将内容复制到aindex.jsp中的相应位置。

temp.jsp页面如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<%@ include file="/public/head.jspf" %>
	<style type="text/css">
		#menu {
			width:200px;
			/*border:1px solid red;*/
		}
		#menu ul {
			list-style: none;
			padding: 0px;
			margin: 0px;
		}
		#menu ul li {
			border-bottom: 1px solid #fff;

		}
		#menu ul li a {
			/*先将a标签转换为块级元素，才能设置宽和内间距*/
			display: block;
			background-color: #00a6ac;
			color: #fff;
			padding: 5px;
			text-decoration: none;
		}
		#menu ul li a:hover {
			background-color: #008792;
		}

	</style>
  </head>

  <body>
  	<div id="menu">
		<ul>
			<li><a href="#">类别管理</a>
			<li><a href="#">商品管理</a>
		</ul>
  	</div>
  </body>
</html>

temp.jsp中只做了两个链接，用li封装起来并放到div中，上面css是给这两个链接设置样式的，然后我们开启tomcat，测试一下效果如下：

做好了这两个超链接后，我们将封装两个超链接的ul拷贝到aindex.jsp中的左侧菜单内容显示位置，并简要的修改，如下：

css部分直接考到aindex.jsp的head标签里即可。看上面那个a标签，里面是title属性，并不是href，因为我们不是跳转到新的页面，因为EasyUI就这一个页面，我们要让点击后的显示放到右边的tab选项卡那里，所以我们先把跳转的action写在title属性里，后面再改。接下来，我们要通过点击类别管理，在右边的选项卡中弹出具体类容的功能。

2. 实现右侧tab选项卡

实现点击左边菜单栏弹出右边选项卡的功能，需要加入js代码了。使用EasyUI的思路是：首先点击超链接，拿到这个超链接的名字，因为弹出来的选项卡标题应该和这个超链接的名字一样的，比如“类别管理”；然后判断改名字的选项卡是否已经存在，如果存在则显示，如果不存在则创建，并显示要显示的内容。我们来看下js部分的代码：

<script type="text/javascript">
	$(function(){
		$("a[title]").click(function(){
			var text = $(this).text();
			var href = $(this).attr("title");
			//判断当前右边是否已有相应的tab
			if($("#tt").tabs("exists", text)) {
				$("#tt").tabs("select", text);
			} else {
				//如果没有则创建一个新的tab，否则切换到当前tag
				$("#tt").tabs("add",{
					title:text,
					closable:true,
					content:'<iframe title=' + text + 'src=' + href + ' frameborder="0" width="100%" height="100%" />'
					//href:默认通过url地址加载远程的页面，但是仅仅是body部分
					//href:'send_category_query.action'
				});
			}

		});
	});
</script>

我们来分析下这段js代码，首先拿到a标签，注意这个a标签是带title属性的a标签，也就是我们上面的“类别管理”超链接，然后点击，click里面又有一个function，这个function都干啥了呢？首先获取当前链接的名字，即text，然后通过title属性拿到url（因为我们刚刚把url写到title属性了），接下来判断是否已经有这个名字的选项（tab），如果有则显示该名字的选项，如果没有则创建。

我们来具体看看if里面的语句，首先通过"#tt"拿到右边部分的jquery对象，然后调用tabs构造方法即拿到tab对象，如果有则返回true，否则返回false。那么tabs()里面的两个参数是什么意思呢？首先第一个参数是方法名，第二个参数是第一个参数（方法）对应的参数，tabs("exists", text)表示调用EasyUI的exists方法，参数为text，即判断名字为text的tab是否存在，同样，下面的tabs("select", text)表示选择名字为text的tab显示，tabs("add",
{})表示新创建一个tab，{}里添加新添加tab的一些属性：title表示名字，closable:true表示有关闭按钮，即右上角的叉叉，content表示要显示的内容从哪获得，后面用<iframe>标签将一个页面的内容给包进来，这个页面不能直接访问，是通过action跳转的，从action的名字中可以看出，是引入WEB-INF/category/query.jsp页面。如果我们在该页面中的body标签中随便写个内容，然后通过点击左边菜单栏，就会在右边选项卡中显示内容。如下：

最后把aindex.jsp中的代码放到这里来：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<%@ include file="/public/head.jspf" %>
	<style type="text/css">
		#menu {
			width:60px;
			/*border:1px solid red;*/
		}
		#menu ul {
			list-style: none;
			padding: 0px;
			margin: 0px;
		}
		#menu ul li {
			border-bottom: 1px solid #fff;

		}
		#menu ul li a {
			/*先将a标签转换为块级元素，才能设置宽和内间距*/
			display: block;
			background-color: #00a6ac;
			color: #fff;
			padding: 5px;
			text-decoration: none;
		}
		#menu ul li a:hover {
			background-color: #008792;
		}

	</style>

	<script type="text/javascript">
		$(function(){
			$("a[title]").click(function(){
				var text = $(this).text();
				var href = $(this).attr("title");
				//判断当前右边是否已有相应的tab
				if($("#tt").tabs("exists", text)) {
					$("#tt").tabs("select", text);
				} else {
					//如果没有则创建一个新的tab，否则切换到当前tag
					$("#tt").tabs("add",{
						title:text,
						closable:true,
						content:'<iframe src="send_category_query.action" frameborder="0" width="100%" height="100%" />'
						//href:默认通过url地址加载远程的页面，但是仅仅是body部分
						//href:'send_category_query.action'
					});
				}

			});
		});
	</script>
</head>

	<body class="easyui-layout">
	    <div data-options="region:'north',title:'欢迎来到易购后台管理',split:true" style="height:100px;"></div>
	    <div data-options="region:'west',title:'系统操作',split:true" style="width:200px;">
	    	<!-- 此处显示的是系统菜单 -->
	    	<div id="menu" class="easyui-accordion" data-options="fit:true">
    			<div title="基本操作" data-options="iconCls:'icon-save'">
        			<ul>
						<li><a href="#" title="send_category_query.action">类别管理</a>
						<li><a href="#">商品管理</a>
					</ul>
    			</div>
    			<div title="其他操作" data-options="iconCls:'icon-reload'">
    				<ul>
						<li><a href="#">类别管理</a>
						<li><a href="#">商品管理</a>
					</ul>
    			</div>
			</div>
	    </div>
	    <div data-options="region:'center',title:'后台操作页面'" style="padding:1px;background:#eee;">
	    	<div id="tt" class="easyui-tabs" data-options="fit:true">
    			<div title="系统缺省页面" style="padding:10px;">
    				此处以后显示相应的系统信息（当前操作系统的类型，当前项目的域名，硬件的相关配置或者显示报表
    			</div>   

    		</div>
	    </div>
	</body>  

</html>

很明显，代码没有抽取，css和js都混在一个jsp页面了，没关系，后面会一起抽取的。

到此为止，我们完成了EasyUI菜单的实现，这里只是将实现方法完成了，具体显示的内容后面根据具体需求再完善。

（注：到最后我会提供整个项目的源码下载！欢迎大家收藏或关注）

相关阅读：http://blog.csdn.net/column/details/str2hiberspring.html

_____________________________________________________________________________________________________________________________________________________

-----乐于分享，共同进步！

-----更多文章请看：http://blog.csdn.net/eson_15

时间： 2024-08-28 15:11:36

【SSH网上商城项目实战04】EasyUI菜单的实现的相关文章

【SSH网上商城项目实战27】域名空间的申请和项目的部署及发布

前面陆陆续续的完成了网上商城的一些基本功能,虽然还有很多地方有待完善,但是不影响项目的部署和发布,我们可以先来玩一把,这一节主要介绍下域名空间的申请以及项目的部署和发布流程. 1. 域名空间的申请 作为一个伟大的屌丝,肯定没钱买域名空间,很自然的想到去申请个免费的,现在免费的域名空间也很多,我在福佳jsp技术网上申请了一个试用期是15天的,大家也可以去申请个玩玩,反正作为学习,这已经足够了,当然,如果要长期的肯定要付费的.注册过程我截几个图,如下: 然后下一步,最后开通如下: 建议把上面这些信息

【SSH网上商城项目实战16】Hibernate的二级缓存处理首页的热门显示

网上商城首页都有热门商品,那么这些商品的点击率是很高的,当用户点击某个热门商品后需要进入商品的详细信息页面,就像淘宝里面那样.那么每次点击都要去后台查询一下该商品的详细信息,就会发送相应的sql语句,每次刷新一下详细页面也会发sql语句,这样的话,性能肯定会受到很大的影响.那么使用Hibernate的二级缓存就可以解决这个问题. 有些人可能会想,我们可以使用重定向,这样的话,在用户第一次访问的时候把信息查出来放到session中,以后每次用户刷新就可以去session中拿了,这样就不用去数据库中

【SSH网上商城项目实战21】从Demo中看易宝支付的流程

这一节我们先写一个简单点的Demo来测试易宝支付的流程,熟悉这个流程后,再做实际的开发,因为是一个Demo,所以我没有考虑一些设计模式的东西,就是直接实现支付功能.实现支付功能需要易宝给我们提供的API.那么问题来了,使用第三方支付平台最主要的一件事就是获取该平台的API,我们首先得获取他们的API以及开发文档,然后才可以做进一步的开发. 1. 获取易宝的API 获取API的第一步,要在易宝上注册一个账号,这个账号是商家的账号,后面买家付款后,会将钱款存入该账号中,然后商家自己提取到银行卡,易宝

【SSH网上商城项目实战25】使用java email给用户发送邮件

当用户购买完商品后,我们应该向用户发送一封邮件,告诉他订单已生成之类的信息,邮箱地址是从用户的基本信息中获取,好了,首先我们来看一下Java中发送邮件的方法. 1. java中发送email的方法     在完善这个项目之前,先来回顾一下java中是如何发送邮件的,首先肯定需要发送邮件的jar包:mail.jar,导入到lib目录下,好了,下面我们先写一个普通的java程序来回顾一下java email的知识点: public class SendEmailDemo { public stati

【SSH网上商城项目实战20】在线支付平台的介绍

之前已经完成了首页的显示,用户添加购物车,确认订单等功能,下面就是支付功能的开发了.用户确认了订单后会直接跳转到支付页面进行在线支付,在线支付需要第三方的接口,这一节主要介绍一些关于第三方支付的内容,从下一节开始,我们真正开发在线支付模块. 1. 在线支付介绍 在线支付是指卖方与买方通过因特网上的电子商务网站进行交易时,银行为其提供网上资金结算服务的一种业务.它为企业和个人提供了一个安全.快捷.方便的电子商务应用环境和网上资金结算工具.在线支付不仅帮助企业实现了销售款项的快速归集,缩短收款周期,

【SSH网上商城项目实战14】商城首页UI的设计

前面我们利用EasyUI和SSH搭建好了后台的基本框架,做好了后台的基本功能,包括对商品类别的管理和商品的管理等,这一节我们开始搭建前台页面. 做首页的思路:假设现在商品的业务逻辑都有了,首先我们需要创建一个监听器,在项目启动时将首页的数据查询出来放到application里,即在监听器里调用后台商品业务逻辑的方法. 1.  首页商品显示逻辑 在首页,我们只显示商品热点类别中的前几个商品,比如热点类别有儿童休闲类,女性休闲类,男性休闲类,那我们会有三个板块来显示不同的商品类,每个类别里再显示几个

【SSH网上商城项目实战06】基于DataGrid的数据显示

EasyUI中DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识.它是轻量级的且功能丰富.单元格合并.多列标题.冻结列和页脚只是其中的一小部分功能. 1. 回顾一下第4节内容 在第4节中,我们使用EasyUI搭建好了左侧菜单栏,并且通过点击菜单选项在右边弹出对应的选项卡.这节我们来使用DataGrid把右边的选项卡部分做好.先看一下第4节中最后的aindex.jsp文件(也可参见第4节

【SSH网上商城项目实战10】商品类基本模块的搭建

前面我们完成了与商品类别相关的业务逻辑,接下来我们开始做具体商品部分. 1. 数据库建表并映射Model 首先我们在数据库中新建一张表,然后使用逆向工程将表映射成Model类,表如下: /*=============================*/ /* Table: 商品表结构 */ /*=============================*/ create table product ( /* 商品编号,自动增长 */ id int primary key not null aut

【SSH网上商城项目实战29】使用JsChart技术在后台显示商品销售报表

这个项目终于接近尾声了,注册功能我就不做了,关于注册功能我的另一篇博客详细的介绍了一下注册的表单验证,可以直接把功能加到本项目中,修改一下相关的跳转即可,就不再做了.另外,目前这个项目只有action层和service层,dao层我还没抽取,做完这个报表,我把dao层抽取一下,再对整个项目做个总结,差不多就可以上传源码了,到时候欢迎大家下载~ 这一节主要做一下最后一个功能:使用JsChart这个工具来显示商品的销售报表,JsChart是很好用的一款制作报表的工具,之所以好用,是因为它的官方实例做