碼上歡樂
相關內容    簡體    繁體

JavaWeb網上圖書商城完整項目--day02-28.查詢所有分類功能之left頁面使用Q6MenuBar組件顯示手風琴式下拉菜單

本文轉載自   查看原文   2017-05-16 17:10   1775    java web

首先頁面去加載的時候，會去加載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>

 

這樣就達到了修改的效果，我們來看下最后的顯示

 





 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 JavaWeb網上圖書商城完整項目--day02-17.登錄功能頁面實現 JavaWeb網上圖書商城完整項目--day02-20.修改密碼各層實現 完整項目：網上圖書商城（一、MySQL數據庫設計）未完 JavaWeb之網上圖書商城-框架搭建 html5 手風琴菜單 VUE實現Studio管理后台（五）：手風琴式折疊組件（Accordion） CSS&JS兩種方式實現手風琴式折疊菜單 Angular.js+Bootstrap實現手風琴菜單 bootstrap 菜單之手風琴效果 簡單jQuery 實現手風琴菜單
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM