1

我正在尝试创建一个可自定义的 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/

4

1 回答 1

1

更新我刚刚意识到您正在将元素设置为其当前高度，这似乎没有多大意义，但是我不能 100% 确定您的意图，所以我只将最后两个示例更新为仅在设置minHeight选项的情况下设置高度。

另一个更新好的，我想我明白了，您还希望将选项设置为当前高度，以防用户未设置该选项。我再次更新了示例。

检查是否设置了该选项，如果是这种情况，请在元素高度上使用它。您可以简单地使用||运算符：

return this.each(function() {

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

    alert(options.minHeight);

});

minHeight将包含minHeight选项值，以防它被设置而不是0，否则元素高度。如果您也想接受0as 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);

});
于 2013-07-03T13:15:32.643 回答