SSH框架网上商城项目第4战之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://www.jb51.net/article/86099.htm

原文地址：http://blog.csdn.net/eson_15/article/details/51297705
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • SSH框架网上商城项目第26战之订单支付后发送短信提醒

    SSH框架网上商城项目第26战之订单支付后发送短信提醒

    上一节我们使用了Java mail完成了给买家发送邮件的功能,还遗留一个功能,就是给买家发送短信,告诉他订单已经生成之类的.这一节主要介绍一下如何在用户支付完成后自动给用户发送短信. 1. 申请短信发送功能 很明显,我们自己不能发短信,也没有做短信的功能,所以我们需要去借助第三方的运营商.但是像中国移动,联通,电信这种不会直接给我们提供短信服务,而是先把短信服务提供给一些运营商,然后这些运营商再提供给我们. 有一个运营商叫"中国网建sms短信通"(官网地址).这个运营商可以给我们提供短

  • php网上商城购物车设计代码分享

    php网上商城购物车设计代码分享

    首先,购物车的数据库设计: 1. id 2. goods_id 商品ID 3. session_id 购物车ID 4. goods_sn 商品编码 5. goods_name 商品名称 6. shop_price 商品商城售价 7. goods_price 商品真实售价(与shop_price的区别在于,当打折的时候,shop_price是打折之前商品的售价,而goods_price是打折之后的) 8. goods_number 数量 9. weight 商品重量 10. goods_attr

  • SSH框架网上商城项目第2战之基本增删查改、Service和Action的抽取

    SSH框架网上商城项目第2战之基本增删查改、Service和Action的抽取

    上一节<SSH框架网上商城项目第1战之整合Struts2.Hibernate4.3和Spring4.2>我们搭建好了Struts2.Hibernate和Spring的开发环境,并成功将它们整合在一起.这节主要完成一些基本的增删改查以及Service.Dao和Action的抽取. 1. Service层的抽取         上一节中,我们在service层简单写了save和update方法,这里我们开始完善该部分的代码,然后对service层的代码进行抽取. 1.1 完善CategorySer

  • java网上商城项目第1篇之用户注册模块

    java网上商城项目第1篇之用户注册模块

    本文为大家讲解了商城项目用户注册模块,供大家参考,先看看效果图: 1.前台JS校验: 事件触发: onsubmit="checkForm()" 2.使用AJAX完成异步用户名是否存在校验 ①事件触发:onblur="checkUserName()" ②AJAX function checkUsername(){ var username = $("#username").val(); $("#span1").load(&quo

  • SSH框架网上商城项目第23战之在线支付功能实现

    上一节我们做好了支付页面的显示,从上一节支付页面显示的jsp代码中可以看出,当用户点击确认支付时,会跳到${shop}/pay_goBank.action的action,也就是说,提交后我们得在payAction中的goBank方法中处理一些逻辑(即21节demo中的那个流程图的逻辑),即获得明文,将明文加密成签名(密文)然后再去访问易宝服务器,易宝连接银行,完成支付. 但是考虑到MVC设计模式,我们会将上面这些业务逻辑放到Service层中处理,所以下面我们来实现21节中那个demo的支付逻辑

  • php 网上商城促销设计实例代码

    大体的思想,每一个促销要新建一个促销类,有专门的开关来控制是否生效. 用商品里面的促销识别码来判断具体调用哪一个促销实例. 首先,在添加商品的时候,分两步,第一步是添加状态,第二步是把购物车内的商品显示这个状态. 一,添加步骤几个重要的点: 1,添加商品之前,遍历所有的促销互斥条件. 例如,某一款商品不可以和另一个商品同时在一个购物车内:或者某个用户权限,不可以购买特定的一件商品等等. 2,添加商品之前,选择特定的促销实例,来进行添加之前的操作. 注:第二点与第一点的区别在于1是要遍历所有的促销

  • SSH框架网上商城项目第30战之项目总结（附源码下载地址）

    0. 写在前面 友情提示:下载地址在下面哦. 项目基本完成了,加上这个总结,与这个项目相关的博客也写了30篇了,积少成多,写博客的过程是固化思路的一个过程,对自己很有用,同时也能帮助别人.顺便说个题外话,在学习的过程中肯定会遇到很多异常出现,我们要做的首先是定位这个异常,一般异常的后面都会跟一个或多个Caused by:xxx,这些都是引起异常的原因,一般我们找最下面的一个Caused by,那里往往才是问题的根源.如果自己解决不了,可以去谷歌.百度搜索(搜索的时候别一大堆异常往上一贴,注意搜关

  • java网上商城开发之邮件发送功能（全）

    java网上商城开发之邮件发送功能（全）

    最近在学习网上商城时,接触到了一个邮件发送的功能.之前一直在使用邮箱进行发送邮件,但是其中的具体如何运转的却不知道是怎么回事.那么邮件发送究竟是怎么一回事呢? 邮件发送过程: 过程描述:首先是发送人将邮件通过客户端软件发送到特定的服务器上,然后通过电子邮件简单传输协议(SMTP)来进行传输,收件人通过POP3协议将邮件从服务器上接受回来.这样就实现了邮件之间的相互传送. 实现过程: 在有网络的情况下,我们可以直接使用搜狐.网易等邮箱进行发送.那么如何在没有网络的情况下,实现内部之间的发送呢? 首

  • SSH框架网上商城项目第20战之在线支付平台

    SSH框架网上商城项目第20战之在线支付平台

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

  • SSH框架网上商城项目第8战之查询和删除商品类别功能实现

    SSH框架网上商城项目第8战之查询和删除商品类别功能实现

    上一节我们完成了使用DataGrid显示所有商品信息,这节我们开始添加几个功能:添加.更新.删除和查询.首先我们实现下前台的显示,然后再做后台获取数据. 1. 添加.更新.删除和查询功能的前台实现 DataGrid控件里有个toolbar属性,是添加工具栏的,我们可以在toolbar属性中添加这些按钮来实现相应的功能.先看一下官方文档对toolbar的定义: 我们使用数组的方式定义工具栏,在query.jsp页面中新添加如下代码: <%@ page language="java"

随机推荐