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

第一种。看代码

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

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