jqueryTAB外掛程式寫法

標籤：style   io   ar   color   os   sp   on   div   cti   

下面是本人寫的一個小的tab切換的外掛程式，歡迎提出意見交流討論，不懂或不明白可與我聯絡

 

 

HTML代碼：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab切換--jQuery版</title>
<link rel="stylesheet" href="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="lib/jquery-1.8.3.js"></script>
<script src="lib/jquery.tabs.1.0.js"></script>
<script src="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外掛程式寫法