利用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 onclick=\"doLeftLinked('"+link+"')\" onmouseover=\"this.style.color='#ffa851'\" onmouseout=\"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

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