<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="auther" content="fq" />
<title>tab</title>
<script type="text/javascript" src="js/tab.min.js"></script>
<style>
h2{ margin:0;}
ul{ padding:0; margin:0;}.tab{ width:400px; margin:30px auto 0; font-size:12px; color:#555; border:1px solid #ccc;}
.tab h2{ width:100%; overflow:hidden; font-size:12px; font-weight:normal; background:#f2f2f2;}
.tab h2 span,
.tab h2 a{ float:left; width:50px; line-height:25px; background:#ddd; border-right:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center; cursor:pointer;}
.tab h2 .current{ background:#fff; font-weight:bold; border-bottom:1px solid #fff;}
.tab ul{ padding:25px;}
</style>
</head> <body>
<div style=" width:80%; margin:20px auto; border:1px solid #ccc; background:#f2f2f2; padding:15px; font-size:14px; line-height:22px;">
<b>选项卡解说：</b><br />
1、支持一个页面多次引用；<br />
2、一次引用实现多次切换；<br />
3、点击/滑过等切换方式自定义；<br />
4、自动播放+鼠标动作切换；<br />
5、自动播放时鼠标移向内容区域暂停播放；<br />
6、切换完成后回调函数。<br /><br />
<b>函数引用说明：</b><br />
slide({handle:elems, content:elems, current:"current", mode:"click", delay:5000, fn:function(){...} });<br /><br />
引用基本格式 slide({...}); 中间的“...”所代表的就是参数内容。<br /><br />
参数说明：<br />
handle：表示选项卡分组名称的节点数组<br />
content：表示与分组名称对应的内容的节点数组<br />
current：表示当前分组名称的样式名称<br />
mode：表示切换方式，支持“click/mouseover/...”等鼠标事件<br />
delay：表示自动播放的间隔时间，有值则自动播放，单位毫秒<br />
fn：表示切换完成一次后的回调函数
</div>
<div style="width:80%; margin:auto; text-align:left; font-size:12px;">
<b>引用示例一：</b>
<p>
// 鼠标滑过显示 一次引用，实现多个切换<br />
var slides = ["tab01", "tab02"];<br />
for(var i=0; i<slides.length; i++){<br />
var elemTit = document.getElementById(slides[i]).getElementsByTagName("h2")[0].getElementsByTagName("span");<br />
var elemCon = document.getElementById(slides[i]).getElementsByTagName("ul");<br />
slide({ handle:elemTit, content:elemCon, current:"current", mode:"mouseover" });<br />
}</p></div>
<div class="tab" id="tab01">
<h2>
<span class="current">标题0</span>
<span>标题1</span>
<span>标题2</span>
<span>标题3</span>
</h2>
<ul>滑过显示0</ul>
<ul style="display:none">滑过显示1</ul>
<ul style="display:none">滑过显示2</ul>
<ul style="display:none">滑过显示3</ul>
</div> <div class="tab" id="tab02">
<h2>
<span>标题0</span>
<span>标题1</span>
<span class="current">标题2</span>
<span>标题3</span>
</h2>
<ul style="display:none">滑过显示0</ul>
<ul style="display:none">滑过显示1</ul>
<ul>滑过显示2</ul>
<ul style="display:none">滑过显示3</ul>
</div> <div style="width:80%; margin:auto; text-align:left; font-size:12px;">
<b>引用示例二：</b>
<p>// 鼠标点击显示<br />
slide({ handle:document.getElementById("tab03").getElementsByTagName("h2")[0].getElementsByTagName("a"), content:document.getElementById("tab03").getElementsByTagName("ul"), current:"current", mode:"click" });</p></div>
<div class="tab" id="tab03">
<h2>
<a href="#">标题0</a>
<a href="#" class="current">标题1</a>
<a href="#">标题2</a>
<a href="#">标题3</a>
</h2>
<ul style="display:none">点击显示0</ul>
<ul>点击显示1</ul>
<ul style="display:none">点击显示2</ul>
<ul style="display:none">点击显示3</ul>
</div> <div style="width:80%; margin:auto; text-align:left; font-size:12px;">
<b>引用示例三：</b>
<p>// 自动播放<br />
slide({<br />
handle:document.getElementById("tab04").getElementsByTagName("h2")[0].getElementsByTagName("a"),<br />
content:document.getElementById("tab04").getElementsByTagName("ul"),<br />
current:"current",<br />
mode:"mouseover",<br />
speed:1000<br />
});</p></div>
<div class="tab" id="tab04">
<h2>
<a href="#" class="current">标题0</a>
<a href="#">标题1</a>
<a href="#">标题2</a>
<a href="#">标题3</a>
</h2>
<ul>自动播放0</ul>
<ul style="display:none">自动播放1</ul>
<ul style="display:none">自动播放2</ul>
<ul style="display:none">自动播放3</ul>
</div> <script type="text/javascript">
// 鼠标滑过显示 一次引用，实现多个切换
var slides = ["tab01", "tab02"];
for(var i=0; i<slides.length; i++){
var elemTit = document.getElementById(slides[i]).getElementsByTagName("h2")[0].getElementsByTagName("span");
var elemCon = document.getElementById(slides[i]).getElementsByTagName("ul");
slide({ handle:elemTit, content:elemCon, current:"current", mode:"mouseover" });
} // 鼠标点击显示
slide({
handle:document.getElementById("tab03").getElementsByTagName("h2")[0].getElementsByTagName("a"),
content:document.getElementById("tab03").getElementsByTagName("ul"),
current:"current",
mode:"click"
}); // 自动播放
slide({
handle:document.getElementById("tab04").getElementsByTagName("h2")[0].getElementsByTagName("a"),
content:document.getElementById("tab04").getElementsByTagName("ul"),
current:"current",
mode:"mouseover",
speed:1000
});
// 如果您的页面引用了JQuery，那么这里的引用可以这样写
// slide({handle:$("#tab04 h2 a"), content:$("#tab04 ul"), current:"current", mode:"click"});
</script>
</body>
</html>
|
注册 登录
