Question

jQuery UI v1.8.17（在Ubuntu上的FF 10.0中测试）

更新：我已将我的脚本和html放在jsFiddle上：http://jsfiddle.net/JhqrX/3/

我们正在尝试将大型数据表放入固定宽度设计中，并选择最初显示表格的缩小版本，可以点击以100％查看。

我找到了jQuery UI大小效果方法，它有一个很好的效果，它还可以扩展表格内的所有内容（单元格，填充，文本/字体）。

然而，一个问题是我们必须指定新的高度和宽度（如果我们只能传递一个宽度并且它保持宽高比会很好） - 但另一个更大的问题是它不是实际上调整到指定的尺寸。

例如 - 我有一个502x60的表，并希望它适合300x36。将这个高度和宽度作为参数传递给size方法得到一个大约354x40的表。当我在后续大小请求中重置为502px时，它实际上设置为大约492px。随后的大小调整似乎在334（我想要300）和492（当我想要502）的宽度之间反弹。

$(document).ready(function() {
    /* create a selector for all tables over the width limit */
    $.expr[':'].wideTable = function(obj) {
        return $(obj).width() > 300;
    }

    /* create an array of width table dimensions */
    var wideTableWidths = [];
    $('table:wideTable').each(function() {
        wideTableWidths[$(this).attr('id')] = {
            width: $(this).width(),
            height: $(this).height(),
            ratio: $(this).height() / $(this).width(),
            scaled: false,
        };
    });

    /* set up the click event to resize the tables */
    $('table:wideTable').click(function() {
        if (wideTableWidths[$(this).attr('id')].scaled) {
            /* if the table is currently scaled, we can reset to original height and width as stored */
            $(this).effect("size", {to: {width: wideTableWidths[$(this).attr('id')].width, height: wideTableWidths[$(this).attr('id')].height} }, 0);
            wideTableWidths[$(this).attr('id')].scaled = false;
        } else {
            /* if the table requires scaling, we know we want a width of 300px and the height should be set to match the original aspect ratio */
            $(this).effect("size", {to: {width: 300, height: 300 * wideTableWidths[$(this).attr('id')].ratio} }, 0);
            wideTableWidths[$(this).attr('id')].scaled = true;
        }
    });

    /* initialise the page so that all wide tables are scaled to fit */
    $('table:wideTable').click();
});

Answer 1

回顾你提供的jsFiddle，我找到了问题的解决方案。

初始比率计算未考虑padding的{{1}}和border值。您需要从table td和height。

中减去这些内容

此updated jsFiddle演示了解决方案。

希望有所帮助。

Answer 2

我不确定这是否相关，但您的doc类型是什么？我有高度/宽度计算问题，没有用jqueryui定义的doctype。如果您还没有<!DOCTYPE html>，请尝试{{1}}。

Answer 3

我注意到您未在scale来电中设置.effect参数。

scale的默认值为both，这意味着调整大小会影响边框和填充值。

在获取原始高度和宽度值时，您已使用：

width: $(this).width()
height: $(this).height()

返回元素的内容宽度（即不包括边框，填充或边距）。

您可以尝试使用包含边框和填充的.outerWidth()和.outerHeight()方法，或在调用scale: 'content'方法时指定.effect。例如：

$(this).effect("size", {to: {width: 300, height: 300 * wideTableWidths[$(this).attr('id')].ratio, scale: 'content'} }, 0);

jQuery ui size效果没有调整到指定的宽度/高度

3 个答案: