jqueryTAB插件寫法

時間 2019-11-17

標籤 jquerytab 插件寫法简体版

原文原文鏈接

下面是本人寫的一個小的tab切換的插件，歡迎提出意見交流討論，不懂或不明白可與我聯繫css

HTML代碼：html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab切換--jQuery版</title>
<link rel="stylesheet" href="css/tab.css"/>
</head>
<body>
jquery

<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>ide

<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>this

CSS代碼：插件

@import "reset.css";htm

body {
font-size: 14px;
font-family: microsoft yahei, Arial;
color: #575757;
}seo

.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());
}