利用TagSupport创建自定义标签实现网页左侧菜单

本次实验的项目结构图：

1. 创建自定义标签的处理类LeftMenu.java，需要继承TagSupport类。

package com.zhuomuniao.myproject.commons.taglib;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspTagException;
import javax.servlet.jsp.tagext.TagSupport;

@SuppressWarnings("serial")
public class LeftMenu extends TagSupport {
  
  private String title      = "";
  private String linkedMenu = "";
  private String linkedPath = "";

  //标签开始时调用的处理方法
	public int doStartTag() throws JspException {
    try {
      String[] menus = linkedMenu.split("/");
      String[] links = linkedPath.split("/");
      StringBuilder sp = new StringBuilder();
      sp.append("\n");
      sp.append("<table width=\"170\" class=\"menu\" >").append("\n");
      sp.append("  <tr>").append("\n");
      sp.append("    <td width=\"16\" height=\"25\"><img src=\"images/common/box_c_top_l.gif\" width=\"16\" height=\"25\"></td>").append("\n");
      sp.append("    <td background=\"images/common/box_c_top_bg.gif\"> </td>").append("\n");
      sp.append("    <td width=\"11\" height=\"22\"><img src=\"images/common/box_c_top_r.gif\" width=\"16\" height=\"25\"></td>").append("\n");
      sp.append("  </tr>").append("\n");
      sp.append("  <tr>").append("\n");
      sp.append("    <td valign=\"top\" background=\"images/common/box_l_bg.gif\"></td>").append("\n");
      sp.append("    <td valign=\"top\" bgcolor=\"#FFFFFF\">").append("\n");
      sp.append("      <table width=\"130\" class=\"menu\" >").append("\n");
      sp.append("        <tr>").append("\n");
      sp.append("          <td class=\"menu_title\"><span>"+title+"</span></td>").append("\n");
      sp.append("        </tr>").append("\n");
      sp.append("        <tr>").append("\n");
      sp.append("          <td height=\"2\" background=\"images/common/line_bg.gif\"></td>").append("\n");
      sp.append("        </tr>").append("\n");
      for(int i=0;i<menus.length;i++){
        String menu = menus[i];
        String link = links[i];
        sp.append("        <tr><td class=\"menu_list\"><span οnclick=\"doLeftLinked('"+link+"')\" οnmοuseοver=\"this.style.color='#ffa851'\" οnmοuseοut=\"this.style.color='#666666'\">"+menu+"</span></td></tr>").append("\n");
      }
      sp.append("        <tr>").append("\n");
      sp.append("          <td height=\"2\" background=\"images/common/line_bg.gif\"></td>").append("\n");
      sp.append("        </tr>").append("\n");
      sp.append("      </table>").append("\n");
      sp.append("    </td>").append("\n");
      sp.append("    <td valign=\"top\" background=\"images/common/box_r_bg.gif\"> </td>").append("\n");
      sp.append("  </tr>").append("\n");
      sp.append("  <tr>").append("\n");
      sp.append("    <td width=\"11\" height=\"22\" valign=\"middle\"><img src=\"images/common/box_c_bottom_l.gif\" width=\"16\" height=\"25\"></td>").append("\n");
      sp.append("    <td background=\"images/common/box_bottom_bg.gif\"> </td>").append("\n");
      sp.append("    <td width=\"11\" height=\"22\"><img src=\"images/common/box_c_bottom_r.gif\" width=\"16\" height=\"25\"></td>").append("\n");
      sp.append("  </tr>").append("\n");
      sp.append("</table>").append("\n");

      pageContext.getOut().println(sp.toString());

    } catch (Exception e) {
      throw new JspTagException(e.getMessage());  
    }
    return SKIP_BODY;	//跳过标签体的执行
  }

	
  public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getLinkedMenu() {
		return linkedMenu;
	}
	public void setLinkedMenu(String linkedMenu) {
		this.linkedMenu = linkedMenu;
	}
	public String getLinkedPath() {
		return linkedPath;
	}
	public void setLinkedPath(String linkedPath) {
		this.linkedPath = linkedPath;
	}

}

2. 创建标签库描述文件zhuomuniao.tld

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
                        "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
<taglib>

	<!-- 标签库的版本号 -->
 	<tlib-version>1.0</tlib-version>
 	<!-- JSP的版本号 -->
 	<jsp-version>1.2</jsp-version>
 	<!-- 标签库的默认前缀 -->
 	<short-name>zhuomuniao</short-name>
 	<!-- 标签库的唯一访问标识符 -->
 	<uri>/zhuomuniao</uri>

 	<!-- 定义一个标签 -->
 	<tag>
  	<!-- 标签的名字 -->
  	<name>LeftMenu</name>
	<!-- 标签的处理类 -->
  	<tag-class>com.zhuomuniao.myproject.commons.taglib.LeftMenu</tag-class>
 	<!--标签体的内容：empty表示没有标签体，JSP表示标签体可以加入JSP程序代码，tagdependent表示标签体中的内容由标签自己处理 -->
  	<body-content>empty</body-content>
  
  	<!-- 定义标签的属性 -->
  	<attribute>
  	   	<!-- 属性名称 -->
	  	<name>title</name>
	  	<!-- 属性是否必需 -->
	  	<required>false</required>
	  	<!-- 属性值是否支持JSP表达式 -->
	  	<rtexprvalue>true</rtexprvalue>
		<type>java.lang.String</type>
  	</attribute>
  	<attribute>
   		<name>linkedMenu</name>
   		<rtexprvalue>true</rtexprvalue>
   		<type>java.lang.String</type>
  	</attribute>
  	<attribute>
   		<name>linkedPath</name>
   		<rtexprvalue>true</rtexprvalue>
   		<type>java.lang.String</type>
  	</attribute>
	</tag>
 
</taglib>

3. web.xml配置，在其中加入标签信息的配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

  <jsp-config>
    <taglib>
      <taglib-uri>zhuomuniao</taglib-uri>
      <taglib-location>/WEB-INF/tld/zhuomuniao.tld</taglib-location>
    </taglib>
  </jsp-config>  
  
</web-app>

4. 创建一个使用自定义标签的JSP测试页面leftMenu.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="zhuomuniao" prefix="zhuomuniao" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My Tag</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		<link rel="stylesheet" type="text/css" href="css/leftMenu.css">
		<script type="text/javascript">
		function doLeftLinked(url){
			alert(url);
			//window.location.href=url;
		}
		</script>	
  </head>
  
  <body>
	<!-- LEFT MENU START -->
	<c:set var="title" value="菜单标题"/>
	<c:set var="menus" value="子菜单1/子菜单2/子菜单3/子菜单4"/>
	<c:set var="links" value="url1/url2/url3/url4"/>
	<zhuomuniao:LeftMenu title="${title}" linkedMenu="${menus}" linkedPath="${links}"/>
	<!-- LEFT MENU END -->
  </body>
</html>

用到的css样式

leftMenu.css

body {
	margin: 0px; 
	padding: 0px;
	border: 0px;
	overflow: auto; 
}

table.menu{
	margin: 0px;
	padding: 0px;
	border: 0px;
	border-collapse: collapse;		/*相邻边被合并*/
	border-spacing:0;
}

table.menu tr td{
	padding: 0px;
}

td.menu_title{ 
	line-height: 28px;
}

td.menu_title span{ 
	color: #033C6B;
	font-family: 宋体,TAHOMA;
	font-size: 16px;
	font-weight: bold; 
	padding-left: 5px;
}

td.menu_list{ 
	line-height: 28px;
}

td.menu_list span{ 
	color: #033C6B;
	font-family: 宋体,TAHOMA;
	font-size: 15px;
	font-weight:normal; 
	padding-left: 15px;
	cursor:pointer;
}

测试结果截图：

代码下载: http://download.csdn.net/detail/chuzhenbin/4159286

＝＝＝＝＝＝＝＝＝＝＝＝＝＝以上＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝