`

动态四层菜单

    博客分类：
  • Jsp
CSSCC#C++jQuery 
阅读更多

jsp文件

 

 

<%@ page language="java" contentType="text/html; charset=gbk" pageEncoding="GBK"%>
<%@ taglib uri="/WEB-INF/taglib.tld" prefix="SysManager" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String UserAlias = (String )session.getAttribute("UserAlias"); //得到登陆用户名
String GroupID = (String)session.getAttribute("GroupID");
if (UserAlias == null || UserAlias.equals("null")|| GroupID == null || GroupID.equals("null")) {
    response.sendRedirect("/");
    return;
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>主菜单</title>

<style type="text/css">
body{font-family:tahoma,"宋体";background:#9DACBF;margin:0}
#main { width:170px;float:left;background:#9DACBF}

a{color:#FFFFFF; text-decoration:none}
a:hover{color:#324456;}

.title { width:170px;height:20px;font-size:14px;font-weight:bold;color:#fff;padding:4px 0 0 30px;background:#899BB1;border-bottom:1px #fff solid}
.info { width:150px;height:20px;font-size:12px;color:#fff;padding:3px 0 0 10px;}

.submain { width:170px;height:20px;font-size:14px;font-weight:bold;color:#fff;padding:4px 0 0 30px;background:#899BB1 url(/img/jt.gif) no-repeat 10px 7px;border-bottom:1px #fff solid}
.submain_class { width:150px;height:20px;font-size:14px;font-weight:bold;color:#fff;padding:3px 0 0 50px;background:url(/img/jt1.gif) no-repeat 33px 8px;border-bottom:1px #5C7D9E solid}
.submain_class_list { width:127px;height:20px;font-size:12px;/*font-weight:bold;*/color:#fff;padding:3px 0 0 73px;background:url(/img/jt1.gif) no-repeat 55px 8px;border-bottom:1px #5C7D9E solid}

.submain_class__sub_list { width:127px;height:20px;font-size:12px;/*font-weight:bold;*/color:#fff;padding:3px 0 0 93px;background:url(/img/jt1.gif) no-repeat 75px 8px;border-bottom:1px #5C7D9E solid}


</style>

<script src="/js/jquery.js" type="text/javascript"></script>

<script>    


    $(document).ready(function(){
    
        //一级
        $(".firstMenu").toggle(
        function(){
            $(this).find(".secondMenu").css("display","block");
        },
        
        function(){
            $(this).find(".secondMenu").css("display","none");
        });
    
    
        //二级
        $(".secondMenu").toggle(
        function(){
            $(this).find(".thirdMenu").css("display","block");
        },
        
        function(){
            $(this).find(".thirdMenu").css("display","none");
        });
        
        
        //三
        $(".thirdMenu").toggle(
        function(){
            $(this).find(".fourthMenu").css("display","block");
        },
        
        function(){
            $(this).find(".fourthMenu").css("display","none");
        });
        
        
        //四级
        $(".fourthMenu").toggle(
        function(){
            $(this).find(".fourthMenu").css("display","block");
        },
        
        function(){
            $(this).find(".fourthMenu").css("display","none");
        });
        
        

    
        
    });    
    
    //菜单跳转
    function goPage(url){
        //document.forms.goForm.action=url;
        //document.forms.goForm.submit();
        //location.replace(url);
        
        top.mainFrame.location.href=url;
    }
    
</script>


</head>

<body>
<form id="goForm" name="goForm" target="mainFrame"></form>



<div id="main">
    
    <c:forEach items="${listFirstMenu}" var="firstMenu">
        <div class="firstMenu" >
            <div class="submain">
                <c:if test="${firstMenu.url!=null && firstMenu.url!=''}">
                    <a href="#" onclick="goPage('${firstMenu.url}');" >${firstMenu.menuName}</a>
                </c:if>
                
                <c:if test="${firstMenu.url==null || firstMenu.url==''}">
                    <a href="#">${firstMenu.menuName}</a>
                </c:if>
                
            </div>
            
            <c:forEach items="${firstMenu.childMenu}" var="secondMenu">
                <div class="secondMenu" style="display:none;">
                    <div class="submain_class" >
                        <c:if test="${secondMenu.url!=null && secondMenu.url!=''}">
                            <a href="#" onclick="goPage('${secondMenu.url}');" >${secondMenu.menuName}</a>
                        </c:if>        
                        
                        <c:if test="${secondMenu.url==null || secondMenu.url==''}">
                            <a href="#">${secondMenu.menuName}</a>
                        </c:if>        
                        
                    </div>
                
                    <c:forEach items="${secondMenu.childMenu}" var="thirdMenu">
                        <div class="thirdMenu" style="display:none;">
                            <div class="submain_class_list" >
                            
                                <c:if test="${thirdMenu.url!=null && thirdMenu.url!=''}">
                                    <a href="#" onclick="goPage('${thirdMenu.url}');" >${thirdMenu.menuName}</a>
                                    
                                </c:if>
                                
                                <c:if test="${thirdMenu.url==null || thirdMenu.url==''}">
                                    <a href="#">${thirdMenu.menuName}</a>
                                </c:if>
                                
                            </div>
                            
                            <c:forEach items="${thirdMenu.childMenu}" var="fourthMenu">
                                <div class="fourthMenu" style="display:none;">
                                    <div class="submain_class__sub_list" >
                                        <c:if test="${fourthMenu.url!=null && fourthMenu.url!=''}">
                                            <a href="#" onclick="goPage('${fourthMenu.url}');" >${fourthMenu.menuName}</a>
                                            
                                        </c:if>
                                        
                                        <c:if test="${fourthMenu.url==null || fourthMenu.url==''}">
                                            <a href="#">${fourthMenu.menuName}</a>
                                        </c:if>
                                    </div>                                    
                                </div>
                            
                            </c:forEach>
                            
                        </div>
                    </c:forEach>
                </div>    
            </c:forEach>    
            
        </div>
            
    </c:forEach>            

    <div class="title"><a href="/logout" target="_top">退出系统</a></div>
            
</div>

</body>
</html>

 

 

 

分享到：
| 四舍五入
评论
1 楼 zmfkplj 2008-12-02  
java文件

/***
* 用于设置菜单权限的列表tree
*/
public void listMenuTree(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {


Integer roleId=null;
if(request.getParameter("roleId")!=null && !"".equals(request.getParameter("roleId"))){
roleId=Integer.parseInt((String)request.getParameter("roleId"));
}

List<Menu> listSecondMenu=new ArrayList<Menu>();
List<Menu> listThirdMenu=new ArrayList<Menu>();
List<Menu> listFourthMenu=new ArrayList<Menu>();


response.setContentType("text/xml;charset=UTF-8");
Writer out;
out = response.getWriter();

StringBuilder sb=new StringBuilder("<?xml version='1.0' encoding='utf-8'?>");


//根
sb.append("<tree id='0'>");

//取一级菜单
List<Menu> listFirstMenu=MenuServiceImpl.getInstance().listMenuByParentId(roleId,0);
//设置一级菜单
for(Menu firstMenu:listFirstMenu){
sb.append("<item text='");
sb.append(firstMenu.getMenuName());
sb.append("' ");
sb.append(" id='");
sb.append(firstMenu.getPath());
sb.append("'");

//取二级菜单
listSecondMenu=MenuServiceImpl.getInstance().listMenuByParentId(roleId,firstMenu.getId());

//如果第二级没有时则要判断第一级是否选中
if(listSecondMenu.size()==0){
if(RoleServiceImpl.getInstance().isRoleAndMenu(roleId,firstMenu.getId())){
//选中 checked='1'
sb.append(" open='0' im0='tombs.gif' im1='tombs.gif' im2='iconSafe.gif' call='1' select='1' checked='1' >");
}else{
sb.append(" open='0' im0='tombs.gif' im1='tombs.gif' im2='iconSafe.gif' call='1' select='1'> ");
}
}else{
sb.append(" open='0' im0='tombs.gif' im1='tombs.gif' im2='iconSafe.gif' call='1' select='1'> ");
}


//设置二级菜单
for(Menu secondMenu : listSecondMenu){
sb.append("<item text='");
sb.append(secondMenu.getMenuName());
sb.append("'");
sb.append(" id='");
sb.append(secondMenu.getPath());
sb.append("'");

//取三级菜单
listThirdMenu=MenuServiceImpl.getInstance().listMenuByParentId(roleId,secondMenu.getId());

//如果第三级没有时则要判断第二级是否选中
if(listThirdMenu.size()==0){
if(RoleServiceImpl.getInstance().isRoleAndMenu(roleId,secondMenu.getId())){
//选中 checked='1'
sb.append(" open='0' im0='folderClosed.gif' im1='folderOpen.gif' im2='folderClosed.gif' checked='1' >");
}else{
sb.append(" open='0' im0='folderClosed.gif' im1='folderOpen.gif' im2='folderClosed.gif'>");
}
}else{
sb.append(" open='0' im0='folderClosed.gif' im1='folderOpen.gif' im2='folderClosed.gif'>");
}

//设置三级菜单
for(Menu thirdMenu : listThirdMenu){
sb.append("<item text='");

sb.append(thirdMenu.getMenuName());

sb.append("'");
sb.append(" id='");
sb.append(thirdMenu.getPath());
sb.append("'");

//取四级菜单
listFourthMenu=MenuServiceImpl.getInstance().listMenuByParentId(roleId,thirdMenu.getId());

//如果第四级没有时则要判断第三级是否选中
if(listFourthMenu.size()==0){
if(RoleServiceImpl.getInstance().isRoleAndMenu(roleId,thirdMenu.getId())){
//选中 checked='1'
sb.append(" open='0' im0='folderClosed.gif' im1='folderOpen.gif' im2='folderClosed.gif' checked='1' >");
}else{
sb.append(" open='0' im0='folderClosed.gif' im1='folderOpen.gif' im2='folderClosed.gif'>");
}
}else{
sb.append(" open='0' im0='folderClosed.gif' im1='folderOpen.gif' im2='folderClosed.gif'>");
}


//设置四级菜单
for(Menu fourthMenu : listFourthMenu){

sb.append("<item text='");
sb.append(fourthMenu.getMenuName());
sb.append("'");
sb.append(" id='");
sb.append(fourthMenu.getPath());
sb.append("'");

if(RoleServiceImpl.getInstance().isRoleAndMenu(roleId,fourthMenu.getId())){

//选中 checked='1'
sb.append(" open='0' im0='folderClosed.gif' im1='folderOpen.gif' im2='folderClosed.gif'  checked='1' />");
}else{
sb.append(" open='0' im0='folderClosed.gif' im1='folderOpen.gif' im2='folderClosed.gif' />");
}

}
sb.append("</item>");
}

sb.append("</item>");
}

sb.append("</item>");

}


sb.append("</tree>");

// System.out.println(sb.toString());

out.write(sb.toString());



}
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS动态滑动菜单CSS动态滑动菜单

    在网页设计中，CSS动态滑动菜单是一种常见且实用的交互元素，用于提供层次清晰、易于导航的用户体验。本文将深入探讨CSS动态滑动菜单的相关知识点，包括其工作原理、实现方式、优缺点以及实际应用。 一、工作原理 ...

    js四级联动菜单

    四级联动菜单作为一种高级导航设计，通过JavaScript实现，能够根据用户的逐级选择动态更新下一级菜单选项，极大地增强了交互性和功能性。 #### 核心知识点： **1. 联动菜单的基本概念** 联动菜单是指一个菜单项的...

    pb动态生成菜单.txt

    ### PowerBuilder 动态生成菜单知识点详解 #### 一、PowerBuilder简介与菜单对象属性解析 **PowerBuilder**是一款由Sybase公司开发的企业级快速应用开发工具，它提供了丰富的功能来构建复杂的应用程序。其中，**...

    layui增加左侧导航菜单层级四层

    标题 "layui增加左侧导航菜单层级四层" 描述的是如何扩展layui框架的默认三层导航菜单，使其支持四级菜单的功能。layui是一个轻量级的前端UI框架，它提供了丰富的组件和模块化的设计，使得开发者能够快速构建出美观...

    简单的Css 动态菜单

    动态菜单则是利用CSS和JavaScript技术来实现交互式、响应用户操作的菜单。本教程将重点探讨如何使用CSS创建一个简单而动态的菜单。 一、CSS基础 1. 选择器：CSS选择器是用于匹配HTML或XML文档中特定元素的规则，如...

    js写的带四级菜单的插件

    在JavaScript的世界里，创建交互式的网页菜单是一项常见的任务，尤其对于复杂的网站结构，四级菜单能够有效地组织和展示信息。这个“js写的带四级菜单的插件”正是一种解决此类问题的工具，它允许开发者轻松地在网站...

    51黑论坛_液晶多级菜单_多层菜单程序_菜单_

    4. **动态显示更新**：当用户在菜单间切换时，需要实时更新LCD上的显示内容。这可能涉及到文本、图标或图形的绘制，可能需要用到帧缓冲区来优化显示性能。 5. **状态管理**：每个菜单项可能有自己的状态，如选中、...

    PADS四层改两层设置方法

    具体来说，四层板通常具有两层信号层和两层平面层，而两层板设计中只有两层信号层。 从上述内容中可以提炼出以下知识点： 1. PADS软件的PCB设计功能和操作界面简介： - 打开PCB文件后，可以通过File菜单进行导入...

    自己写的左侧四级导航菜单（js，asp.net,C#）

    首先，四级导航菜单通常用于组织复杂的信息架构，它可以清晰地展示网站或应用程序的层级结构，让用户能够通过四层点击到达目标页面。这样的设计在大型企业级应用和内容管理系统中尤为常见。 在后台，我们采用C#作为...

    JS四级树形结构菜单.zip

    4. **数据结构**：为了更好地管理和操作菜单项，可以将菜单数据存储为JavaScript对象或数组，每层菜单作为一个对象或数组，子菜单作为属性或元素。这样的数据结构方便遍历和查找，有利于实现动态加载和异步更新。 5...

    PowerBuild程序，动态添加菜单

    在PowerBuilder（简称PB）开发环境中，动态添加菜单是一项常用且重要的功能，它允许开发者在运行时根据用户需求或特定条件灵活地创建和修改应用程序的菜单结构。这为软件提供了更好的可扩展性和自定义性。以下是对这...

    LCD_MENU_C.rar_LCD多级菜单_多级菜单

    通常，LCD显示器由驱动电路、液晶层和彩色滤光片等组成。在嵌入式系统中，我们主要关注控制LCD显示的驱动程序和库。 二、C语言编程 C语言作为基础且高效的编程语言，非常适合编写嵌入式系统的底层代码。在实现LCD...

    四级联动菜单适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以

    此外，还可以添加一些辅助功能，比如防止冒泡（`event.stopPropagation()`）防止点击事件向上层菜单传播，以及防止默认行为（`event.preventDefault()`）阻止浏览器默认的跳转行为。 在压缩包中的文件列表中，我们...

    如何画四层PCB板

    ### 如何绘制四层PCB板详解 #### 一、引言 随着电子产品越来越小巧且功能强大，PCB（Printed Circuit Board，印刷电路板）的设计变得日益复杂。多层PCB，特别是四层PCB板，因其能够提供更高的集成度、更好的信号...

    CSS3动态三级菜单_css_

    随着CSS3的出现，设计师们拥有了更多创新和交互性的工具，其中就包括制作动态三级菜单。这个项目“CSS3动态三级菜单”利用了HTML5和CSS3的特性，创建了一个具有视觉吸引力且响应式的菜单系统，适用于现代网页应用。 ...

    PCB设计-四层板变两层板

    在“设置”菜单中选择“层定义”，将原来的第二层和第四层的层数进行互换，这样可以将原本的电源和地层的信息转移到非电气层。确保电气层1和2都含有实际的线路和元件信息。 第五步，接下来是修改PCB的设计参数，将...

    004浮动的菜单，浮动的菜单

    在网页设计中，浮动的菜单（Floating Menu）是一种常见的交互元素，它能够在用户滚动页面时始终保持在屏幕的特定位置，从而提供便捷的导航。这种设计技术对于提高用户体验有着显著的效果，尤其是在内容丰富的长页面...

    纯css设计鼠标感应四级导航菜单

    【纯CSS设计鼠标感应四级导航菜单】是一种网页设计技术，主要利用CSS（层叠样式表）来构建具有响应式交互的多级导航菜单。在网页设计中，导航菜单是至关重要的，它帮助用户轻松地浏览网站内容。这种四级导航菜单在...

    四(4)级左侧网站分类菜单

    总之，这个四(4)级左侧网站分类菜单是一个结合了JavaScript和CSS技术的优秀示例，它展示了如何通过动态交互和层次结构来创建一个高效且用户友好的导航系统。对于网页开发者来说，理解和掌握这样的技术对于提升网站的...

Magicbox
Global site tag (gtag.js) - Google Analytics