首先页面去加载的时候，会去加载main.js文件，我们在加载left.jsp、top.jsp body.jsp，现在我们修改main.jsp的代码，让它去请求的时候去访问的是不在直接去访问left.jsp,而是去访问CategoryServlet的findAll方法，将查询的分类的结果在left.jsp中显示出来。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>main</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/main.css'/>">
</head>

<body>
<table class="table" align="center">
<tr class="trTop">
<td colspan="2" class="tdTop">
<iframe frameborder="0" src="<c:url value='/jsps/top.jsp'/>" name="top"></iframe>
</td>
</tr>
<tr>
<td class="tdLeft" rowspan="2">
<iframe frameborder="0" src="<c:url value='/CategoryServlet?method=findAll'/>" name="left"></iframe>
</td>
<td class="tdSearch" style="border-bottom-width: 0px;">
<iframe frameborder="0" src="<c:url value='/jsps/search.jsp'/>" name="search"></iframe>
</td>
</tr>
<tr>
<td style="border-top-width: 0px;">
<iframe frameborder="0" src="<c:url value='/jsps/body.jsp'/>" name="body"></iframe>
</td>
</tr>
</table>
</body>
</html>

我们来看看原始的left.jsp的代码。该代码实现了手风琴式的效果

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>left</title>

    <base target="body"/>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

    <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>

    <script type="text/javascript" src="<c:url value='/menu/mymenu.js'/>"></script>

    <link rel="stylesheet" href="<c:url value='/menu/mymenu.css'/>" type="text/css" media="all">

    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/left.css'/>">

<script language="javascript">

var bar = new Q6MenuBar("bar", "传智播客网上书城");

$(function() {

    bar.colorStyle = 4;

    bar.config.imgDir = "<c:url value='/menu/img/'/>";

    bar.config.radioButton=true;

    bar.add("程序设计", "Java Javascript", "/goods/jsps/book/list.jsp", "body");

    bar.add("程序设计", "JSP", "/goods/jsps/book/list.jsp", "body");

    bar.add("程序设计", "C C++ VC VC++", "/goods/jsps/book/list.jsp", "body");

    bar.add("办公室用书", "微软Office", "/goods/jsps/book/list.jsp", "body");

    bar.add("办公室用书", "计算机初级入门", "/goods/jsps/book/list.jsp", "body");

    bar.add("图形 图像 多媒体", "Photoshop", "/goods/jsps/book/list.jsp", "body");

    bar.add("图形 图像 多媒体", "3DS MAX", "/goods/jsps/book/list.jsp", "body");

    bar.add("图形 图像 多媒体", "网页设计", "/goods/jsps/book/list.jsp", "body");

    bar.add("图形 图像 多媒体", "Flush", "/goods/jsps/book/list.jsp", "body");

    bar.add("操作系统/系统开发", "Windows", "/goods/jsps/book/list.jsp", "body");

    bar.add("操作系统/系统开发", "Linux", "/goods/jsps/book/list.jsp", "body");

    bar.add("操作系统/系统开发", "系统开发", "/goods/jsps/book/list.jsp", "body");

    $("#menu").html(bar.toString());

});

</script>

</head>

<body>

  <div id="menu"></div>

</body>

</html>

我们来对这个手风琴类进行详细分析

第一步首先必须加装手风琴对应的js文件

该文件放在

在left.jsp中要使用该效果，就必须加装该上面的文件

<script type="text/javascript" src="<c:url value='/menu/mymenu.js'/>"></script>

    <link rel="stylesheet" href="<c:url value='/menu/mymenu.css'/>" type="text/css" media="all">

然后我们来看看这个类的使用情况

var bar = new Q6MenuBar("bar", "传智播客网上书城");

其中var对应的变量名称必须和Q6MenuBar类的构造函数的参数的必须一致 ，var bar = new Q6MenuBar("bar1", "传智播客网上书城");一个是bar一个是bar1这样就算错误的

第二个构造函数的参数是手风琴的标题

bar.colorStyle = 4; 设置是手风琴的样式，值有 0 . 1 2 3 4几个样式，

如果设置成0，样式如下

bar.config.imgDir = "<c:url value='/menu/img/'/>";

是当面加号和减号的图标

如果你要更换图标，就要修改mymenu.js的代码

bar.config.radioButton=true;

表示的是是否允许多级标题展开，设置成true表示不允许

当点击办公室用书的时候，如果设置成true，程序设计的二级标题就要收缩起来。

    bar.add("程序设计", "Java Javascript", "/goods/jsps/book/list.jsp", "body");

    bar.add("程序设计", "JSP", "/goods/jsps/book/list.jsp", "body");

    bar.add("程序设计", "C C++ VC VC++", "/goods/jsps/book/list.jsp", "body");

上面程序设计是一级标题的名称，

Java Javascript表示二级标题的名称
/goods/jsps/book/list.jsp表示点击二级标题的时候显示那个页面
"body"第四个参数表示在那个位置显示，如果没有第四个参数，就表示在当前的页面位置显示，现在left.jsp在main.jsp的最左边，如果没有第四个参数，显示效果如下所示

这里第四个参数是body指的是在body这个位置上显示，

在main.jsp中指定了body

<tr>
<td style="border-top-width: 0px;">
<iframe frameborder="0" src="<c:url value='/jsps/body.jsp'/>" name="body"></iframe>
</td>
</tr>

显示的效果如下：

$("#menu").html(bar.toString());
这里的menu必须和left.jsp中的

<body>
<div id="menu"></div>
</body>

一一对应。

上面的

bar.add("程序设计", "Java Javascript", "/goods/jsps/book/list.jsp", "body");

    bar.add("程序设计", "JSP", "/goods/jsps/book/list.jsp", "body");

    bar.add("程序设计", "C C++ VC VC++", "/goods/jsps/book/list.jsp", "body");

    bar.add("办公室用书", "微软Office", "/goods/jsps/book/list.jsp", "body");

    bar.add("办公室用书", "计算机初级入门", "/goods/jsps/book/list.jsp", "body");

    bar.add("图形 图像 多媒体", "Photoshop", "/goods/jsps/book/list.jsp", "body");

    bar.add("图形 图像 多媒体", "3DS MAX", "/goods/jsps/book/list.jsp", "body");

    bar.add("图形 图像 多媒体", "网页设计", "/goods/jsps/book/list.jsp", "body");

    bar.add("图形 图像 多媒体", "Flush", "/goods/jsps/book/list.jsp", "body");

    bar.add("操作系统/系统开发", "Windows", "/goods/jsps/book/list.jsp", "body");

    bar.add("操作系统/系统开发", "Linux", "/goods/jsps/book/list.jsp", "body");

    bar.add("操作系统/系统开发", "系统开发", "/goods/jsps/book/list.jsp", "body");

上面的数据是我们固定写死的，现在我们要修改left.jsp,遍历从CategoryServlet中返回的数据，显示出来。

修改的代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>left</title>

    <base target="body"/>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

    <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>

    <script type="text/javascript" src="<c:url value='/menu/mymenu.js'/>"></script>

    <link rel="stylesheet" href="<c:url value='/menu/mymenu.css'/>" type="text/css" media="all">

    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/left.css'/>">

<script language="javascript">

var bar = new Q6MenuBar("bar", "传智播客网上书城");

$(function() {

    bar.colorStyle = 4;

    bar.config.imgDir = "<c:url value='/menu/img/'/>";

    bar.config.radioButton=true;

    <%-- 对服务器返回的数据进行遍历--%>

    <c:forEach items="${parents}" var="parent">

       <c:forEach items="${parent.children}" var="child">

        bar.add("${parent.cname}", "${child.cname}", "/goods/jsps/book/list.jsp", "body");

       </c:forEach>

    </c:forEach>

    $("#menu").html(bar.toString());

});

</script>

</head>

<body>

  <div id="menu"></div>

</body>

</html>
这样就达到了修改的效果，我们来看下最后的显示



												


											
JavaWeb网上图书商城完整项目--day02-28.查询所有分类功能之left页面使用Q6MenuBar组件显示手风琴式下拉菜单的更多相关文章
	

    
								
  1. JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
		
    1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...
    
		
    2. 
						
  2. JavaWeb网上图书商城完整项目--24.注册页面的css样式实现
		
    现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...
    
		
    3. 
						
  3. JavaWeb网上图书商城完整项目--过滤器解决中文乱码
		
    我们知道,如果是POST请求,我们需要调用request.setCharacterEncoding(“utf-8”)方法来设计编码:如果是GET请求,我们需要自己手动来处理编码问题.如果我们使用了En ...
    
		
    4. 
						
  4. JavaWeb网上图书商城完整项目--13.项目所需环境的搭建
		
    1.首先安装mysql 创建项目所需的数据库,直接运行项目提供的goods.sql文库 2.myeclipse创建一个web project ,项目的名称是goods 把视频中提供的项目原型下的提供的 ...
    
		
    5. 
						
  5. JavaWeb网上图书商城完整项目--BaseServlet
		
    1.以前进行操作的时候,例如我们进行登陆操作我们使用LoginServlet进行处理,进行注册操作我们使用RegisterServlet,很多业务的操作的时候我们就要定义很多个Servlet 有了Ba ...
    
		
    6. 
						
  6. JavaWeb网上图书商城完整项目--day02-21.退出功能的实现
		
    1.当用户点击退出的时候,跳转到登陆页面 当用户点击退出的时候,需要将session中保存的登陆的用户销毁掉 当用户点击退出的时候,调用UserServlet的quit方法 退出按钮在top.jsp中 ...
    
		
    7. 
						
  7. JavaWeb网上图书商城完整项目--day02-17.登录功能页面实现
		
    1.当在登陆页面点击登陆按钮的时候,会调用UserServlet的login方法,我们要在login.jsp中进行配置 2.要在login.jsp中处理Servlet在后台业务操作之后forward到 ...
    
		
    8. 
						
  8. JavaWeb网上图书商城完整项目--day03-1.图书模块功能介绍及相关类创建
		
    1 前两天我们学习了user用户模块和图书的分类模块,接下来我们学习图书模块 图书模块的功能主要是下面的功能: 2 接下来我们创建对应的包 我们来看看对应的数据库表t_book CREATE TABL ...
    
		
    9. 
						
  9. JavaWeb网上图书商城完整项目--day02-12.激活功能各层实现
		
    1.我们来看程序的代码 数据库层: 1.通过激活码查找到对应的用户 2.设置用户的激活状态 2.业务层 1.通过数据库接口通过验证码得到对应的用户 2.判断当用户是否为空,如果没有通过激活码查找到对应 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Python 每日一练(3)
			
    引言 今天的每日一练,学习了一下用Python生成四位的图像验证码,就是我们常常在登录时见到的那种(#`O′) 思路分析 正如常见的那种图像验证码,它是由数字和字母的随机组合产生的,所以我们首先的第一 ...
    
			
    2. 
						
  2. vscode jshint 报'import' is only available in ES6 (use 'esversion: 6'). (W119)错误
			
    vue项目用vscode打开代码前出现黄点,js报错 'import' is only available in ES6 (use 'esversion: 6'). (W119) 意思是import属 ...
    
			
    3. 
						
  3. apt-key 密钥管理，apt-secure 原理 验证链 验证测试
			
    apt-key 用于管理Debian Linux系统中的软件包密钥.每个发布的deb包,都是通过密钥认证的,apt-key用来管理密钥. apt-key list 列出已保存在系统中key.包括 /e ...
    
			
    4. 
						
  4. PowerPC-MPC56xx Flash模式启动过程
			
    https://mp.weixin.qq.com/s/SpBOfzJJ1OizYP-rsLJVqQ   Flash启动模式为最常用模式. 一般情况下,芯片上电之后,从flash起始位置读取第一条指令的 ...
    
			
    5. 
						
  5. 分享按钮（QQ，微信，微博等）移入动画效果
			
    ps:最近写的很多博客都是在以前在项目里写过的,之所以现在写出来,最大的目的就是希望自己以后用到的时候比较容易找,而且现在再写一遍,有助于加深印象! 很简单的效果,说先实现方式: 1.图标来自 阿里巴 ...
    
			
    6. 
						
  6. Java实现蓝桥杯分金币
			
    分金币 圆桌旁坐着n个人,每人有一定数量的金币,金币总数能被n整除.每个人可以给他左右相邻的人一些金币, 最终使得每个人的金币数目相等.你的任务是求出被转手的金币数量的最小值. 比如,n=4,且4个人 ...
    
			
    7. 
						
  7. Grafana 插件地图Worldmap不显示
			
    介绍 最近上了ELK 日志分析,想着手看下用户的分布情况,在kibana 中展示用户分布情况是没有问题的,但是索引添加到Granfana 中的话就无法展示. 问题描述 添加ES索引以后,map地图一片 ...
    
			
    8. 
						
  8. 根据现有Bitmap生成相同图案指定大小的新Bitmap
			
    通过一张现有的Bitmap,画出一张同样的但是大小使我们指定的Bitmap 需求:直接createBitmap的话不允许生成的bitmap的宽高大于原始的,因此需要特定方法来将一张Bitmap的大小进 ...
    
			
    9. 
						
  9. Linux命令总结大全，包含所有linux命令
			
    使用说明:此文档包含所有的Linux命令,只有你想不到的没有你看不到的,此文档共计10万余字,有8400多行,预计阅读时间差不多需要3个小时左右,所以要给大家说一说如何阅读此文档 为了方便大家阅读,我 ...
    
			
    10. 
						
  10. java第三阶段作业总结
			
    Java第三阶段总结 前言 到这里,Java课程学习进入了尾声,在这学习过程中,我学习到很多,也发现了自己的很多不足,这篇博客主要针对的是Java整门课程学习的总结. 课程收获 对整门课程的学习,我有 ...
    
			
    11.