jsp頁面中建立Tab頁的方式
阿新 • • 發佈：2019-02-17
步驟一：
下載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後在使用。
下載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後在使用。