我开始进入Javascript
和jQuery
,所以我为练习创建了一个小型手风琴插件。它工作正常,但我希望它结构合理。
在阅读了几篇关于编码模式的文章后,我重写了我的插件,但现在它没有按预期工作。
插件正确初始化,但它的main()
方法存在问题。 closeOtherMenus
选项不再有效,并且slideSpeed
选项也存在错误(尝试点击第三个.handle
div,您会看到我的意思)。
我做错了什么?
摆弄第一个版本(正常工作):http://jsfiddle.net/WAE2B/
;(function($, window, document, undefined){
$.fn.accrdn = function(userSettings) {
var defaults = {
init: 0,
slideSpeed: 400,
closeOtherMenus: false,
toggle: false
};
var options = $.extend({}, defaults, userSettings);
var $this = this;
var handle = this.find('.handle');
var panels = this.find('.panel');
var init = options.init;
return this.each(function(){
if ($this.has('.panel'&&'.handle').length) {
var numPanels = 0;
var handles = $this.find('.handle');
handles.each(function() {
numPanels += 1;
});
if (init == 0) {
panels.slideUp(1);
} else if (init > 0 && init <= numPanels) {
var index = init - 1;
$this.find('.panel:not(.panel:eq(' + index + '))').slideUp(1);
handle.eq(index).data('open', true);
} else if (init == NaN || init > numPanels) {
throw 'error: init has to be less than or equal to the number of accordion panels';
};
};
handle.click(function(){
var $this = $(this);
if (!$this.data('open')) {
if (options.closeOtherMenus) {
handle.each(function() {
if ($(this).data('open')) {
$(this).next('.panel').slideToggle(options.slideSpeed);
$(this).data('open', false);
}
});
};
$this.next('.panel').slideToggle(options.slideSpeed);
$this.data('open', true);
} else {
if (options.toggle) {
$this.next('.panel').slideToggle(options.slideSpeed);
$this.data('open', false);
}
};
});
});
};
})(jQuery, window, document);
摆弄第二个版本(需要修复):http://jsfiddle.net/xMhNr/1/
;(function($, window, document, undefined){
var pluginName = 'accrdn',
defaults = {
init: 0,
slideSpeed: 400,
closeOtherMenus: false,
toggle: false
};
function Accrdn(element, options) {
this.element = $(element);
this.options = $.extend( {}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.handles = this.element.find('.handle'),
this.panels = this.element.find('.panel');
this.init();
this.main(this.options);
};
Accrdn.prototype.init = function () {
if (this.element.has('.panel'&&'.handle').length) {
var numPanels = 0;
this.handles.each(function () {
numPanels += 1;
});
if (this.options.init == 0) {
this.panels.slideUp(1);
} else if (this.options.init > 0 && this.options.init <= numPanels) {
var index = this.options.init - 1;
this.element.find('.panel:not(.panel:eq(' + index + '))').slideUp(1);
this.handles.eq(index).data('open', true);
} else if (this.options.init == NaN || this.options.init > numPanels) {
throw 'error: init has to be less than or equal to the number of accordion panels';
};
};
};
Accrdn.prototype.main = function (options) {
this.handles.click(function(){
var $this = $(this);
if (!$this.data('open')) {
if (options.closeOtherMenus) {
$this.each(function() {
if ($this.data('open')) {
$this.next('.panel').slideToggle(options.slideSpeed);
$this.data('open', false);
}
});
};
$this.next('.panel').slideToggle(options.slideSpeed);
$this.data('open', true);
} else {
if (options.toggle) {
$this.next('.panel').slideToggle(options.slideSpeed);
$this.data('open', false);
}
};
});
};
$.fn.accrdn = function (options) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName,
new Accrdn(this, options));
}
});
};
})(jQuery, window, document);