<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="reset.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../jquery-1.4.js"></script>
<!--常规选项卡轻量(分离版)start-->
<link href="skins/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/normalTab2_split.js"></script>
<!--常规选项卡轻量(分离版)end-->
<body>
这种tab比较小巧，漂亮。不过背景最好要白色才搭配。比较适合用在弹窗的页面中。<br />
非iframe模式<br />
<div class="cusTab" style="width:100%;height:260px;">
<div class="cusTab_top" style="padding:5px 0 0 0px;">
<li class="cusTab_normal_left cusTab_current_left"></li>
<li class="cusTab_normal_center cusTab_current_center">选项1</li>
<li class="cusTab_normal_middle cusTab_current_middle"></li>
<li class="cusTab_normal_center">选项2</li>
<li class="cusTab_normal_middle"></li>
<li class="cusTab_normal_center">选项3</li>
<li class="cusTab_normal_middle"></li>
<li class="cusTab_normal_center">选项4</li>
<li class="cusTab_normal_right"></li>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="cusTab_con" style="width:400px;height:200px;">
内容1<br />内容1<br />内容1<br />内容1
</div>
<div class="cusTab_con" style="width:400px;height:200px;">
内容2内容2<br />内容2内容2<br />内容2内容2<br />内容2内容2
</div>
<div class="cusTab_con" style="width:400px;height:200px;">
内容3内容3内容3<br />内容3内容3内容3<br />内容3内容3内容3<br />内容3内容3内容3
</div>
<div class="cusTab_con" style="width:400px;height:200px;">
内容4<br />内容4<br />内容4<br />内容4
</div>
</div>
<br />
<br />
<div class="box2" panelTitle="用法">
无需引入任何脚本。尺寸自行设置。HTML代码如下：
<textarea class="code">
<div class="cusTab" style="width:100%;height:260px;">
<div class="cusTab_top" style="padding:5px 0 0 0px;">
<li class="cusTab_normal_left cusTab_current_left"></li>
<li class="cusTab_normal_center cusTab_current_center">选项1</li>
<li class="cusTab_normal_middle cusTab_current_middle"></li>
<li class="cusTab_normal_center">选项2</li>
<li class="cusTab_normal_middle"></li>
<li class="cusTab_normal_center">选项3</li>
<li class="cusTab_normal_middle"></li>
<li class="cusTab_normal_center">选项4</li>
<li class="cusTab_normal_right"></li>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="cusTab_con" style="width:400px;height:200px;">
内容1<br />内容1<br />内容1<br />内容1
</div>
<div class="cusTab_con" style="width:400px;height:200px;">
内容2内容2<br />内容2内容2<br />内容2内容2<br />内容2内容2
</div>
<div class="cusTab_con" style="width:400px;height:200px;">
内容3内容3内容3<br />内容3内容3内容3<br />内容3内容3内容3<br />内容3内容3内容3
</div>
<div class="cusTab_con" style="width:400px;height:200px;">
内容4<br />内容4<br />内容4<br />内容4
</div>
</div>
</textarea>
<pre></pre>
选项卡默认是非iframe模式，即cusTab_top有多少标签则simpleTab中就应该有多少cusTab_con容器用于放置内容。<br />
也可使用iframe模式，效果：
</div>
<br /><br />
iframe模式<br />
<div class="cusTab" style="width:100%;" iframeMode="true">
<div class="cusTab_top" style="padding:5px 0 0 0px;">
<li class="cusTab_normal_left cusTab_current_left"></li>
<li class="cusTab_normal_center cusTab_current_center"><a href="include/chapter9-1-1-content1.html" target="frmrightChild"><span>选项1</span></a></li>
<li class="cusTab_normal_middle cusTab_current_middle"></li>
<li class="cusTab_normal_center"><a href="include/chapter9-1-1-content2.html" target="frmrightChild"><span>选项2</span></a></li>
<li class="cusTab_normal_middle"></li>
<li class="cusTab_normal_center"><a href="include/chapter9-1-1-content3.html" target="frmrightChild"><span>选项3</span></a></li>
<li class="cusTab_normal_right"></li>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="cusTab_con" style="width:400px;">
<IFRAME scrolling="no" width="100%" frameBorder=0 id=frmrightChild
name=frmrightChild onload="iframeHeight('frmrightChild')"
src="include/chapter9-1-1-content1.html" allowTransparency="true"></IFRAME>
</div>
</div>
<br /><br />
<div class="box2" panelTitle="用法">
需要对class="simpleTab"容器设置iframeMode="true"并使用IFRAME。代码如下：
<textarea class="code">
<div class="cusTab" style="width:100%;" iframeMode="true">
<div class="cusTab_top" style="padding:5px 0 0 0px;">
<li class="cusTab_normal_left cusTab_current_left"></li>
<li class="cusTab_normal_center cusTab_current_center"><a href="include/chapter9-1-1-content1.html" target="frmrightChild"><span>选项1</span></a></li>
<li class="cusTab_normal_middle cusTab_current_middle"></li>
<li class="cusTab_normal_center"><a href="include/chapter9-1-1-content2.html" target="frmrightChild"><span>选项2</span></a></li>
<li class="cusTab_normal_middle"></li>
<li class="cusTab_normal_center"><a href="include/chapter9-1-1-content3.html" target="frmrightChild"><span>选项3</span></a></li>
<li class="cusTab_normal_right"></li>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="cusTab_con" style="width:400px;">
<IFRAME scrolling="no" width="100%" frameBorder=0 id=frmrightChild
name=frmrightChild onload="iframeHeight('frmrightChild')"
src="include/chapter9-1-1-content1.html" allowTransparency="true"></IFRAME>
</div>
</div>
</textarea>
<pre></pre>
</div>
<br /><br />
外部API控制<br />
<script>
function nextStep(){
var $oldCurTab=$("#apiTab").find(".cusTab_top").find(".cusTab_current_center");
$oldCurTab.nextAll(".cusTab_normal_center").click();
}
function prevStep(){
var $oldCurTab=$("#apiTab").find(".cusTab_top").find(".cusTab_current_center");
$oldCurTab.prevAll(".cusTab_normal_center").click();
}
</script>
<div class="cusTab" style="width:100%;" iframeMode="true" id="apiTab">
<div class="cusTab_top" style="padding:5px 0 0 0px;">
<li class="cusTab_normal_left cusTab_current_left"></li>
<li class="cusTab_normal_center cusTab_current_center"><a href="include/chapter9-1-5-content1.html" target="frmrightChild2"><span>选项1</span></a></li>
<li class="cusTab_normal_middle cusTab_current_middle"></li>
<li class="cusTab_normal_center"><a href="include/chapter9-1-5-content2.html" target="frmrightChild2"><span>选项2</span></a></li>
<li class="cusTab_normal_right"></li>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="cusTab_con" style="width:400px;">
<IFRAME scrolling="no" width="100%" frameBorder=0 id=frmrightChild2
name=frmrightChild2 onload="iframeHeight('frmrightChild2')"
src="include/chapter9-1-5-content1.html" allowTransparency="true"></IFRAME>
</div>
</div>
<div class="box2" panelTitle="用法">
为主tab其设置一个id，例如apiTab。代码：
<textarea class="code">
<div class="cusTab" style="width:100%;" iframeMode="true" id="apiTab">
<div class="cusTab_top" style="padding:5px 0 0 0px;">
<li class="cusTab_normal_left cusTab_current_left"></li>
<li class="cusTab_normal_center cusTab_current_center"><a href="include/chapter9-1-5-content1.html" target="frmrightChild2"><span>选项1</span></a></li>
<li class="cusTab_normal_middle cusTab_current_middle"></li>
<li class="cusTab_normal_center"><a href="include/chapter9-1-5-content2.html" target=
非常漂亮小巧的一款选项卡组件
4星 · 超过85%的资源 需积分: 9 111 浏览量
2011-10-16
19:33:28
上传
评论
收藏 738KB RAR 举报 
tab.rar （31个子文件） 
选项卡 
QUI框架在线版.url 122B
QUI框架介绍.doc 854KB 9-12_常规选项卡(轻量) include 
chapter9-1-5-content1.html 652B chapter9-1-5-content2.html 692B chapter9-1-1-content3.html 575B chapter9-1-1-content2.html 925B chapter9-1-1-content1.html 500B js normalTab2_split.js 1KB reset.css 549B demo.html 10KB skins cusTab 
normal_left.jpg 508B current_right.jpg 449B current_left.jpg 465B current_middle.jpg 576B Thumbs.db 23KB current_middle2.jpg 521B current_center.jpg 466B normal_middle.jpg 581B normal_right.jpg 534B normal_center.jpg 500B style.css 2KB jquery-1.4.js 70KB hl helpers.js 3KB highlight.js 10KB lang-js.js 5KB lang-css.js 3KB box_top.jpg 418B lang-xml.js 3KB hl-all.js 13KB style.css 2KB lang-html.js 2KB
- 1
- 2
前往页