我的jQuery插件有什么问题?

时间:2013-04-09 18:30:40

标签: javascript jquery jquery-plugins

我开始进入JavascriptjQuery,所以我为练习创建了一个小型手风琴插件。它工作正常,但我希望它结构合理。

在阅读了几篇关于编码模式的文章后,我重写了我的插件,但现在它没有按预期工作。

插件正确初始化,但它的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);

0 个答案:

没有答案