如何使用方法创建jQuery插件? [英] How to create a jQuery plugin with methods?
问题描述
我正在尝试编写一个jQuery插件,它将为调用它的对象提供其他函数/方法。我在网上阅读的所有教程(过去2小时都在浏览)包括最多如何添加选项,但不包括其他功能。
I'm trying to write a jQuery plugin that will provide additional functions/methods to the object that calls it. All the tutorials I read online (have been browsing for the past 2 hours) include, at the most, how to add options, but not additional functions.
这就是我的意思我希望这样做:
Here's what I am looking to do:
//通过调用该div的插件将格式div作为消息容器
//format div to be a message container by calling the plugin for that div
$("#mydiv").messagePlugin();
$("#mydiv").messagePlugin().saySomething("hello");
或类似的东西。
以下是它归结为:我调用插件,然后调用与该插件相关的函数。我似乎无法找到一种方法来做到这一点,我之前看过很多插件都做过。
or something along those lines. Here's what it boils down to: I call the plugin, then I call a function associated with that plugin. I can't seem to find a way to do this, and I've seen many plugins do it before.
这是我到目前为止插件的内容:
Here's what I have so far for the plugin:
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);
}
};
我怎样才能实现这样的目标?
How can I achieve something like that?
谢谢!
2013年11月18日更新:我已经更改了Hari以下评论的正确答案和upvotes。
Update Nov 18, 2013: I've changed the correct answer to that of Hari's following comments and upvotes.
推荐答案
根据jQuery插件创作页面( http://docs.jquery.com/Plugins/Authoring ),最好不要混淆jQuery和jQuery.fn名称空间。他们建议使用这种方法:
According to the jQuery Plugin Authoring page (http://docs.jquery.com/Plugins/Authoring), it's best not to muddy up the jQuery and jQuery.fn namespaces. They suggest this method:
(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 );
基本上你将函数存储在一个数组中(作用于包装函数)并检查条目是否存在传递的参数是一个字符串,如果参数是一个对象(或null),则恢复为默认方法(此处为init)。
Basically you store your functions in an array (scoped to the wrapping function) and check for an entry if the parameter passed is a string, reverting to a default method ("init" here) if the parameter is an object (or null).
然后你可以调用方法喜欢......
Then you can call the methods like so...
$('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
Javascriptsarguments变量是传递的所有参数的数组,因此它使用任意长度的函数参数。
Javascripts "arguments" variable is an array of all the arguments passed so it works with arbitrary lengths of function parameters.
这篇关于如何使用方法创建jQuery插件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!