折叠的菜单

Sun, 07 Oct 2007 03:04:12 GMT

首先需要将菜单内容写在一个xml文件上，我将其命名为menu.xml;

代码清单menu.xml

<?xml version="1.0" encoding="UTF-8"?>

<menu-definition>

然后创建一个继承自TagSupport的类，我将其命名为ParseMenuTag，并为这个类创建相应的tld文件：

代码清单zibet-zibet.tld

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">

<taglib>
    <tlibversion>1.2</tlibversion>
    <jspversion>1.1</jspversion>
    <shortname>zibet</shortname>
    <uri>http://jakarta.apache.org/struts/tags-bpgdc</uri>
    <tag>
        <name>menu</name>
        <tagclass>com.zibet.taglib.menu.ParseMenuTag</tagclass>
        <attribute>
            <name>url</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
        </attribute>
    </tag>
</taglib>

在ParseMenuTag类中，首先使用Dom4j读取XML文件，然后应用Taglib将其打印在网页上，需要注意的是需要将当前菜单的label存储在session中。

代码清单ParseMenuTag.java：

package com.zibet.taglib.menu;

import java.io.File;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.tagext.TagSupport;

import org.apache.struts.taglib.TagUtils;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;

import com.zibet.util.Dom4jHelper;

public class ParseMenuTag extends TagSupport
{
private String url;
public String getUrl()
{
return url;
}
public void setUrl(String url)
{
this.url = url;
}
private boolean flag = true;
public int doStartTag() throws JspException
{
HttpServletRequest req =
   (HttpServletRequest)pageContext.getRequest();
String label;
try
{
   label = pageContext.getSession()
        .getAttribute("label").toString();
}
catch(RuntimeException e1)
{
   label = "null";
}

try
{
   URL httpurl = Dom4jHelper.instance.wrapperUrl(url,req);
   Document document = Dom4jHelper.instance.parse(httpurl);
   //document.setXMLEncoding("ISO-8859-1");
   List nodes;
   if(label == "null")
   {
    nodes = document.selectNodes("menu-definition/menu");
   }
   else
   {
    nodes = document.selectNodes(
       "menu-definition/menu[@label='"+ label +"']/preceding-sibling::* |" +
       "menu-definition/menu[@label='"+ label +"']/descendant-or-self::* |" +
       "menu-definition/menu[@label='"+ label +"']/following-sibling::*");
   }
   StringBuffer sb = new StringBuffer();
   sb.append("<ul>");
   for(int i=0; i<nodes.size(); i++)
   {
    Node node = (Node)nodes.get(i);
    if(node.getName().equals("menu"))
    {
     sb.append("<li><a class=\"main-menu\" href=\""
       + node.valueOf("@href").toString().trim()
       + "\">"
       + node.valueOf("@label").toString().trim()
       + "</a></li>");
    }
    else
    {
     sb.append("<li><a class=\"sub-menu\"href=\""
       + node.valueOf("@href").toString().trim()
       + "\">"
       + node.valueOf("@label").toString().trim()
       + "</a></li>");
    }
   }
   sb.append("</ul>");
   TagUtils.getInstance().write(pageContext,sb.toString());
}
catch(MalformedURLException e)
{
   e.printStackTrace();
}
catch(DocumentException e)
{
   e.printStackTrace();
}
return SKIP_BODY;
}

}

类ParseMenuTag用到了一个补助类：Dom4jHelper

代码清单Dom4jHelper.java

package com.zibet.util;

import java.io.File;
import java.net.MalformedURLException;
import java.net.URL;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.jsp.PageContext;

import org.apache.struts.taglib.TagUtils;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;

public class Dom4jHelper
{
    public static Dom4jHelper instance = new Dom4jHelper();
    public Document parse(URL url)throws DocumentException
    {
        SAXReader reader = new SAXReader();
        Document document = reader.read(url);
        return document;
    }
    public Document parse(File file)throws DocumentException
    {
        SAXReader reader = new SAXReader();
        Document document = reader.read(file);
        return document;
    }
    public URL wrapperUrl(String url,HttpServletRequest req)
    throws MalformedURLException
    {
        return new URL(req.getScheme() + "://" + req.getServerName() + ":"
                + req.getServerPort() + "/" + req.getContextPath() + url);
    }
}

在jsp页面中可以这样调用菜单：

代码清单menu.jsp

<%@ page contentType="text/html; charset=UTF-8" language="java"%>

<%@ taglib uri="/tags/struts-htmlx" prefix="htmlx"%>

<htmlx:menu url="/xml/menu.xml"/>

程序运行效果如下：

最后奉上css代码：

代码清单style.css

/* body start */
body {
    margin: 5px 5px 5px 5px;
    padding: 0;
    font-size: 12px;
    font-family: arial, "宋体";
    line-height: 1.6em;
    color: #000;
}
/* body end */

/* input start */
input[type="button"] {
    color: #000000;
    background-color: #fed;
    border: 1px solid;
    border-top-color: #69b;
    border-left-color: #696;
    border-right-color: #363;
    border-bottom-color: #363;
}

input[type="button"]:hover {
    border-top-color: #c63;
    border-left-color: #c63;
    border-right-color: #930;
    border-bottom-color: #930;
}

input[type="submit"] {
    color: #000000;
    background-color: #fed;
    border: 1px solid;
    border-top-color: #69b;
    border-left-color: #696;
    border-right-color: #363;
    border-bottom-color: #363;
}

input[type="submit"]:hover {
    border-top-color: #c63;
    border-left-color: #c63;
    border-right-color: #930;
    border-bottom-color: #930;
}
input[type="reset"] {
    color: #000000;
    background-color: #fed;
    border: 1px solid;
    border-top-color: #69b;
    border-left-color: #696;
    border-right-color: #363;
    border-bottom-color: #363;
}

input[type="reset"]:hover {
    border-top-color: #c63;
    border-left-color: #c63;
    border-right-color: #930;
    border-bottom-color: #930;
}

input[type="text"] {
    border-width: 1px;
    background-color: #FFFFFF;
}
input[type="password"] {
    border-width: 1px;
    background-color: #FFFFFF;
}
/* input end */

/* layout start */
#container {
    width: 100%;
    margin: 0;
    padding: 0;
}

#header {
    margin: 0;
    padding: 0;
    clear: right;
}

#footer {
    margin: 0;
    padding: 0;
    clear: right;
}
#content {
    margin: 5px 0px;
    padding: 0;
    width: 100%;
}
#left {
    float: left;
    width: 13%;
    margin: 0px 1px 0px 0px;
    padding: 0;
}

#right {
    float: right;
    width: 86%;
    margin: 0px 0px 0px 1px;
    padding: 0;
}
/* layout end */

/* heaeder_nav start */
#header_nav {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: right
}

#header_nav li {
    border-color: #666;
    border-style: solid;
    border-width: 0 1px 0 0;
    padding: 0 2px 0 1px;
    margin: 0 3px 0 3px;
    list-style-type: none;
    display: inline;
}

#header_nav li a {
margin: 0;
}

#header_nav li.last {
border-width: 0;
margin: 0;
}
/* header_nav end */

/* dabable start */
#datable table {
    table-layout: automatic;
    empty-cells: show;
    padding: 0;
    margin: 0;
    border-spacing: 1px;
    border-collapse: collapse;
    border-width: 1px 1px 1px 1px;
    border-color: #bbbbbb;
    border-style: solid solid solid solid;
    width: 100%;
}
#datable table caption {
    padding: 0 0 5px 0;
    font-style: italic;
    text-align: right;
}

#datable table th {
    padding: 1px 1px 1px 1px;
    -moz-border-radius: 0px 0px 0px 0px;
    padding: 1px 1px 1px 1px;
    letter-spacing: -0px;
    border-width: 1px 1px 1px 1px;
    font-weight: normal;
    border-color: #bbbbbb;
    border-style: solid solid solid solid;
    background-color: #eeeeee;
    color: #000;
    text-align: left;
}
#datable table td {
    -moz-border-radius: 0px 0px 0px 0px;
    padding: 1px 1px 1px 1px;
    letter-spacing: 0px;
    border-width: 1px 1px 1px 1px;
    border-color: #bbbbbb;
    border-style: solid solid solid solid;
}
/* datable end */

/* contable start */
#contable table {
    table-layout: automatic;
    empty-cells: show;
    padding: 0;
    margin: 0;
    border-spacing: 1px;
    border-collapse: separate;
    border-width: 1px 1px 1px 1px;
    width: 100%;
    border-color: #dddddd;
    border-style: none;
}

#contable table td {
    -moz-border-radius: 0px 0px 0px 0px;
    padding: 1px 1px 1px 1px;
    letter-spacing: 0px;
    border-width: 1px 1px 1px 1px;
    border-color: #dddddd;
    border-style: none;
    background-color: #ffffff;
    padding-left: 5px;
}
#contable table th {
    text-align: right;
    padding: 1px 1px 1px 1px;
    -moz-border-radius: 0px 0px 0px 0px;
    padding: 1px 1px 1px 1px;
    letter-spacing: -0px;
    border-width: 1px 1px 1px 1px;
    background-color: #eeeeee;
    font-weight: normal;
    border-style: none;
    padding-left: 4px;
    border-color: #dddddd;
}
#contable table td input[type="text"] {
    border-width: 0px 0px 1px 0px;
    background-color: #ffffff;
    border-color: #000;
}

/* contable end*/

/* report_nav start */
#report_nav {
      position: relative;
     z-index: 1;
     margin: 0;
    padding: 0;
    list-style: none;
}
#report_nav ul {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#report_nav ul li {
margin: 0 0 3px 0;
padding: 1px 0 0 0;
}

#report_nav ul li a {
      display: block;
    text-decoration: none;
    outline: none;
    color: #000;
}

#report_nav ul li a.main-menu{
    display: block;
      position: relative;
    border-style: solid;
    border-color: #d7d7d7;
      border-width: 1px 1px 1px 1px;
    padding: 1px 1px 1px 6px;
    background-color: #e4e4e4;
}

#report_nav ul li a.sub-menu{
    display: block;
      position: relative;
    border-style: dotted;
    border-color: #d7d7d7;
      border-width: 0 0 1px 0;
    padding: 1px 1px 1px 12px;
    margin: 0 3px 0 6px;
}

#report_nav ul li a:hover {
      text-decoration: underline;
}
#report_nav ul li a:link {
      color: #000000;
}
#report_nav ul li a:visited {
      color: #000000;
}
/* report_nav end */

array yao: java

折叠的菜单