Question

我正在尝试创建可自定义的minHeight选项。

默认情况下， minHeight变量应该等于对象高度，但是如果用户决定更改它，他们可能会在回拨时使用普通的插件配置选项。

以下是我的尝试：

(function($) {
   $.fn.ezToggle = function(options) {

       var defaults = {

       }, 
       options = $.extend(defaults, options);

       return this.each(function() {

           defaults.minHeight = $(this).outerHeight();
           $(this).height(defaults.minHeight);

           alert(defaults.minHeight);

        });

    };
}) (jQuery);

$(function() {
    $('.foo').ezToggle({
        minHeight : 50 // Height does not change
    });
});

查看jsFiddle以获取快速示例：http://jsfiddle.net/hCLwx/8/

Answer 1

更新我刚刚意识到你正在将元素设置为当前高度，这似乎没有多大意义，但是我不是百分之百确定你的意图，所以我只更新了最后两个示例，只有在设置minHeight选项时才设置高度。

另一次更新好的，我想我知道了，如果用户没有设置该选项，您还希望将该选项设置为当前高度。我再次更新了这些例子。

检查选项是否已设置，如果是这种情况，请在元素高度上使用它。您只需使用||运算符：

return this.each(function() {

    options.minHeight = options.minHeight || $(this).outerHeight();
    $(this).height(options.minHeight);

    alert(options.minHeight);

});

minHeight将包含minHeight选项值，以防它被设置而不是0，否则将包含元素高度。如果您还想接受0作为minHeight，那么您可以针对undefined进行测试：

return this.each(function() {

    if(options.minHeight === undefined)
    {
        options.minHeight = $(this).outerHeight();
    }

    $(this).height(options.minHeight);

    alert(options.minHeight);

});

或者作为第三个选项，为null选项设置默认值minHeight并对其进行测试：

var defaults = {
    minHeight: null            
}, 
options = $.extend(defaults, options);

return this.each(function() {

    if(options.minHeight === null)
    {
        options.minHeight = $(this).outerHeight();
    }

    $(this).height(options.minHeight);

    alert(options.minHeight);

});

无法在回调时配置选项（jQuery插件）

1 个答案: