Posted on 2005-12-07 12:45
qiyadeng 阅读(1520)
评论(3) 编辑 收藏 所属分类:
J2EE
发现一个比较酷的Tab标签，这个标签很小，但是基本上能适用于一般的应用。它的全称是The Ditchnet JSP Tabs Taglib （）http://209.61.157.8:8080/taglibs/，可以看出是JSP的标签。但是我们现在很多项目都是基于Struts，所以需要简单的来个整合。
在它的网站上有比较详细的安装说明，并且配有实例。需要的读者可以仔细查看，这里就不介绍了。
在使用的JSP页面中加入
<head>
<tab:tabConfig/>
</head>
这是导入一些CSS和JavaScript.
然后基本上就是两套标签：
<tab:tabContainer>
<tab:tabPane>
从命名我们就很容易看出来是什么作用<tab:tabContainer>是相当于容器一样的东西可以包含很多的<tab:tabPane>,而<tab:tabPane>就是我们要的那种Tab的效果的面板。
<tab:tabContainer id="foo-bar-container">
<tab:tabPane id="foo" tabTitle="姓名">
<html:errors/><br/>
<bean:message key="tab_textfield_name"/>
<html:text property="userName"></html:text>
<br/>
<html:submit><bean:message key="tab_submit_label"/></html:submit>
</tab:tabPane>
<tab:tabPane id="bar" tabTitle="密码">
<html:errors/><br/>
<bean:message key="tab_textfield_password"/>
<html:password property="password"/>
<br/>
<bean:message key="tab_textfield_repassword"/>
<html:password property="rePassword"/>
<br/>
<html:submit><bean:message key="tab_submit_label"/></html:submit>
</tab:tabPane>
</tab:tabContainer>
注意上面的两个标签都有id这要是唯一的，而且是整个应用唯一。
上面的代码就是一个表单，含有userName,password,rePassword三个文本域。但是需要一个Form,有没有考虑过Form放在什么位置呢？经过试验我发现要将Form 放到<tab:tabContainer>的标签之外。这样就像处理一个普通的Struts Form一样了。如果你需要每个Tab也可以是个Form，这样也没有什么问题。
完整的JSP代码如下:
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="tab" uri="http://ditchnet.org/jsp-tabs-taglib" %>
<%@ taglib prefix="html" uri="http://jakarta.apache.org/struts/tags-html" %>
<%@ taglib prefix="bean" uri="http://jakarta.apache.org/struts/tags-bean" %>
<html>
<head>
<tab:tabConfig/>
</head>
<body>
<html:form action="/saveAll">
<tab:tabContainer id="foo-bar-container">
<tab:tabPane id="foo" tabTitle="姓名">
<html:errors/><br/>
<bean:message key="tab_textfield_name"/>
<html:text property="userName"></html:text>
<br/>
<html:submit><bean:message key="tab_submit_label"/></html:submit>
</tab:tabPane>
<tab:tabPane id="bar" tabTitle="密码">
<html:errors/><br/>
<bean:message key="tab_textfield_password"/>
<html:password property="password"/>
<br/>
<bean:message key="tab_textfield_repassword"/>
<html:password property="rePassword"/>
<br/>
<html:submit><bean:message key="tab_submit_label"/></html:submit>
</tab:tabPane>
</tab:tabContainer>
</html:form>
</body>
</html>
效果如图：
