jsp页面中创造Tab页的方式

jsp页面中创建Tab页的方式
步骤一：
下载jakarta-taglibs-standard-1.1.2.zip(在Weblogic中必须下载1.0版http://jakarta.apache.org/site/downloads/downloads_taglibs-standard-1.0.cgi)
解压jakarta-taglibs-standard-1.1.2.zip，将解压后lib中的standard.jar和jstl.jar文件拷贝到\WEB-INF\lib\
将tld下的所有文件拷贝到"\WEB-INF\tlds"下
步骤二：
web.xml中配置jstl标签，一下是jstl1.0的配置，(1.1中包含15个文件，1.0中包含8个文件)
<taglib>
    <taglib-uri>http://java.sun.com/jstl/fmt</taglib-uri>
    <taglib-location>/WEB-INF/tlds/fmt.tld</taglib-location>
</taglib>

<taglib>
    <taglib-uri>http://java.sun.com/jstl/fmt-rt</taglib-uri>
    <taglib-location>/WEB-INF/tlds/fmt-rt.tld</taglib-location>
</taglib>

<taglib>
    <taglib-uri>http://java.sun.com/jstl/core</taglib-uri>
    <taglib-location>/WEB-INF/tlds/c.tld</taglib-location>
</taglib>

<taglib>
    <taglib-uri>http://java.sun.com/jstl/core-rt</taglib-uri>
    <taglib-location>/WEB-INF/tlds/c-rt.tld</taglib-location>
</taglib>

<taglib>
    <taglib-uri>http://java.sun.com/jstl/sql</taglib-uri>
    <taglib-location>/WEB-INF/tlds/sql.tld</taglib-location>
</taglib>

<taglib>
    <taglib-uri>http://java.sun.com/jstl/sql-rt</taglib-uri>
    <taglib-location>/WEB-INF/tlds/sql-rt.tld</taglib-location>
</taglib>

<taglib>
    <taglib-uri>http://java.sun.com/jstl/x</taglib-uri>
    <taglib-location>/WEB-INF/tlds/x.tld</taglib-location>
</taglib>

<taglib>
    <taglib-uri>http://java.sun.com/jstl/x-rt</taglib-uri>
    <taglib-location>/WEB-INF/tlds/x-rt.tld</taglib-location>
</taglib>
如果版本比较高，那么如下配置：
<?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">

<jsp-config>
<taglib>
<taglib-uri>http://java.sun.com/jstl/fmt</taglib-uri>
<taglib-location>/WEB-INF/tld/fmt.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jstl/fmt-1_0</taglib-uri>
<taglib-location>/WEB-INF/tld/fmt-1_0.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jstl/fmt-1_0-rt</taglib-uri>
<taglib-location>
/WEB-INF/tld/fmt-1_0-rt.tld
</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jstl/core</taglib-uri>
<taglib-location>/WEB-INF/tld/c.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>
http://java.sun.com/jstl/core-1_0-rt
</taglib-uri>
<taglib-location>/WEB-INF/tld/c-1_0-rt.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jstl/core-1_0</taglib-uri>
<taglib-location>/WEB-INF/tld/c-1_0.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jstl/sql</taglib-uri>
<taglib-location>/WEB-INF/tld/sql.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jstl/sql-1_0</taglib-uri>
<taglib-location>/WEB-INF/tld/sql-1_0.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jstl/sql-1_0-rt</taglib-uri>
<taglib-location>
/WEB-INF/tld/sql-1_0-rt.tld
</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jstl/x</taglib-uri>
<taglib-location>/WEB-INF/tld/x.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jstl/x-1_0</taglib-uri>
<taglib-location>/WEB-INF/tld/x-1_0.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jstl/x-1_0-rt</taglib-uri>
<taglib-location>/WEB-INF/tld/x-1_0-rt.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jstl/fn</taglib-uri>
<taglib-location>/WEB-INF/tld/fn.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>
http://java.sun.com/jstl/permittedTaglibs
</taglib-uri>
<taglib-location>
/WEB-INF/tld/permittedTaglibs.tld
</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jstl/scriptfree</taglib-uri>
<taglib-location>
/WEB-INF/tld/scriptfree.tld
</taglib-location>
</taglib>
</jsp-config>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

步骤三：
下载ditchnet-tabs-taglib.jar，官方网站为：http://ditchnet.org/tabs/，然后将下载的jar文件拷贝到web工程中(\WEB-INF\lib\ 下)
步骤四：
到web工程所在的目录将工程的只读型去掉，使其变成可写，原因是因为ditchnet-tabs-taglib.jar在工程编译的时候会在工程目录下创建一些需要的文件到工程下。
步骤五：在jsp页面中加入<%@ taglib prefix="tab" uri="http://ditchnet.org/jsp-tabs-taglib"%>便可以 在jsp页面中使用，如下示例：
<%@ page contentType="text/html"  language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tab" uri="http://ditchnet.org/jsp-tabs-taglib"%>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<tab:tabConfig />
<title>测试你的第一个使用到JSTL 的网页</title>
<script>
function myListener(evt) {
    var selectedTabPane = evt.getTabPane(); // HTMLDivElement reference to

    var selectedTab     = evt.getTab();     // HTMLDivElement reference to

    var tabContainer    = evt.getTabContainer(); // HTMLDivElement reference to

//doSomethingInteresting(selectedTabPane,selectedTab,tabContainer);
}

</script>
</head>
<body>
<tab:tabContainer id="foo-bar-container" jsTabListener="myListener">
<tab:tabPane id="foo" tabTitle="Foo!">
Foo is cool!
</tab:tabPane>
<tab:tabPane id="bar" tabTitle="Bar!">
<c:out value="Bar is cooler!" />
</tab:tabPane>
<tab:tabLink href="http://www.baidu.com" selectedTabPaneId="foo">
百度
</tab:tabLink>

</tab:tabContainer>
<div>
<tab:prevTabButton tabContainerId="foo-bar-container">PREV</tab:prevTabButton>
<tab:nextTabButton tabContainerId="foo-bar-container">NEXT</tab:nextTabButton>
</div>


<tab:tabContainer id="next-prev-container2" skin="invisible">
<tab:tabPane id="pane2-1" tabTitle="One">1. Here is tab One.</tab:tabPane>
<tab:tabPane id="pane2-2" tabTitle="Two">2. This is tab Two.</tab:tabPane>
<tab:tabPane id="pane2-3" tabTitle="Three">3. Finally, tab Three.</tab:tabPane>
</tab:tabContainer>
<div>
<tab:prevTabButton tabContainerId="next-prev-container2">PREV</tab:prevTabButton>
<tab:nextTabButton tabContainerId="next-prev-container2">NEXT</tab:nextTabButton>
</div>

</body>
</html>

步骤六：
启动服务器，然后访问页面，可是发现tab并没有出来，原因是因为样式并没有加入进来。进入tomcat下webapp目录下，可以看见
org.ditchnet.taglib的目录，点击进去可以看见包含的js、css以及images，
在jsp页面中加入以下语句
<script type="text/javascript" src="/org.ditchnet.taglib/tabs.js"></script>
<link rel="stylesheet" href="/org.ditchnet.taglib/tabstyle.jsp" type="text/css"></link>
重启服务器，然后访问，即可。
步骤七：
如果重启后发现tab还是没有出来，那么可以进行如下检查
1、检查web.xml中的web-app是不是2.4以上的，不包含2.4，为什么要检查这个，原因是因为2.5不支持jstl，而工程中的js何css中大多使用的是jstl来实现
所以这里要将其修改成2.4版本的，或者自行修改js、css，然后在使用自己修改后的
2、检查jstl是否加入进来，如果没有加入进来那么加入jstl后在使用。