查看 jQuery 的 Plugins/Authoring documentation我发现一些问题。我需要创建一个插件来执行以下操作:
$('#one').plug({foo:'bar'});
$('#two').plug();
根据文档我应该:
(function($){
var settings = {
foo:''
};
var methods = {
init:function(options){
return this.each(function(){
$.extend(settings, options);
//------ Problem ----------//
alert(settings.foo);
});
}
};
$.fn.plug = function(method){
//...
}
})(jQuery);
问题:$('#one').plug({foo:'bar'});
按预期提醒“bar”,但下一行不返回它返回的空字符串“酒吧”也是如此。
最佳答案
我想我应该把这个贴出来给有同样问题的人。创建 jQuery 插件的方法有很多种。我现在经常使用的是这个骨架:
(function($, window, document, undefined){
function Skeleton(element, options){
this.$element = $(element);
this.options = options;
// Plugin init goes here...
}
Skeleton.prototype = {
// Plugin methods
sampleMethod: function(){
// ...
}
};
// Plugin Definition //
$.fn.skeleton = function(options){
if( typeof options == 'string'){
var plugin = this.data('skeleton');
if(plugin){
var r = plugin[options].apply(plugin, Array.prototype.slice.call( arguments, 1 ) );
if(r) return r
}
return this
}
options = $.extend({}, $.fn.skeleton.defaults, options);
return this.each(function(){
var plugin = $.data(this, 'skeleton');
if( ! plugin ){
plugin = new Skeleton(this, options);
$.data(this, 'skeleton', plugin);
}
});
};
$.fn.skeleton.defaults = {
// Plugin options ...
};
})(jQuery, window, document);
关于jQuery 插件骨架,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10189189/