关于写jQuery插件是非常有必要的。这是前端学习其中必须经过的一个过程
对于初次写插件先想清楚原理
(function($){
$.fn.yourName = function(options){
//各种属性、參数
}
var options = $.extend(defaults, options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);
这是一个基础的模板
当中的var options = $.extend(defaults, options);
1.$.extend()方法
$.extend()方法在JQuery中有两个使用方法。第一次是扩展方法。
第二个方法是
jQuery.extend([deep], target, object1, [objectN])
返回值:Object
把2个对象合并得到新的target,deep是可选的（递归合并）
合并 settings 和 options，改动并返回 settings。
jQuery 代码:
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);结果:
settings == { validate: true, limit: 5, name: "bar" }描写叙述:
合并 defaults 和 options, 不改动 defaults。
jQuery 代码:
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);结果:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }2中扩展：
第一种。看代码
$(function(){ |
jQuery.extend({ |
modalshow: function (options) { |
var defaults = { |
triggerID: 'LoginShow', |
callback: function () { } |
}<br> //这里是$.extend的另外一种使用方法<br> var opts = $.extend({},defaults, options); |
if ($("#" + opts.triggerID)[0] == null)
{ |
var $triggerBTN = $('<input type="button" value="LoginShow" id=' + opts.triggerID
+ '/>'); |
$triggerBTN.bind("click", function ()
{ |
alert(opts.triggerID); |
}); |
$("body").append($triggerBTN); |
} else { |
$("#" + opts.triggerID).bind("click", function ()
{ |
alert(opts.triggerID); |
}) |
} |
} |
}); |
$.modalshow();//这里是调用的地方,id为'loginshow'的button能够先不再HTML中加入能够自己主动生成 |
}) |
另外一种扩展
$(function(){ |
jQuery.fn.extend({ |
modalshow: function (options) { |
var defaults = { |
//这里的this是JQuery对象 |
triggerID: this.attr("id"), |
callback: function () { } |
}<br> //这里是$.extend的另外一种使用方法<br> var opts = $.extend(defaults, options); |
$("#" + opts.triggerID).bind("click", function ()
{ |
alert(opts.triggerID); |
}) |
} |
}); |
$("#loginShow").modalshow();//这里是调用的地方。这里须要先在HTML中增加元素 |
}) |
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<style type="text/css">
*{
padding:0px;
margin: 0px;
}
.clear{
clear: both;
}
.menu li{
float: left;
100px;
height: 30px;
line-height: 30px;
border:1px solid #ccc;
border-bottom: 5px solid #ccc;;
}
.main{
margin-top: 0px;
406px;
height: 206px;
overflow: hidden;
}
.main div{
403px;
height: 200px;
line-height: 200px;
text-align: center;
border:1px solid #000;
}
.menu .on{
border-bottom: 6px solid red;
}
</style>
<script type="text/javascript" src="Jquery.js"></script>
<script type="text/javascript" src="Tab.js"></script>
</head>
<body>
<div class="tabs">
<ul class="menu">
<li class="on">111</li>
<li>222</li>
<li>333</li>
<div class="clear"></div>
</ul>
<div class="main">
<div class="tab">AAA</div>
<div class="tab">BBB</div>
<div class="tab">CCC</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.tabs').myTab({
operate:'mouseover',
auto:false,
time:1000,
delay:true,
delaytime:0
})
//利用闭包的原理，对于myTab函数中的一些元素进行初始化
});
</script>
</body>
/***
* 标题：选项卡插件
* 编写时间：2015年7月14号
* 作者：Helios
* 邮箱：67487158@qq.com
***/
;(function($){
$.fn.myTab=function(options){
return this.each(function(){
var defaults={
operate: 'click',
auto: true,
time: 4000,
delay: true,
delayTime: 500
}
var opts = $.extend(defaults, options), //这里面两个參数的顺序不能改变。由于后面的那个时不会被覆盖掉的
//$.extend(defaults, options);表示的是假设options中的參数总是有值的话。那么options中的值将会取代defaults中的值
//假设options參数传入的值为空，那么就能够使用默认设置的值。
self = $(this), //获取当前的tabs
items = self.children('ul.menu').children('li'), //获取上面的是那三个
tabBox = self.children('div.main'), //获取到了main这个节点
tabBoxItems = tabBox.children('div'), // 获取mian以下的div
timer; //设置了一个定时器
var tabHandle = function(index){ //这是进行函数对选中的li和相应的div进行变换
items.siblings('li').removeClass('on').end().eq(index).addClass('on');
tabBoxItems.siblings().hide().end().eq(index).show();
//end()函数的使用方法，就是结束对当前节点的操作继续对曾经的那个节点继续操作
},
delay = function(elem){ //这个延时函数
opts.delay ?
setTimeout(function(){tabHandle(elem);},opts.delaytime) :tabHandle(elem);
},
start = function(){ //開始函数 假设參数设置了自己主动 就运行以下的第二行代码，假设没有设置的话就开启了定时器
if(!opts.auto) return ;
setInterval(autoRun,opts.time);
},
autoRun =function(){ //自己主动播放函数
var on = self.find('li.on'), //获取当前on所在的li
firstItem = items.eq(0),//设置默认第一个li
len = items.length, //
index = on.index()+1,
item = index ===len ? firstItem : on.next('li'), //当前的索引假设等于li的总长度就返回默认的第一个，假设不是就是下一个
i = index ===len ?
0 : index; // 假设播放到了最后一个就跳转到第一个
on.removeClass('on'); //移除当前li上面的样式
item.addClass('on'); //把该选中的添加样式
tabBoxItems.siblings().hide().end().eq(index).show(); // 更换div中的内容 和tabHandle 运行一样的操作
}
//bind() 方法为被选元素加入一个或多个事件处理程序，并规定事件发生时执行的函数。
//第一个參数传递事件，第二个參数还改事件相应的函数
items.bind(opts.operate, function () {
var index = items.index($(this));
delay(index)
});
if (opts.auto) { //假设设置了auto的话推断成功
start();
self.hover(function () {
clearInterval(timer);
timer = undefined;
}, function () {
start();
})
}
})
}
})(jQuery);