首页 > 代码库 > jQuery控件有所感悟
jQuery控件有所感悟
两种写法对比:
第一种:
;(function($){
$.fn.myplugin = function(op,params){
if (typeof op == ‘string‘){
return $.fn.myplugin.methods[op](this,params);
}
//默认参数
var settings = {
"text" : "hehe",
"color" : "red"
}
settings = $.extend(settings,op);//参数合并
return this.each(function(){
$(this).text(settings.text).css("color",settings.color);
});
};
//暴露的API
$.fn.myplugin.methods = {
show : function(selector,params){
showText();
},
getValue : function(selector,params){
console.log("value is"+ params);
}
};
//静态方法
function showText(param){
alert(param);
}
})(jQuery);
控件调用:
var m = $(".b").myplugin({
"text" : "haha",
"color" : "yellow"
});
m.myplugin("show","zhangsan");
m.myplugin("getValue","zhangsan");
第二种:
;(function($){
var $target;
var settings = null;
$.fn.myPlugin = function(options){
$target = $(this);
if($.fn.myPlugin.methods[options]){
return $.fn.myPlugin.methods[options].apply(this,Array.prototype.slice.call(arguments,1));
}else if(typeof options == "object"||!options){
return $.fn.myPlugin.methods.init.apply(this,arguments);
}else{
$.error("Methods"+options+"does not exist on jQuery.myPlugin");
}
};
$.fn.myPlugin.methods = {
init : function(op){
var defualt = {
width : 100,
heght : 50
};
settings = $.extend(defualt,op);
myPluginInit(settings,$target);
bindEvents();
return $target;
},
getValue : function(){
return "000";
}
};
function myPluginInit(settings,$target){
$target.width(settings.width);
$target.height(settings.height);
}
function bindEvents(){
$(this).click(function(){
alert("click");
});
}
})(jQuery);
jQuery控件有所感悟
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。