Question

我正在尝试制作我的第一个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 }

所以它被选中但我无法弄清楚如何将它作为插件的一部分实际“使用”。

非常感谢任何帮助或指示。

干杯，

Answer 1

这些文档非常清楚地解释了它，请仔细阅读它们。

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

我看到你要做的是：var fooFadein = $(this).attr('foo-fadeIn')

Answer 2

如果我理解正确，您是否只需将自定义属性值合并到插件的选项参数中？

$.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 ));
    }
  });
};

Answer 3

好的，找到了如何让它工作（见下文）插件可能是这样的（扩展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 ));
    }
  });
};

我不是大师，但对我来说效果很好

jQuery插件 - 使用HTML5数据属性作为备用配置选项的问题

3 个答案: