Question

如何为以下插件'defaults'对象的'extraParams'属性赋值，来自 outside 插件？

(function ($) {
jQuery.fn.jScroller = function (store, parameters) {
    var defaults = {
        //numberOfRowsToRetrieve: 10,
        onSuccessCallback: function (row, container) { },
        onErrorCallback: function (thrownError) { window.alert('An error occurred while trying to retrive data from store'); },
        onTimeOutCallback: function () { },
        timeOut: 3 * 1000,
        autoIncreaseTimeOut: 1000,
        retryOnTimeOut: false,
        loadingButtonText: 'Loading...',
        loadMoreButtonText: 'Load more',
        fullListText: 'There is no more items to show',
        routValues: null

我试过这个，但导致错误：

$.jScroller.defaults.extraParams = val;

Answer 1

这是2个非常简单的插件。既没有设置任何默认值，但都响应传递给它们的选项。一个使用$.fn.plugin.defaults设置默认值，另一个使用本地var。在某种程度上，这是个人偏好的问题，以及插件的复杂性，以及您设置默认值的方式。

请注意，选项是在插件＃2外部设置的两种不同方式

DEMO：http://jsfiddle.net/fCbm8/1

(function($) {
    $.fn.plugin_1 = function(options) {
        var defaults = {}; /* merge the options into defaults*/
        var opts = $.extend({}, defaults, options);

        return this.each(function() {
            if (opts.green) {
                $(this).css('background', 'green')
            }
        });
    }
})(jQuery);
(function($) {
    $.fn.plugin_2 = function(options) { /* merge the options into defaults*/
        var opts = $.extend({}, $.fn.plugin_2.defaults, options);

        return this.each(function() {
            if (opts.big) {
                $(this).css('font-size', '30px')
            }
            if (opts.color) {
                $(this).css('color', 'white')
            }
        });
    }

    $.fn.plugin_2.defaults = {};

})(jQuery)


$(function() {
    $.fn.plugin_2.defaults.big = true;
    $('div').plugin_2({color:true}).plugin_1({green: true  })

})

Answer 2

从手册：

对于提供许多选项的更复杂和可自定义的插件，最佳做法是在调用插件时使用可以扩展的默认设置（使用$.extend）。因此，不是调用具有大量参数的插件，而是可以使用一个参数调用它，该参数是您要覆盖的设置的对象文字。

  $.fn.tooltip = function( options ) {  

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
      'location'         : 'top',
      'background-color' : 'blue'
    }, options);

    return this.each(function() {        

      // Tooltip plugin code here

    });

  };
})( jQuery );

在该示例中，手册显示了如何通过传递额外参数来调用插件，如果您愿意，可以覆盖默认参数（如{location: left}）。

如何在jquery插件中为变量属性赋值

2 个答案: