jQuery:插件方法,如何将内容传递给它们?
最近我为我的网络项目编写了很多小插件,但我仍然是插件创作的初学者。
我一直在jquery插件上做很多阅读,但我根本无法绕过methods
。
这是我目前的插件大多是这样的:
(function($){ $.fn.extend({ myHelper: function(options) { var defaults = { some: 'defaults' } var options = $.extend(defaults, options); return this.each(function() { var o = options; function next(target) { // do something like slide to the next image in a slideshow // based on the target and count passed in slide('right'); } function prev(target) { slide('left'); } function slide(direction) { // animation for sliding in the next one $('ul > li.current').animate({ … }, 800); } // doesn't exactly make sense but its just to illustrate what I need to do. $('.next').click(next($('ul > #example')); }); } }); })(jQuery);
我现在的目标是什么,我认为方法是去这里的方法……基本上没有所有这些命名函数用于微小的function,而是定义了诸如nextSlide
, prevSlide
, reset
, loop
我觉得你 prevSlide
这个想法…
您可能已经注意到我将目标之类的东西传递给函数(例如next()
),然后将next()
作为独立的东西调用。
我现在想通过简单地让一个方法完成所有这一切来开始这样做,并使我能够在我的plugin.js
文件中写入类似于$(o.nextBtn).nextSlide();
例如。
但是,如何编写一个接受诸如此示例中的target
参数的方法?
到目前为止,我发现的方法的所有示例和教程基本上都没有选择接受方法函数的参数。 这有可能吗?
理想情况下,我想在我的插件中使这些function可以链接,但这已经开始让我头脑发热了。
如果你知道如何以一种整洁有序的方式创造出我想要完成的事情,或者有一个很好的教程我应该看一下,请分享。
谢谢。
构建jQuery插件的推荐方法是将所有方法实际放入一个数组中,然后使用插件的main函数来访问它们。
例如,使用您的一些示例:
function($) { var methods = { next(target) { target.foo(); } }; $.fn.plugin = function( method ) { if ( methods[method] ) { return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( 'Method ' + method + ' does not exist on jQuery.tooltip' ); } }; })( jQuery ); To use it then: var blah = $('#' + elemID).plugin('init'); blah.plugin('next','#'+ some_other_element);
在这个例子中,blah是表示插件的对象,然后使用插件的方法调用函数并传入值。