jquery拓展插件开发

学习参考网址整理:

http://blog.csdn.net/chenxi1025/article/details/52222327

http://www.cnblogs.com/ellisonDon/archive/2012/08/12/2634503.html

jquery插件的开发包括两种:

1、类级别插件开发:给jquery类添加类方法,可理解为添加静态方法;例如$.AjAX()函数;

//定义全局函数

$.foo = function(){};

$.bar = function(){};

//$.foo();$bar();

//使用extend定义全局函数

$.extend({

  foo : function(){

},

  bar : function(){

}

});

//$.foo();$bar();

//使用命名空间定义全局函数

$.plugin = {

  foo : function(){

}

}

//接受参数控制插件的行为

(function($){

  $.popShow = function(options){

  var default = {

  id : "",

  url : "",

  title : ""

};

  var settings = $.extend({},default,options);//利用extend把default的对象的方法属性整合到options中;

 //此处不需要this.each(function(){});

 //执行代码

var _id = settings.id,

  _url = settings.url,

   _title = settings.title;

  $(_id).closet(".popWrap").hide(); 

//...

};

//调用方法:$.popShow({

  id : ".close",

  url : "",

  title : "编辑"

});

})(jQuery);

//$.plugin.foo();

2、对象级别插件

//形式一

(function($){

$.fn.foo = function(){};

})(jQuery);

$.fn.foo = function(){};

//形式二

(function($){

$.fn.extend({

  foo : funciton(){};

})

})(jQuery);

//接受参数控制插件的行为

(function($){

$.fn.popShow = function(options){

var defaults = { //配置项

  url : "",

  title : ""

};

var settings = $.extend({},defaults,options);// 这个是利用extend方法把 defaults对象的方法属性全部整合到 options里

this.each(function(){

  //$.fn.abc()这种实例化方法才需要有this.each循环给多个相同类名的元素绑定此方法里面的事件;// $("div").abc();

  var tag =  $(this);  //调用方法时为$("#div").popShow(); 此处的$(this)相当于$("#div");

  //执行代码

  return this;

});

};

})(jQuery);

 

posted @ 2017-03-21 10:23  小小只蜗牛  阅读(155)  评论(0编辑  收藏  举报