关于jQuery写插件及其演示

关于写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中扩展：

第一种。看代码

view source

" href="http://archive.cnblogs.com/a/2049120/#about" style="color:rgb(202,0,0); text-decoration:none; width:16px; height:16px">?

$(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中加入能够自己主动生成

})

另外一种扩展

view source

print ?

$(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>

</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);