您的位置：首页 > Web前端 > JQuery

[置顶] 彻底征服jQuery 插件开发

2016-05-26 11:24 507 查看

看之前先看文章：http://blog.csdn.net/libin_1/article/details/51034031



index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>彻底征服jQuery 插件开发</title>

<script type="text/javascript" src="js/jquery-2.2.4.min.js" ></script>
<script type="text/javascript" src="js/jQuery.mytabs.js"></script>
<script type="text/javascript">
$(function() {
$("#tab").mytabs();
$("#tab2").mytabs({
bind: 'click',
animation: 'left'
});
$("#tab3").mytabs({
bind: 'hover',
animation: 'up'
});
$("#tab4").mytabs({
bind: 'hover',
animation: 'fadein'
});
})
</script>
<style>
body {
background: #fff;
}

h2 {
width: 400px;
margin: 0 auto 10px auto;
font-size: 18px;
font-family: "微软雅黑";
color: red;
text-align: center;
border: 1px solid red;
}

.tab {
position: relative;
width: 400px;
height: 230px;
overflow: hidden;
margin: 0 auto 20px auto;
font-family: Arial;
border: 1px solid red;
}

.tab-nav {
height: 30px;
overflow: hidden;
background:green;
}

.tab-nav a {
display: block;
float: left;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
color: blue;

}

.tab-nav a.current {
background:orange;
color: red;
}

.tab-con {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
background: pink;
}

.tab-con-item {
display: none;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
color: red;
}
</style>
</head>

<body>
<div style="margin:20px auto; text-align:center;border: 1px solid red;">
<a href="http://blog.csdn.net/libin_1?viewmode=contents" target="_blank" style="color:#06F">彻底征服jQuery 插件开发</a>
</div>
<h2>默认样式：自动运行、无动画效果、Hover事件</h2>
<div class="tab" id="tab">
<div class="tab-nav j-tab-nav">
<a href="javascript:void(0);" class="current">Tab1</a>
<a href="javascript:void(0);">Tab2</a>
<a href="javascript:void(0);">Tab3</a>
<a href="javascript:void(0);">Tab4</a>
<a href="javascript:void(0);">Tab5</a>
</div>
<div class="tab-con">
<div class="j-tab-con">
<div class="tab-con-item" style="display:block;">
111111
</div>
<div class="tab-con-item">
222222
</div>
<div class="tab-con-item">
333333
</div>
<div class="tab-con-item">
444444
</div>
<div class="tab-con-item">
555555
</div>
</div>
</div>
</div>
<h2>自动运行、向左滚动、点击事件</h2>
<div class="tab" id="tab2">
<div class="tab-nav j-tab-nav">
<a href="javascript:void(0);" class="current">Tab1</a>
<a href="javascript:void(0);">Tab2</a>
<a href="javascript:void(0);">Tab3</a>
<a href="javascript:void(0);">Tab4</a>
<a href="javascript:void(0);">Tab5</a>
</div>
<div class="tab-con">
<div class="j-tab-con">
<div class="tab-con-item" style="display:block;">
111111
</div>
<div class="tab-con-item">
222222
</div>
<div class="tab-con-item">
333333
</div>
<div class="tab-con-item">
444444
</div>
<div class="tab-con-item">
555555
</div>
</div>
</div>
</div>
<h2>自动运行、向上滚动、Hover事件</h2>
<div class="tab" id="tab3">
<div class="tab-nav j-tab-nav">
<a href="javascript:void(0);" class="current">Tab1</a>
<a href="javascript:void(0);">Tab2</a>
<a href="javascript:void(0);">Tab3</a>
<a href="javascript:void(0);">Tab4</a>
<a href="javascript:void(0);">Tab5</a>
</div>
<div class="tab-con">
<div class="j-tab-con">
<div class="tab-con-item" style="display:block;">
111111
</div>
<div class="tab-con-item">
222222
</div>
<div class="tab-con-item">
333333
</div>
<div class="tab-con-item">
444444
</div>
<div class="tab-con-item">
555555
</div>
</div>
</div>
</div>
<h2>自动运行、渐入、Hover事件</h2>
<div class="tab" id="tab4">
<div class="tab-nav j-tab-nav">
<a href="javascript:void(0);" class="current">Tab1</a>
<a href="javascript:void(0);">Tab2</a>
<a href="javascript:void(0);">Tab3</a>
<a href="javascript:void(0);">Tab4</a>
<a href="javascript:void(0);">Tab5</a>
</div>
<div class="tab-con">
<div class="j-tab-con">
<div class="tab-con-item" style="display:block;">
111111
</div>
<div class="tab-con-item">
222222
</div>
<div class="tab-con-item">
333333
</div>
<div class="tab-con-item">
444444
</div>
<div class="tab-con-item">
555555
</div>
</div>
</div>
</div>

</body>

</html>


jquery.mytabs.js

(function($) {

$.fn.mytabs = function(options) {

//默认值
var defaultVal = {
btnClass: '.j-tab-nav',
/*按钮的父级Class*/
conClass: '.j-tab-con',
/*内容的父级Class*/
bind: 'hover',
/*事件参数 click,hover*/
animation: '0',
/*动画方向 left,up,fadein,0 为无动画*/
speed: 300,
/*动画运动速度*/
delay: 200,
/*Tab延迟速度*/
auto: true,
/*是否开启自动运行 true,false*/
autoSpeed: 3000 /*自动运行速度*/
};

//全局变量
var obj = $.extend(defaultVal, options),
evt = obj.bind,
btn = $(this).find(obj.btnClass),
con = $(this).find(obj.conClass),
anim = obj.animation,
conWidth = con.width(),
conHeight = con.height(),
len = con.children().length,
sw = len * conWidth,
sh = len * conHeight,
i = 0,
len, t, timer;

return this.each(function() {

//判断动画方向
function judgeAnim() {
var w = i * conWidth,
h = i * conHeight;
btn.children().removeClass('current').eq(i).addClass('current');
switch (anim) {
case '0':
con.children().hide().eq(i).show();
break;
case 'left':
con.css({
position: 'absolute',
width: sw
}).children().css({
float: 'left',
display: 'block'
}).end().stop().animate({
left: -w
}, obj.speed);
break;
case 'up':
con.css({
position: 'absolute',
height: sh
}).children().css({
display: 'block'
}).end().stop().animate({
top: -h
}, obj.speed);
break;
case 'fadein':
con.children().hide().eq(i).fadeIn();
break;
}
}

//判断事件类型
if (evt == "hover") {
btn.children().hover(function() {
var j = $(this).index();

function s() {
i = j;
judgeAnim();
}
timer = setTimeout(s, obj.delay);
}, function() {
clearTimeout(timer);
})
} else {
btn.children().bind(evt, function() {
i = $(this).index();
judgeAnim();
})
}

//自动运行
function startRun() {
t = setInterval(function() {
i++;
if (i >= len) {
switch (anim) {
case 'left':
con.stop().css({
left: conWidth
});
break;
case 'up':
con.stop().css({
top: conHeight
});
}
i = 0;
}
judgeAnim();
}, obj.autoSpeed)
}

//如果自动运行开启，调用自动运行函数
if (obj.auto) {
$(this).hover(function() {
clearInterval(t);
}, function() {
startRun();
})
startRun();
}

})

}

})(jQuery);


为什么要在 $.fn.mytabs 中返回this.each();

在返回this之前，需要完成插件的功能mytabs，
因为调用的mytabs插件的为一个jquery对象数组，所以需要调用each方法对每一个对象执行mytabs

//在这里面,this指的是用jQuery选中的元素
//example :$('a'),则this=$('a')

当然你可以:

全选复制放进笔记this.each(function(){
....
});

return this;

实在理解不了理解不了用$(this).each(function(){
....
});

return this; 也行！！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航