在使用这个demo之前时先加入ditchnet-tabs-taglib.jar 下载地址http://ditchnet.org/tabs
1.将jar拷贝到lib下
2.解压这个jar,将js和css拷贝到你的工程中,
3.修改你的css配置如下
.ditch-tab-skin-default .ditch-unfocused {
color:#999;
border-bottom:1px solid silver;
background:transparent url(/
traffic/org.ditchnet.taglib/default_tab_bg_right.gif) 100% 0 no-repeat;
}
.ditch-tab-skin-default .ditch-focused {
border-bottom:1px solid white;
background:transparent url(/traffic/org.ditchnet.taglib/default_tab_bg_white_right.gif) 100% 0 no-repeat;
}
.ditch-tab-skin-default .ditch-unfocused .ditch-tab-bg-left {
background:transparent url(/traffic/org.ditchnet.taglib/default_tab_bg_left.gif) 0 0 no-repeat;
}
.ditch-tab-skin-default .ditch-focused .ditch-tab-bg-left {
background:transparent url(/traffic/org.ditchnet.taglib/default_tab_bg_white_left.gif) 0 0 no-repeat;
}
其中traffic为你的工程名,现在可以使用了,将下列的jsp运行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>The Ultimate JSP Tabs!</title>
<style type="text/css">
body {
font:12px/1.6 "Lucida Grande",LucidaGrande,Verdana,sans-serif;
margin:0 40px;
}
h1 {
height:168px;
}
var {
font:12px Monaco,monospace;
color:black;
}
code {
display:block;
white-space:pre;
font:12px Monaco,monospace;
line-height:20px;
border:1px solid gray;
padding:8px;
margin:15px 20px;
color:black;
background-color:#eee;
overflow-x:scroll;
overflow:-moz-scrollbars-horizontal;
}
#valid-wrap {
position:absolute;
right:40px;
top:20px;
}
#valid-wrap a:link img,
#valid-wrap a:visited img {
width:88px;
height:31px;
border:0;
}
</style>
<script type="text/javascript" src="js/tabs.js">
</script>
<link rel="stylesheet" href="css/tabstyle.css" type="text/css"></link></head>
<body>
<h1>
<span>jsp tabs Demo</span>
</h1>
<div class="ditch-tab-skin-default">
<div id="tabs-main-container" class="ditch-tab-container">
<div class="ditch-tab-wrap">
<div id="overview-tab"
onclick="org.ditchnet.jsp.TabUtils.tabClicked(event);"
class="ditch-tab ditch-focused">
<span class="ditch-tab-bg-left"> </span>
one
</div>
<div id="install-tab"
onclick="org.ditchnet.jsp.TabUtils.tabClicked(event);"
class="ditch-tab ditch-unfocused">
<span class="ditch-tab-bg-left"> </span>
two
</div>
<div id="author-tab"
onclick="org.ditchnet.jsp.TabUtils.tabClicked(event);"
class="ditch-tab ditch-unfocused">
<span class="ditch-tab-bg-left"> </span>
three
</div>
<div id="skin-tab"
onclick="org.ditchnet.jsp.TabUtils.tabClicked(event);"
class="ditch-tab ditch-unfocused">
<span class="ditch-tab-bg-left"> </span>
four
</div>
<div id="link-tab"
onclick="org.ditchnet.jsp.TabUtils.tabClicked(event);"
class="ditch-tab ditch-unfocused">
<span class="ditch-tab-bg-left"> </span>
five
</div>
<div id="navigate-tab"
onclick="org.ditchnet.jsp.TabUtils.tabClicked(event);"
class="ditch-tab ditch-unfocused">
<span class="ditch-tab-bg-left"> </span>
six
</div>
<br class="ditch-clear" />
</div>
<!-- ditch-tab-wrap -->
<div class="ditch-tab-pane-wrap" style="width: 400px;height: 300px;">
<div id="overview" class="ditch-tab-pane" style="display:block;">
one
</div>
<div id="install" class="ditch-tab-pane" style="display:none;">
two
</div>
<div id="author" class="ditch-tab-pane" style="display:none;">
three
</div>
<div id="skin" class="ditch-tab-pane" style="display:none;">
four
</div>
<div id="link" class="ditch-tab-pane" style="display:none;">
five
</div>
<div id="navigate" class="ditch-tab-pane" style="display:none;">
six
<div id="listen" class="ditch-tab-pane" style="display:none;">
seven
</div>
</body>
</html>
有好想法就一起分享,一起交流!
- 描述: 示例
- 大小: 6.9 KB
分享到:
相关推荐
【标签】"ditchnet-tabs-taglib_0.8.tar" 这个标签进一步确认了这个压缩包的内容,表明它是一个特定版本(0.8)的Ditchnet Tab标签库,采用tar格式打包,这种格式常见于Linux和Unix系统中,用于收集和归档多个文件。...
综合以上信息,"ditchnet-tabs-taglib_0.8.zip" 提供了一套方便的JSP标签库,用于在Web应用中实现多tab界面。它具有良好的可操作性和实用性,且源代码和文档齐全,便于开发者快速集成和自定义。
**标题:“标签(Tabs)实现多页面切换”** 在网页设计中,标签(Tabs)是一种常见的用户界面元素,用于组织和展示多个相关的但内容独立的部分。这种设计模式允许用户通过点击不同的标签来切换查看不同页面,提高用户...
5. **处理响应**:当Ajax请求成功返回时,解析返回的数据(可能是JSON、XML或其他格式),然后使用JavaScript将新内容插入到对应的DOM元素中。 6. **更新UI**:最后,更新UI状态,例如改变选中tab的样式,确保用户...
例如:tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4(往后移)则顺序变为tabs1、tabs3、tabs4、tabs2; tabs4改为tabs2(往前移) 则顺序变为tabs1、tabs4、tabs2、tabs3。
jQuery UI中的Tabs组件是一种...以下是对`jQuery的tabs使用方法`的详细讲解。 首先,为了使用jQuery UI的Tabs功能,你需要在页面中引入jQuery库和jQuery UI库。确保在HTML文件的`<head>`部分添加以下链接: ```html ...
本主题将深入探讨如何使用Swiper实现tabs标签页的切换效果。 一、Swiper简介 Swiper是由IDangerous开发的一款免费且开源的JavaScript库,它专门用于创建响应式的滑动内容,如图片轮播、内容滑动、tab切换等。Swiper...
noka标签是一组在JSP上远行的支持多种数据库的集数据处理,显示处理于一体的JSP标签,其中有: 编码拦截器工具类 数据表格(DBTable)标签 时间日期(DateOrTime)标签 组合选择框(selectDouble)标签 下拉选择框...
在插件的主要实现部分,作者使用了jQuery的`$.each()`方法遍历每一个匹配的元素,并利用自定义的`this.setActiveTab`私有方法来切换标签页。在这个方法里,作者首先检查选中的标签页是否和当前激活的iframe是同一个...
通过JavaScript实现tabs标签管理,可增加标签至显示框,可删除显示框中单个标签,也可批量删除标签
最新最好的axure rp7.0 Tabs标签
本文将详细解析"多级嵌套选项卡_多级嵌套舌签Tabs"的设计与实现,以及如何确保其在不同浏览器中的兼容性和可重用性。 首先,"多级嵌套"意味着在选项卡组件中,每个主要的选项卡都可以展开为次级选项卡,而次级选项...
本文将详细解析"纯CSS3超时尚Tabs选项卡流线型标签效果"这一主题,以及如何利用CSS3技术实现这种效果。 首先,让我们了解什么是**CSS3**。CSS(层叠样式表)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)...
5. **用户体验优化**:为了提供良好的用户体验,TABS标签页代码还可能涉及到加载优化,比如预加载用户可能会立即看到的内容,或者使用懒加载策略,只在用户滚动到相应位置时加载内容。 6. **错误处理**:在与淘宝...
你可以使用 `AddTab` 和 `RemoveTab` 方法来动态地添加和移除标签页。此外,`ActiveTab` 属性可以帮助你跟踪当前活动的标签页。 安全性和隐私是使用 ChromeTabs 需要注意的重要方面。由于直接内嵌了浏览器引擎,你...
2. **创建Nav组件**:接下来,我们需要创建一个`<ul>`元素,并设置类名`.nav`和`.nav-tabs`,这将为Nav组件添加水平布局和标签样式。 ```html <ul class="nav nav-tabs" id="myTab" role="tablist"> ``` 3. **...
最近在重新学习JavaScript,手写了一个tabs标签页。 话不多说,直接开始。 首先,是前端页面。 图1 tabs 先来把tabs分解一下: 图2 tabs分解 首先,一个大的框div,上面红色的框是导航栏nav,导航栏里是一个无序...
Easyui tabs 标题居左,文字竖着
例如,使用`tabs('select', '选项卡ID')`方法可以选择一个特定的选项卡。这里的'选项卡ID'是对应的`<div>`标签的ID。 在"select"这个标签中,可能涉及到的场景是在用户触发某些操作后,动态地切换到特定的选项卡。...