More servicesWindows Live
HomeHotmailSpacesOneCare
 
MSN
Sign in
 
 
Spaces home  array yaoProfileFriendsBlogMore Tools Explore the Spaces community

Blog

Official Video for Terra Naomi's "Say It's Possible"

 

折叠的菜单

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

代码清单menu.xml

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

<menu-definition>

<menu name="hkVmi" label="HK VMI" href="hkVmiMenu.do">
  <sub-menu name="hkVmiInbound" label="HK VMI Inbound" href="sss"></sub-menu>
  <sub-menu name="hkVmiOutbound" label="HK VMI Outbound" href="sss"></sub-menu>
  <sub-menu name="hkVmiInboundQuery" label="HK VMI Inbound Query" href="sss"></sub-menu>
  <sub-menu name="hkVmiOutboundQuery" label="HK VMI Outbound Query" href="sss"></sub-menu>
  <sub-menu name="hkVmiStockQuery" label="HK VMI Stock Query" href="sss"></sub-menu>
  <sub-menu name="hkVmiParnoQuery" label="HK VMI Partno Query" href="sss"></sub-menu>
  <sub-menu name="hkVmiSkuTransfer" label="HK VMI Sku transfer" href="sss"></sub-menu>
</menu>

<menu name="hkWmsi" label="HK WMSI" href="hkWmsiMenu.do">
  <sub-menu name="inbound" label="Inbound" href="sss"></sub-menu>
  <sub-menu name="outbound" label="Outbound" href="sss"></sub-menu>
  <sub-menu name="stock" label="Stock" href="sss"></sub-menu>
</menu>
<menu name="baoBiao" label="报表" href="baoBiaoMenu.do">
  <sub-menu name="keHuDuiZhangDan" label="客户队帐单" href="homeBaobiaoKehuduizhangdanPage.do"></sub-menu>
</menu>
<menu name="dingDan" label="订单" href="dingDanMenu.do">
  <sub-menu name="dingDanGuanLi" label="订单管理" href="homeDingdanDingdanguanliPage.do"></sub-menu>
</menu>
</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"/>

程序运行效果如下:

menu

最后奉上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 */