jQuery技术

杭州美创科技技术资源中心 jQuery插件开发

字号+ 作者:H5之家 来源:H5之家 2015-11-19 18:38 我要评论( )

jquery插件机制中提供了两种开发开式: 一.jQuery.fn.extend(object) 对象级别 实现jQuery方法的代码一般都是放在以下代码块中的: (function( $ ){ //your code. })(jQuery) 这种匿名函数在加载的时候就直接运行,这条做的好处是可以避免与第三方插件冲突 例1





jquery插件机制中提供了两种开发开式:

一.jQuery.fn.extend(object)     对象级别

    实现jQuery方法的代码一般都是放在以下代码块中的:

     (function( $ ){

                //your code….

})(jQuery)

   这种匿名函数在加载的时候就直接运行,这条做的好处是可以避免与第三方插件冲突

 

 例1.

  (function($){

$.fn.setColor=function(color){

return this.each(function(){  //——————-a

$(this).css("color",color);

})  

}

})(jQuery)

 

使用方法如:  $("div").setColor("red");

a处使用了return,这样就可以让这个方式满足了链式,我们可以继续调用jquery方法:如

$("div").setColor("red").html("new words~~~~!");

 

优化参数:在js中我们喜欢用json格式的optionsc以控制插件的行为

例2.

 

(function($){

$.fn.setColor=function(options){

var defaults={                    //设定默认值

color:'blue',

backgroundColor:'yellow'

};

var opts=$.extend(defaults,options);

return this.each(function(){

$(this).css("color",opts.color);

$(this).css("background",opts.backgroundColor);

})

}

})(jQuery)

使用方法如:  $("div").setColor({color:'red'});

                       或$("div").setColor({color:'red',backgroundColor:'gray'});

                       

一般来说,一个插件对外只有一个接口,当要实现多个方法时,根据jquery建议的机制,把上面两种方法分开:

例3.

 

(function($){

var methods={

font:function(color){

return this.each(function(){

$(this).css('color',color);

})

},

background:function(color){

return this.each(function(){

$(this).css('background-color',color);

})

}

}

$.fn.setColor=function(method,color){

    if ( methods[method] ) {

     return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));

   } else {

     $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );

   }

}

})(jQuery)

使用的方法如:$(".div_one").setColor('font','red');

        $(".div_two").setColor('background','blue')

 

2.jQuery.extend(object)   类级别的

 

(function($){

$.myFun=function(){

alert('do sth here!');

}

})(jQuery)

调用方法:$.myFun();




Related postscoded by nessus

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【恒创科技】十月新购主机,续费“0元”

    【恒创科技】十月新购主机,续费“0元”

    2015-10-16 13:47

网友点评