0

初めての jQuery プラグインを作成しようとしていますが、HTML5 データ属性を受け入れるようにプラグインを拡張しようとして少し問題が発生しました。ユーザーは、HTML のデータ属性を使用するだけで、設定を開始および微調整できる必要があります (ユーザーは、必要に応じてスクリプトで初期化することもできます)。

HTML の例:

<ul id="list" data-foo-scroll="true" data-foo-fadeIn="1">
 <li>Phone 1</li>
</ul>

data-foo-scroll auto はプラグインを正常に初期化しますが、現在、fadeIn 属性を渡そうとしています (そして失敗しています)。

これが私のプラグインjsです：

;(function ( $, window, document, undefined ) {

    var pluginName = "fooScroll",
        defaults = {
            loadingText:    "loading",
            loadingClass:   "foo-loading",
            showText:       "show more",
            nextLink:       ".next",
            fadeIn:         500,
            autoLoad:       false,
            autoLoadOffset: 100
        };

    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this._next = $(this._defaults.nextLink).attr('href');
        this.init();
    }

    Plugin.prototype = {

        init: function() {
            $(this.options.nextLink).hide();    
            this.getNextPage(this.element, this.options);
        },

        getNextPage: function(el, options) {
            var self = this;
            if(this.options.autoLoad===true) {
                this.options.showText = '&nbsp';
                $(window).scroll(function() {
                   if($(window).scrollTop() + $(window).height() == $(document).height()) {
                       $('#foo-more').trigger('click');
                   }
                });
            };
            $(el).after("<div id='foo-more'><a href='#'>"+this.options.showText+"</a></div>")
            $("#foo-more").on("click", function(event){
                $('#foo-more a').text(options.loadingText);
                $('#foo-more').addClass(options.loadingClass);
                $.ajax({
                    url: self._next,
                    datatype: 'html',
                    success: function (data) {
                        var list;
                        $(el).attr('id') ? list = '#'+$(el).attr('id'): list = '.'+$(el).attr('class');
                        $(el).append('<div class="foo-new" />');
                        $(el).find('div:last').append( $('<div />').html(data).find(list).children()).hide();

                        // if ajax returns any images then delay DOM update until they are all loaded
                        if ($('<div />').html(data).find(list).find('img').length > 0) {
                            $(el).find('img').on('load', function() { 
                                self.showNextPage();
                            });
                        } else {
                            self.showNextPage();
                        }
                        // update show me more link with latest href
                        self._next = $('<div />').html(data).find(options.nextLink).attr('href');
                        // if ajax doesnt return a next button then hide show me more link
                        if (($('<div />').html(data).find(options.nextLink).length == 0)) $('#foo-more').remove();
                    }
                })
                event.preventDefault();
            });
        },

        showNextPage: function() {
            $(this.element).find('div.foo-new:last').fadeIn(this.options.fadeIn); 
            $('#foo-more a').text(this.options.showText);
            $('#foo-more').removeClass(this.options.loadingClass);
        }     

    };

    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            var objD = $(this).data();
            console.log(objD);
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin( this, options ));
            }
        });
    };

    // auto init
    $("[data-foo-scroll='true']").fooScroll();


})( jQuery, window, document );

console.log が出力されることに注意してください。

Object { fooFadein=1, fooScroll=true }

そのため、ピックアップされていますが、プラグインの一部として実際に「使用」する方法がわかりません。

どんな助けや指針も大歓迎です。

乾杯、

4

3 に答える 3

0

このドキュメントはそれをかなり明確に説明しているので、読んでください。

http://api.jquery.com/data/

あなたがやろうとしているのは次のとおりです。var fooFadein = $(this).attr('foo-fadeIn')

于 2013-01-25T16:27:21.257 に答える
0

わかりました、それを機能させる方法を見つけました（以下を参照）プラグインは次のようになります（jqueryプラグインボイラープレートを拡張します）：

function Plugin( element, options, objD ) {
    this.element = element;
    this.options = $.extend( {}, defaults, options, objD );
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
}

$.fn[pluginName] = function ( options ) {
  return this.each(function () {
    if (!$.data(this, "plugin_" + pluginName)) {
        var objD = $(this).data();
        $.data(this, "plugin_" + pluginName, new Plugin( this, options, objD ));
    }
  });
};

私は第一人者ではありませんが、私にはうまく機能します

于 2013-01-28T10:27:56.110 に答える
0

私の理解が正しければ、カスタム属性値をプラグインのオプション パラメータにマージするだけでよいのではないでしょうか?

$.fn[pluginName] = function ( options ) {
  return this.each(function () {
    if (!$.data(this, "plugin_" + pluginName)) {
      var objD = $(this).data();
      $.extend(options, objD); // extend with data-stuff
      $.data(this, "plugin_" + pluginName, new Plugin( this, options ));
    }
  });
};
于 2013-01-25T16:38:58.720 に答える