关于写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中加入元素
|
})
|
我在这里写了一个比较完整的插件是关于选项卡的
//这个是html文件 我写的插件时引入的Tab.js
<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;
width: 100px;
height: 30px;
line-height: 30px;
border:1px solid #ccc;
border-bottom: 5px solid #ccc;;
}
.main{
margin-top: 0px;
width: 406px;
height: 206px;
overflow: hidden;
}
.main div{
width: 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>
<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;
width: 100px;
height: 30px;
line-height: 30px;
border:1px solid #ccc;
border-bottom: 5px solid #ccc;;
}
.main{
margin-top: 0px;
width: 406px;
height: 206px;
overflow: hidden;
}
.main div{
width: 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>
</html>
//下面的是Tab.js文件注释我写的比前清楚了
/***
* 标题：选项卡插件
* 编写时间：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);