您的位置：首页 > Web前端 > JQuery
JQuery Tabs 选项卡插件

2013-07-11 11:29 246 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
body {
background-color: #FFF;
font: 12px/21px Arial;
margin: 3em;
}
h3 {
font-size: 16px;
margin-bottom: 1em;
}
h3 span {
color: #666;
font-size: 14px;
margin-left: 14px;
}
.tags {
height: 38px;
list-style: none outside none;
margin: 0 0 -1px;
padding: 0;
position: relative;
}
.tags li {
background-color: #EAEAEF;
border: 1px solid #DDD;
cursor: pointer;
display: inline;
float: left;
margin-right: 6px;
}
.tags li a {
color: #36C;
display: block;
line-height: 36px;
padding: 0 1em;
text-decoration: none;
}
.tags li.current {
background-color: #FFF;
border-bottom-style: none;
font-weight: 700;
height: 37px;
}
.tags li.current a {
color: #C63;
outline: none;
}
.panes {
border: 1px solid #DDD;
height: 5em;
margin-bottom: 2em;
padding: 1em;
}
</style>
</head>

<script src='http://code.jquery.com/jquery.js'></script>
<script>
(function($) {
// 插件名称 oTabs
$.fn.oTabs = function(options) {
// 默认值初始化
var defaults = {
// 默认起始显示序列
dft: 0,
// 默认事件延迟时间
htime: 200,
// 默认鼠标事件
act: "click"
};
// 合并 defaults 和 options 修改并返回 defaults
var sets = $.extend(defaults, options);

// this 指通过当前选择器获取的 jQuery 对象
// 选项卡标签
var tag = $(".tags > li", this);
// 选项卡内容
var pane = $(".panes > div", this);

// 起始显示标签
tag.eq(sets.dft).addClass("current");
// 起始显示内容
pane.eq(sets.dft).show().siblings().hide();

// 选项卡切换方法
function fnTabs(obj) {
$(obj).addClass("current").siblings().removeClass("current");
pane.eq($(obj).index()).show().siblings().hide();
};

function ckTabs() {
var obj = $(this);
fnTabs(obj);
return false;
}

// 判断是否鼠标划过，默认为鼠标单击
if (sets.act == "mouseover") {
var hoverTimer;
tag.hover(function() {
var obj = $(this);
hoverTimer = setTimeout(function() {
fnTabs(obj);
},
sets.htime)
},
function() {
clearTimeout(hoverTimer);
});
tag.click(ckTabs);
} else {
tag.click(ckTabs);
}
}
})(jQuery);
$(document).ready(function() {
$("#tabs").oTabs();
$("#tabs2").oTabs({
dft: 1,
// 设置起始显示序列，默认为第一页
htime: 300,
// 设置事件延迟时间，默认为延迟200毫秒执行
act: "mouseover" // 设置鼠标事件，默认为鼠标单击
});
});
</script>

<body>

<h3>鼠标单击</h3>
<div id="tabs">
<ul class="tags">
<li><a href="#">jQuery</a></li>
<li><a href="#">Prototype</a></li>
<li><a href="#">MooTools</a></li>
</ul>
<div class="panes">
<div>Hello jQuery!</div>
<div>Hello Prototype!</div>
<div>Hello MooTools!</div>
</div>
</div>
<h3>鼠标划过<span>事件延迟300毫秒</span></h3>
<div id="tabs2">
<ul class="tags">
<li><a href="#">jQuery</a></li>
<li><a href="#">Prototype</a></li>
<li><a href="#">MooTools</a></li>
</ul>
<div class="panes">
<div>Hello jQuery!</div>
<div>Hello Prototype!</div>
<div>Hello MooTools!</div>
</div>
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航