JavaWeb网上图书商城完整项目--day02-28.查询所有分类功能之left页面使用Q6MenuBar组件显示手风琴式下拉菜单
首先页面去加载的时候，会去加载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组件显示手风琴式下拉菜单的更多相关文章
- JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...
- JavaWeb网上图书商城完整项目--24.注册页面的css样式实现
现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...
- JavaWeb网上图书商城完整项目--过滤器解决中文乱码
我们知道,如果是POST请求,我们需要调用request.setCharacterEncoding(“utf-8”)方法来设计编码:如果是GET请求,我们需要自己手动来处理编码问题.如果我们使用了En ...
- JavaWeb网上图书商城完整项目--13.项目所需环境的搭建
1.首先安装mysql 创建项目所需的数据库,直接运行项目提供的goods.sql文库 2.myeclipse创建一个web project ,项目的名称是goods 把视频中提供的项目原型下的提供的 ...
- JavaWeb网上图书商城完整项目--BaseServlet
1.以前进行操作的时候,例如我们进行登陆操作我们使用LoginServlet进行处理,进行注册操作我们使用RegisterServlet,很多业务的操作的时候我们就要定义很多个Servlet 有了Ba ...
- JavaWeb网上图书商城完整项目--day02-21.退出功能的实现
1.当用户点击退出的时候,跳转到登陆页面 当用户点击退出的时候,需要将session中保存的登陆的用户销毁掉 当用户点击退出的时候,调用UserServlet的quit方法 退出按钮在top.jsp中 ...
- JavaWeb网上图书商城完整项目--day02-17.登录功能页面实现
1.当在登陆页面点击登陆按钮的时候,会调用UserServlet的login方法,我们要在login.jsp中进行配置 2.要在login.jsp中处理Servlet在后台业务操作之后forward到 ...
- JavaWeb网上图书商城完整项目--day03-1.图书模块功能介绍及相关类创建
1 前两天我们学习了user用户模块和图书的分类模块,接下来我们学习图书模块 图书模块的功能主要是下面的功能: 2 接下来我们创建对应的包 我们来看看对应的数据库表t_book CREATE TABL ...
- JavaWeb网上图书商城完整项目--day02-12.激活功能各层实现
1.我们来看程序的代码 数据库层: 1.通过激活码查找到对应的用户 2.设置用户的激活状态 2.业务层 1.通过数据库接口通过验证码得到对应的用户 2.判断当用户是否为空,如果没有通过激活码查找到对应 ...
随机推荐
- return break 和continue在for循环中的不同作用
平时自己经常在函数里见到return,在switch语句中使用break,而continue则用的不多. 其实这三者都能在for循环中发挥不同的作用,让代码更加灵活. 先说return return是 ...
- [leetcode] 并查集（Ⅱ）
最长连续序列 题目[128]:链接. 解题思路 节点本身的值作为节点的标号,两节点相邻,即允许合并(x, y)的条件为x == y+1 . 因为数组中可能会出现值为 -1 的节点,因此不能把 root ...
- zabbix通过IPMI模式监控服务器风扇转速和温度反映机房室温变化实例
说明:2019年4月7日321机房OA服务器主板监控风扇转速和温度有明显升高,其后3天呈逐日升高趋势.检查机房感觉空调制冷量不足.4月11日联系空调维修进行处理,空调制冷恢复正常,风扇转速和温度监 ...
- Spring boot Sample 004之spring-boot-configuration-yaml
一.环境 1.1.Idea 2020.1 1.2.JDK 1.8 二.目的 通过yaml文件配置spring boot 属性文件 三.步骤 3.1.点击File -> New Project - ...
- js函数中的this关键字
关于这个this关键字,也是很多项目中常常被用到的,那么,有人也许会问,干嘛要用this呢,在函数被调用时,直接指明是什么对象在调用不就行了?还整那么个模模糊糊的概念出来干嘛?不过嘛,存在即真理,既然 ...
- 总结了一下css的部分基础知识点。---css学习笔记01
一. css基础 1. 什么是css 层叠样式表:层叠 2. css的三种使用方式 style 属性 --> <div style="css属性值"></d ...
- 容器技术之Dockerfile（二）
前文我们聊到了什么是dockerfile,它的主要作用以及dockerfile的一些基本指令的使用方法,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13019 ...
- SpringBoot整合Flyway（数据库版本迁移工具）
简介 在团队开发当中,有可能每个人都是使用自己本地的数据库.当数据库的表或者字段更新时,往往需要告知团队的其他同事进行更新. Flyway数据库版本迁移工具,目的就是解决该问题而诞生的(我自己想的). ...
- Java实现 LeetCode 773 滑动谜题（BFS）
773. 滑动谜题 在一个 2 x 3 的板上(board)有 5 块砖瓦,用数字 1~5 来表示, 以及一块空缺用 0 来表示. 一次移动定义为选择 0 与一个相邻的数字(上下左右)进行交换. 最终 ...
- Java实现 LeetCode 373 查找和最小的K对数字
373. 查找和最小的K对数字 给定两个以升序排列的整形数组 nums1 和 nums2, 以及一个整数 k. 定义一对值 (u,v),其中第一个元素来自 nums1,第二个元素来自 nums2. 找 ...