如何创建一个jQuery插件的方法？
我正在尝试编写一个jQuery插件，它将为调用它的对象提供附加的函数/方法。 我在线阅读的所有教程（浏览过去2小时）至多包括如何添加选项，但不包括其他功能。
以下是我期待做的事情：
//通过调用该div的插件将div格式化为一个消息容器
$("#mydiv").messagePlugin();
$("#mydiv").messagePlugin().saySomething("hello");
或类似的规定。 下面是它的归结：我调用插件，然后我调用与该插件关联的函数。 我似乎无法找到一种方法来做到这一点，我看到很多插件都是以前做的。
这是我迄今为止的插件：
jQuery.fn.messagePlugin = function() {
return this.each(function(){
alert(this);
});
//i tried to do this, but it does not seem to work
jQuery.fn.messagePlugin.saySomething = function(message){
$(this).html(message);
}
};
我怎样才能达到这样的目标？
谢谢！
2013年11月18日更新：我已经改变了Hari的以下评论和赞扬的正确答案。
根据jQuery Plugin Authoring页面（http://docs.jquery.com/Plugins/Authoring），最好不要混淆jQuery和jQuery.fn命名空间。 他们建议这种方法：
(function( $ ){
var methods = {
init : function(options) {
},
show : function( ) { },// IS
hide : function( ) { },// GOOD
update : function( content ) { }// !!!
};
$.fn.tooltip = function(methodOrOptions) {
if ( methods[methodOrOptions] ) {
return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
// Default to "init"
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
基本上，你将函数存储在一个数组中（作用域为包装函数），如果参数传递的是一个字符串，则返回一个默认方法（此处为“init”），如果参数是一个对象（或null）则检查一个条目。
然后你可以调用这样的方法...
$('div').tooltip(); // calls the init method
$('div').tooltip({ // calls the init method
foo : 'bar'
});
$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method
Javascripts“arguments”变量是所有参数传递的数组，因此它可以使用任意长度的函数参数。
以下是我用于使用其他方法创建插件的模式。 你会像这样使用它：
$('selector').myplugin( { key: 'value' } );
或者，直接调用方法，
$('selector').myplugin( 'mymethod1', 'argument' );
例：
;(function($) {
$.fn.extend({
myplugin: function(options,arg) {
if (options && typeof(options) == 'object') {
options = $.extend( {}, $.myplugin.defaults, options );
}
// this creates a plugin for each element in
// the selector or runs the function once per
// selector. To have it do so for just the
// first element (once), return false after
// creating the plugin to stop the each iteration
this.each(function() {
new $.myplugin(this, options, arg );
});
return;
}
});
$.myplugin = function( elem, options, arg ) {
if (options && typeof(options) == 'string') {
if (options == 'mymethod1') {
myplugin_method1( arg );
}
else if (options == 'mymethod2') {
myplugin_method2( arg );
}
return;
}
...normal plugin actions...
function myplugin_method1(arg)
{
...do method1 with this and arg
}
function myplugin_method2(arg)
{
...do method2 with this and arg
}
};
$.myplugin.defaults = {
...
};
})(jQuery);
这种方法如何：
jQuery.fn.messagePlugin = function(){
var selectedObjects = this;
return {
saySomething : function(message){
$(selectedObjects).each(function(){
$(this).html(message);
});
return selectedObjects; // Preserve the jQuery chainability
},
anotherAction : function(){
//...
return selectedObjects;
}
};
}
// Usage:
$('p').messagePlugin().saySomething('I am a Paragraph').css('color', 'red');
选定的对象存储在messagePlugin闭包中，并且该函数返回一个包含与插件关联的函数的对象，在每个函数中，您可以对当前选定的对象执行所需的操作。
你可以在这里测试和使用代码。
编辑：更新代码以保留jQuery链接性的强大功能。
链接地址: http://www.djcxy.com/p/96343.html