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,简单的多面板工具搞定了,还不错吧,其实他还有很多其他功能,有空再继续写吧。
分享到:
相关推荐
它是了解如何开始使用Ditchnet Tabs Taglib的第一步。 3. **bin** - 这个目录可能包含了可执行文件或者脚本,用于简化安装、部署或测试过程。对于Java Web应用来说,可能包含JAR文件,可以直接引入到项目中。 4. *...
综合以上信息,"ditchnet-tabs-taglib_0.8.zip" 提供了一套方便的JSP标签库,用于在Web应用中实现多tab界面。它具有良好的可操作性和实用性,且源代码和文档齐全,便于开发者快速集成和自定义。
**标题:“标签(Tabs)实现多页面切换”** 在网页设计中,标签(Tabs)是一种常见的用户界面元素,用于组织和展示多个相关的但内容独立的部分。这种设计模式允许用户通过点击不同的标签来切换查看不同页面,提高用户...
jQuery UI中的Tabs组件是一种...以下是对`jQuery的tabs使用方法`的详细讲解。 首先,为了使用jQuery UI的Tabs功能,你需要在页面中引入jQuery库和jQuery UI库。确保在HTML文件的`<head>`部分添加以下链接: ```html ...
jQuery EasyTabs.js 是一款功能强大且易于使用的轻量级插件,专为创建响应式的Tab式布局而设计。它允许开发者通过简单的配置选项和自定义事件来实现各种Tab切换效果,为网页内容提供整洁、有组织的展示方式。在网页...
在实际应用中,要使用 PWS Tabs 插件,首先需要在网页中引入 jQuery 和 PWS Tabs 的JavaScript和CSS文件。然后,可以通过选择器找到要转化为选项卡的元素,并调用 `.tabs()` 方法来初始化插件。例如: ```html <!...
例如:tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4(往后移)则顺序变为tabs1、tabs3、tabs4、tabs2; tabs4改为tabs2(往前移) 则顺序变为tabs1、tabs4、tabs2、tabs3。
使用上也非常简单,在页面中载入 jquery.ui.tabs.paging.css 和 jquery.ui.tabs.paging.js 文件,在创建 tabs 对象后再执行代码激活一下插件 $tabs.tabs('paging'); 就可以了。 压缩包内带有 demo 。
在探讨如何使用JQUERY Tabs插件宿主IFRAMES之前,首先需要了解什么是JQUERY Tabs插件和IFRAME。JQUERY Tabs插件是JQUERY UI库中的一个组件,它允许开发者轻松地在一个网页上添加选项卡式界面,提升用户体验。而...
在网页开发中,jQuery 是一个广泛...通过熟练掌握 jQuery UI 的 tabs 组件,开发者可以轻松创建出具有专业级用户体验的选项卡界面,无论是用于展示产品特性、展示文章分类还是其他用途,都能为网站增添一份优雅与便捷。
"Ajax无刷新内容tabs标签切换"是一种技术,它允许用户在不重新加载整个网页的情况下切换页面内容,显著提升了交互性与效率。这种技术通常用于构建诸如导航菜单、选项卡式界面等元素,让用户能够快速浏览和操作大量...
本主题将深入探讨如何使用Swiper实现tabs标签页的切换效果。 一、Swiper简介 Swiper是由IDangerous开发的一款免费且开源的JavaScript库,它专门用于创建响应式的滑动内容,如图片轮播、内容滑动、tab切换等。Swiper...
首先,"基于jQuery tabs切换源码"指的是使用jQuery库来创建一个可切换的选项卡式界面。在网页开发中,这种组件常用于展示不同内容板块,用户可以通过点击各个选项卡在不同内容之间切换,提高用户体验和页面导航效率...
Tabs插件还提供了几个事件,允许你在用户与标签页互动时执行某些操作,例如: - `create`: 在tabs创建后触发。 - `beforeActivate`: 在切换到新标签页前触发。 - `activate`: 在切换到新标签页后触发。 你可以...
在本示例中,"jQuery tabs切换源码"是指使用jQuery实现的一个选项卡(tabs)功能,它允许用户通过点击不同的标签来切换显示不同的内容区域。 在jQuery中,实现tabs切换通常会涉及到以下几个核心知识点: 1. **选择...
jQuery 的 Tabs 插件是一种广泛使用的前端开发工具,它能够帮助开发者轻松地创建功能丰富的标签式界面。在网页设计中,这种布局方式可以有效地组织和展示大量内容,提高用户体验,让用户能够快速浏览和切换不同的...
在`<template>`部分,我们可以预期看到使用`v-for`指令来遍历数据并生成多个Tab标签页,同时使用`v-bind:is`指令来实现动态组件的功能。`v-bind:is`是一个特殊的指令,它告诉Vue渲染哪个组件,其值可以是动态的,...
本文将详细解析"多级嵌套选项卡_多级嵌套舌签Tabs"的设计与实现,以及如何确保其在不同浏览器中的兼容性和可重用性。 首先,"多级嵌套"意味着在选项卡组件中,每个主要的选项卡都可以展开为次级选项卡,而次级选项...
本篇文章将深入探讨如何使用jQuery UI来创建tabs效果,并提供一个简单的案例。 首先,要使用jQuery UI实现tabs效果,你需要确保已经引入了jQuery库和jQuery UI的相关资源。这通常包括jQuery核心库、jQuery UI核心...
7. **路由与导航**:在更大型的项目中,每个Tab可能对应一个独立的路由,可以使用Vue Router进行页面间的导航。Tab页的切换可以触发对应的路由跳转,反之,路由的变化也能同步到当前选中的Tab。 8. **API请求与数据...