`

动态四层菜单

    博客分类：
  • 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());



}
发表评论

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

相关推荐

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

    stm32F103单片机能跳转返回多个页面

    原生js代码点击按钮从页面上下左右弹出导航菜单层

    原生js代码点击按钮从页面上下左右弹出导航菜单层 原生js代码点击按钮从页面上下左右弹出导航菜单层 原生js代码点击按钮从页面上下左右弹出导航菜单层

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

    因layui只有三级我们要提升层级，所以研究了四级，低分共享，好用记得好评！！！！！！

    通用滑动门类.rar

    在页面的""标签前加入以下代码: 其中sd方法中的参数为： 参数一 [菜单id数组]：滑动门菜单的id 参数二 [内容id数组]：显示和隐藏滑动内容层的id 参数三 "菜单触发类"：鼠标经过滑动门菜单的类 参数四 "菜单关闭类"：...

    Javascript实现的简单右键菜单类

    第二个是右键菜单这个层的id，根据这个id去创建一个新的层，menuList是菜单项的列表，对应了点击一个菜单项后触发的函数，classList是菜单的class名称，以及菜单项对应的class名称，包含了鼠标滑过时的class。...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...

    keep-alive不能缓存多层级路由菜单问题解决

    主要介绍了keep-alive不能缓存多层级路由菜单问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

    OEM电子天平（XX88

    层次一 层次二 层次三 层次四 1、波特率：9600 菜单：SETUP→INTERF→BRUD→9600 1、 奇偶性：NONE 菜单：SETUP→INTERF→PARITY→NONE 2、 数据位数：8 菜单：SETUP→INTERF→DATABIT→8 4、打印输出格式：16CHRR ...

    Material-Menu:受谷歌材料设计启发的画布菜单

    它包含四个主要功能： 动画切换按钮动画画布菜单动画菜单项触摸/点击波纹效果1 - 动画切换按钮动画切换按钮是一个使用纯 CSS 创建的简洁按钮。 默认情况下它是一个汉堡包图标，并在菜单处于活动/打开状态时动画为...

    TKActions V5 专业的ps亮度蒙版扩展，用于选择不同像素数据作为制作蒙版起点的新菜单设计，用户创建的彩色蒙版。

    【内容摘要】更好地组织 ，四个不同的部分 (输入、蒙版、修改和输出), 它反映了蒙版制作过程。 1.源菜单 ，用于选择不同像素数据作为制作蒙版起点的新菜单设计。 2.区域接口 ，更新和紧凑的区域接口以选择不同的...

    信息技术PHOTOSHOP教案.doc

    置入一张汽车的图片，并复制四层。分别为图层1，图层1副本，图层1副本2，图层副 本3。 此主题相关图片如下： 3.选中图层1的汽车，用套索工具将汽车的后半步选中，点菜单选择——羽化，羽化程度2 0，按DELETE，这时就...

    J2me手机泡泡堂游戏源码.rar

    Java J2me泡泡堂游戏源码，运行于以前的Java手机中的泡泡堂游戏，...　四层地图，地表层，建筑层，道具层，炸弹层 　增加了毕设信息splash 　调整了菜单光标对齐，更换了更醒目的光标颜色 　splash显示 　菜单显示

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    程序描述：本章将使用Ajax技术实现动态获取数据的树状菜单。当展开菜单时，自动向服务器发送请求，查询该菜单下的子菜单，并在客户端显示子菜单，而无需刷新整个页面。 /simpleTree.jsp 简单树 /staticTree....

    jquery 动态示例

    51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...

    s2招聘特效制作项目

    javascript 常用的特效: 1。DIV套表格布局页面 2、网页左侧实现带关闭按钮、随滚动条上下移动的广告层 3、随机漂浮的图片广告 ...10、左侧的功能菜单下的超链接，实现对应网页右侧相对层的显示、隐藏效果 。。。。。。

    公积金系统管理平台

    1、导航采用手风琴模式，一共分为四级菜单。 菜单分权限显示不同菜单。用于学习权限菜单不错的资料。 2、TreeView的无限级绑定 3、采用三层架构 4、UI采用的是easy-ui 5、菜单风格采用的是手风琴菜单

    Aisen微博是新浪微博的第三方客户端

    基于AisenForAndroid(Aisen)框架开发，Aisen框架是一个android快速开发框架，包含ORM、IOC、BitmapLoader等开发组件，四层结构：UI层、业务接口层、持久层、数据通讯层。 多账号授权管理 侧边栏抽屉菜单 图片高清...

    VB调用EXCEL方法大全

    第四层：Cells和Range对象，指向Excel工作表中的单元格。 新建立一个VB的工程，先放一个button，名称为Excel_Out。先定义好各层： Dim xlapp As Excel.Application 'Excel对象 Dim xlbook As Excel.Workbook '工作...

    c#仓库管理系统（三层架构）源码

    三、菜单功能 1、账户管理：增加用户；修改用户；删除用户；修改密码；退出 2、入库管理：商品录入；商品修改与删除；入库添加；入库验证 3、出库管理：出库添加；出库检阅 4、查询货物：商品库存；入库号查询；...

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