Ditchnet jsp tabs tiglib的部署与使用

最新推荐文章于 2018-04-02 09:09:59 发布

refactaar

最新推荐文章于 2018-04-02 09:09:59 发布

阅读量226

点赞数

分类专栏： java 文章标签： JSP IDE CSS Myeclipse Swing

java 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Ditchnet jsp tabs tiglib(以下简称Ditchnet)是open-open上一款很好用的jsp插件。这个插件是干什么的呢？先看一张效果图吧。

都看明白了吧，这个一款开发多页选项板（Tabbed Pane）的标签。利用这个标签我们可以轻轻松松的开发多页选项板样式的页面，而不用写大量的js+css+div的代码来完成此项工作。下面就开始体验下这款标签的功能吧。

使用第三方插件，我们首先是需要获取该插件。该插件的官方网址是：http://ditchnet.org/tabs/ 。插件是以jar文件形式保存的。我们获取插件后，将插件添加大myeclipse（笔者使用的是此款IDE）的用户库（习惯性的将第三方库加入到IDE的用户库当中，这样方便以后使用）当中。
我们在IDE当中新建一个web project。命名为foolfish_1
我们将Ditchnet库引入到项目当中，此时我们还需要另外两个jar文件，jstl.jar和standard.jar文件（不引入该文件的话系统我报错，刚开始配置的时候很多出现类似的问题）
一切需要的库文件都引入以后，我们就开始尝试他吧，在工程目录下新建一个index.jsp文件。该文件的内容如下所示：

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%@ taglib uri="http://ditchnet.org/jsp-tabs-taglib" prefix="ff"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <ff:tabConfig />
  </head>
  
  <body>
    <ff:tabContainer id="foolfish" >
    <ff:tabPane id="foolfish_1" tabTitle="foolfish_1">
    <%@ include  file="foolfish_1.jsp" %>
    </ff:tabPane>
    <ff:tabPane id="foolfish_2" tabTitle="foolfish_2"> 
    <%@ include  file="foolfish_2.jsp" %> 
    <br></ff:tabPane>
    </ff:tabContainer>
  </body>
</html>

下面我门来看一下上面的代码。

<%@ taglib uri="http://ditchnet.org/jsp-tabs-taglib" prefix="ff"%>

如果我们需要使用相应的jsp标签的话，我们当然需要在jsp文件当中个引入该标签。当然Ditchnet也不例外。

引入该标签后我们需要在jsp页面当中对该标签进行配置，不用担心，我们不需要写任何的配置文件，Ditchnet已经帮我们完成了该项工作。

<head>
    <ff:tabConfig />
</head>

就是这样，一个简简单单的ff:tabconfig就可以帮我们轻松搞定一切配置，该语句将标签所用到的js，css等等全部引入到页面当中。配置完毕以后，我们就要开始使用该标签了。

 <ff:tabContainer id="foolfish" >
    <ff:tabPane id="foolfish_1" tabTitle="foolfish_1">
    <%@ include  file="foolfish_1.jsp" %>
    </ff:tabPane>
    <ff:tabPane id="foolfish_2" tabTitle="foolfish_2"> 
    <%@ include  file="foolfish_2.jsp" %> 
    <br></ff:tabPane>
    </ff:tabContainer>

有必要说一下，该标签是将页面分为两块来看，如上面代码所示。tabContainer就字面意思来理解应该就可以猜到是页面的一个容易。tabPane相当与一个面板，容器当中包含了面板（使用过awt和swing的人应该对容器和面板的概念比较的清楚）。我们先定义了一个容器。id为foolfish。接着我们在容器当中定义了两个面板，分别为foolfish_1和foolfish_2。分别在面板当中引入了两个jsp文件。点击不同面板的时候会显示不同的页面。就如我们效果图所示。

好了，我们一个简单的多页（两页）面板就做成了，很简单，对吧。我们在我们的服务器上发布一下看看。

发布完毕，在浏览器当中输入地址http://localhost:8080/foolfish_1/就可以看见效果图所示的效果了。

差点忘了，输入上面的路径需要在web.xml配置welcomefile为index.jsp

OK,简单的多面板工具搞定了，还不错吧，其实他还有很多其他功能，有空再继续写吧。

refactaar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ditchnet jsp tabs tiglib的部署与使用

Ditchnet jsp tabs tiglib(以下简称Ditchnet)是open-open上一款很好用的jsp插件。这个插件是干什么的呢？先看一张效果图吧。都看明白了吧，这个一款开发多页选项板（Tabbed Pane）的标签。利用这个标签我们可以轻轻松松的开发多页选项板样式的页面，而不用写大量的js+css+div的代码来完成此项工作。下面就开始体验下这款标签...
复制链接

扫一扫