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后在使用。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值