zoukankan      html  css  js  c++  java

  • 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- 0px;">
    <iframe frameborder="0" src="<c:url value='/jsps/search.jsp'/>" name="search"></iframe>
    </td>
    </tr>
    <tr>
    <td style="border-top- 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- 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>
    这样就达到了修改的效果，我们来看下最后的显示
  • 相关阅读:
    激活函数
    第五章 Odoo 12开发之导入、导出以及模块数据
    第四章 Odoo 12 开发之模块继承
    第三章 Odoo 12 开发之创建第一个 Odoo 应用
    第二章 Odoo 12开发之开发环境准备
    第一章 使用开发者模式快速入门 Odoo 12
    【linux之路】常用的命令
    【python之路46】内置函数2，是【python之路18】的补充
    【python之路45】tornado的用法 （三）
    【python之路44】tornado的用法 （二）
  • 原文地址：https://www.cnblogs.com/kebibuluan/p/6862357.html
Copyright © 2011-2022 走看看