我创建了一个插件来转换一个HTML选择框到自定义下拉使用DIV的。
一切运作良好，但我想使它成为一个更好一点。 看到我的jsfiddle
在插件的最后，我有2种方法，slideDownOptions＆slideUpOptions，我想使这些可用的插件之外，以便其他事件可以触发动作。
林开始有点困惑如何做到这一点，更具体如何从插件内，并从插件之外调用的方法。
任何帮助总是赞赏
Answer 1:
想想使用面向对象的代码重构你的插件。 有了这个，你可以让API为你的插件如jQuery UI API。 所以，你可以访问插件类似的方法：
$('select').customSelect(); // apply plugin to elements
$('select').customSelect('resetOpacity'); // call method resetOpacity();
$('select').customSelect('setOpacity', 0.5); // call method with arguments
建立这样的插件看起来像以下基本模板：
// plugin example
(function($){
// custom select class
function CustomSelect(item, options) {
this.options = $.extend({
foo: 'bar'
}, options);
this.item = $(item);
this.init();
}
CustomSelect.prototype = {
init: function() {
this.item.css({opacity:0.5});
},
resetOpacity: function() {
this.setOpacity('');
},
setOpacity: function(opacity) {
this.item.css({opacity:opacity});
}
}
// jQuery plugin interface
$.fn.customSelect = function(opt) {
// slice arguments to leave only arguments after function name
var args = Array.prototype.slice.call(arguments, 1);
return this.each(function() {
var item = $(this), instance = item.data('CustomSelect');
if(!instance) {
// create plugin instance and save it in data
item.data('CustomSelect', new CustomSelect(this, opt));
} else {
// if instance already created call method
if(typeof opt === 'string') {
instance[opt].apply(instance, args);
}
}
});
}
}(jQuery));
// plugin testing
$('select').customSelect();
工作JS提琴在这里： http://jsfiddle.net/XsZ3Z/
Answer 2:
你得去重构代码，得到它的工作。 考虑使用jQuery的样板 ：
;(function ( $, window, undefined ) {
var pluginName = 'convertSelect',
document = window.document,
defaults = {
propertyName: "value"
};
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
// Private methods start with underscore
_generateMarkup: function() {
// you can access 'this' which refers to the constructor
// so you have access the all the properties an methods
// of the prototype, for example:
var o = this.options
},
// Public methods
slideDownOptions: function() { ... }
}
$.fn[ pluginName ] = function ( options ) {
return this.each(function () {
if (!$.data( this, 'plugin_' + pluginName ) ) {
$.data( this, 'plugin_' + pluginName, new Plugin( this, options ) );
}
});
};
}(jQuery, window));
然后，你可以可以调用的公共方法，如下所示：
var $select = $('select').convertSelect().data('plugin_convertSelect');
$select.slideDownOptions();
我也有类似的问题，我的项目，我最近不得不重构整个事情，因为我是污染jQuery的命名空间有太多的方法。 jQuery的样板作品非常好，它是基于官方的jQuery指南，但有一些曲折。 如果你想在行动中看到这个插件模式看一看https://github.com/elclanrs/jq-idealforms/tree/master/js/src 。
文章来源: jQuery plugin creation and public facing methods
