首页 > 代码库 > jqueryTAB插件写法
jqueryTAB插件写法
下面是本人写的一个小的tab切换的插件，欢迎提出意见交流讨论，不懂或不明白可与我联系
HTML代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab切换--jQuery版</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/tab.css"/>
</head>
<body>
<!-- <button id="btn">测试</button>-->
<div class="tab">
<ul class="tabNav clearfix">
<li class="high">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="tabView">
<div class="tatContent">
<div class=>夫人梵蒂冈地方官地方大风过<br/>后的风格广泛份</div>
<div>的方式并非个别辅导给你风格的花费更<br/>多风格的南方姑娘广泛的恢当年</div>
<div>都十分广泛单干户各方风格的花费放过<br/>你的很多烦恼更多发光</div>
<div>风格的好地方给你反对搞活豆发给你发<br/>的给你答的烦恼</div>
<div>风格和法国的那风格的能否度过难关的<br/>纷俄国纷</div>
</div>
</div>
</div>
<script src="http://www.mamicode.com/lib/jquery-1.8.3.js"></script>
<script src="http://www.mamicode.com/lib/jquery.tabs.1.0.js"></script>
<script src="http://www.mamicode.com/js/usetab.js"></script>
</body>
</html>
CSS代码：
@import "reset.css";
body {
font-size: 14px;
font-family: microsoft yahei, Arial;
color: #575757;
}
.tab {
width: 355px;
border: 1px solid #ccc;
margin: 20px auto;
}
.tabNav {
border-bottom: 1px solid #ccc;
background: #eee;
padding: 3px 0 0 6px;
}
.tabNav li {
float: left;
cursor: default;
padding: 6px 30px;
}
.high {
background: #fff;
border: 1px solid #ccc;
border-bottom: none;
position: relative;
top: 1px;
}
.tabView {
height: 150px;
overflow: hidden;
position: relative;
}
.tatContent {
position: absolute;
}
.tatContent div {
width: 650px;
height: 150px;
float: left;
}
js插件写法代码：
/*
* 插件名称：tab切换
* 版本：1.0
* 功能参数：
*evt:事件名称 例如：click,mouseover等
*highLight：王超豹
*easing
*direction
*
* */
;(function($){
$.fn.extend({
tabs:function(option){
//定义默认参数
var settings={
evt:‘mouseover‘,
highLight:‘high‘,
direction:"left",
index:0,
target:‘.tatContent‘
}
var opts= $.extend({},settings,option),
evt=opts.evt,
high=opts.highLight,
easing=opts.easing,
direction=opts.direction,
index=opts.index,
target=$(opts.target),
$this=this,
targetChild=target.children();
this.eq(index).addClass(high).siblings().removeClass(high);
if(direction=="left"){
target.css("width",targetChild.length*targetChild.width());
}else if(direction=="top"){
target.css("height",targetChild.length*targetChild.height());
}
function move(){
$this.eq(index).addClass(high).siblings().removeClass(high);
//alert(this.length);
if(easing=="slide"){
if(direction=="left") {
target.animate({"left":(-index)*targetChild.width()},time);
}else if(direction=="top"){
target.animate({"top":(-index)*targetChild.height()},time);
}
}else {
targetChild.hide().eq(index).show();
}
}
return this.each(function(i,el){
$(this).on(evt,function(){
index=i;
move();
});
});
}
});
})(jQuery);
有不懂或不明白的地方可以联系我，欢迎交流讨论。
jqueryTAB插件写法