jQuery ui大小效果未调整为指定的宽度/高度

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，我找到了解决问题的方法。

初始比率计算未考虑table td的padding和border值。 您需要从height和width减去它们。

此更新的jsFiddle演示了解决方案。

希望能有所帮助。

Answer 2

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

Answer 3

我注意到您尚未在.effect调用中设置scale参数。

scale的默认值是both ，这意味着调整大小会同时影响border和padding值。

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

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

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

您可以尝试使用.outerWidth()和.outerHeight()方法（包括边框和内边距），或在调用.effect方法时指定scale: 'content' 。 例如：

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

jQuery ui大小效果未调整为指定的宽度/高度

问题描述

3 个解决方案

解决方案1
1 已采纳 2012-02-07 03:00:12

解决方案2
0 2012-02-07 01:10:21

解决方案3
0 2012-02-07 01:11:24

jQuery ui大小效果未调整为指定的宽度/高度

问题描述

3 个解决方案

解决方案1 1 已采纳 2012-02-07 03:00:12

解决方案2 0 2012-02-07 01:10:21

解决方案3 0 2012-02-07 01:11:24

解决方案1
1 已采纳 2012-02-07 03:00:12

解决方案2
0 2012-02-07 01:10:21

解决方案3
0 2012-02-07 01:11:24