解析Ditchnet JSP Tabs 用法 jsp选择标签

最新推荐文章于 2020-05-26 23:59:45 发布

sjj5395426

最新推荐文章于 2020-05-26 23:59:45 发布

阅读量265

点赞数

分类专栏： javascript 文章标签： JSP CSS XHTML HTML

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在使用这个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(/[color=red]traffic[/color]/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"
οnclick="org.ditchnet.jsp.TabUtils.tabClicked(event);"
class="ditch-tab ditch-focused">
<span class="ditch-tab-bg-left"> </span>
one
</div>
<div id="install-tab"
οnclick="org.ditchnet.jsp.TabUtils.tabClicked(event);"
class="ditch-tab ditch-unfocused">
<span class="ditch-tab-bg-left"> </span>
two
</div>
<div id="author-tab"
οnclick="org.ditchnet.jsp.TabUtils.tabClicked(event);"
class="ditch-tab ditch-unfocused">
<span class="ditch-tab-bg-left"> </span>
three
</div>
<div id="skin-tab"
οnclick="org.ditchnet.jsp.TabUtils.tabClicked(event);"
class="ditch-tab ditch-unfocused">
<span class="ditch-tab-bg-left"> </span>
four
</div>
<div id="link-tab"
οnclick="org.ditchnet.jsp.TabUtils.tabClicked(event);"
class="ditch-tab ditch-unfocused">
<span class="ditch-tab-bg-left"> </span>
five
</div>
<div id="navigate-tab"
οnclick="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>

<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>

有好想法就一起分享，一起交流！