0

私は最初の jQuery プラグインを開発しようとしていますが、多くの落とし穴に遭遇しました。プラグイン自体は、1 つのページの複数のインスタンスを異なる設定で操作する、ある種のレンジ スライダーです。

とにかく、私は多くの問題に遭遇しました。まず第一に、開始後にプラグイン設定を取得して変更することができません。これまでのところ、Google と SO の両方を使用してきましたが、別の問題に遭遇しました。すべてのチュートリアル、ソリューションはvar $this = $(this), data = $this.data('name');、プラグインのオプション/設定に簡単にアクセスするために使用します。私も使っていますが、なぜかセーブデータが取り出せません。これが私のコードです：

;(function ($) {
    var settings = {
        min: 20,
        max: 100,
        step: .1,
        vertical: false,
        defaultValue: 20,
        onMouseUpFn: function() {},
        onSlideChange: function() {}
    };

    var methods = {
        init: function (options) {
            return this.each(function() {
                var $this = $(this),
                    data = $this.data('slider');/*,
                    // won't work. why?
                    settings = {
                        min: 20,
                        max: 100,
                        step: .1,
                        defaultValue: 20,
                        vertical: false,
                        onMouseUpArea: false,
                        onMouseUpFn: function () {},
                        onSliderChange: function() {}
                    };*/

                if(options) {$.extend(settings, options); }

                if(!data) {
                    var defaultData = {
                        target:$this,
                        settings:settings,
                        slider:$this.find('.sliderrr'),
                        sliderWidth:$this.find('.sliderrr').width(),
                        valueText:$this.find('.sliderrr span')
                    };

                    data = $this.data('slider', defaultData);
                }

                console.log([
                    data.data('slider'),
                    $().jquery // "1.7.2"
                ]);
                /*[
                Object
                    settings: Object
                        defaultValue: "56.3"
                        max: "56.3"
                        min: 20
                        onMouseUpFn: function () {}
                        onSlideChange: function () {}
                        step: 0.1
                        vertical: false
                        __proto__: Object
                    slider: e.fn.e.init[1]
                    sliderWidth: 10
                    target: e.fn.e.init[1]
                    valueText: e.fn.e.init[1]
                    __proto__: Object
                ]*/

                if(data.settings.vertical) { // Uncaught TypeError: Cannot read property 'vertical' of undefined
                    data = $.extend(data, {
                        barOffset: $this.find('.barrr').offset().top,
                        barLength: $this.find('.barrr').height() - data.sliderWidth
                    });
                } else {
                    data = $.extend(data, {
                        barOffset: $this.find('.barrr').offset().left,
                        barLength: $this.find('.barrr').width() - data.sliderWidth
                    });
                }

                data.slider.mousedown(function(e) {
                    // slider's logic
                });

                $this.data('slider', data);
            });
        },
        setOptions: function(options) {
            return this.each(function() {
                var data = $(this).data('slider');
                var settings = data.settings; // Uncaught TypeError: Cannot read property 'settings' of undefined

                if(options) {
                    settings = $.extend(settings, options);
                    data = $.extend(data, settings);

                    $(this).data('slider', data);
                }
            });
        }
    };

    $.fn.sliderrr = 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 {
            return $.error('Method ' + method + ' does not exist in slider');
        }
    }
})(jQuery);

オブジェクトのコメントとコンソール ログとして取得したエラーを追加しました。jsFiddle のバージョンは次のとおりです: http://jsfiddle.net/RJkA2/

私はこれをほぼ2日間いじっていますが、助けていただければ幸いです。

4

2 に答える 2

1

私はあなたのinit関数を変更しました：

if(!data) {
    var defaultData = {
        target:$this,
        settings:settings,
        slider:$this.find('.sliderrr'),
        sliderWidth:$this.find('.sliderrr').width(),
        valueText:$this.find('.sliderrr span')
    };
    $this.data('slider', defaultData); //setting data doesn't return the data!
    data=$this.data('slider');
}
console.log([$this.data('slider'), $().jquery]); //"data.data" was written here by mistake

ここに jsfiddle があります: http://jsfiddle.net/RJkA2/1/

お役に立てれば！

于 2012-09-20T08:01:33.600 に答える
1

また、コードからエラーを削除しました。動作するようになりました。デモ: jsfiddle.net/RJkA2/2/

于 2012-09-20T08:20:40.023 に答える