Question

当让jQuery UI对话框弹出选项卡视图时，我遇到了一个问题，而该选项卡视图又包含三个浮动面板（div）。代码就是这样的

<body>
<div id='dialog'>My Dialog</div>
<div id='mytabs'>
<ul><li><a href='#tabA'>Tab A</a></li><li><a href='#tabB'>Tab B</a></li></ul>
<div id='tabA'>
<div id='toolpanel' style='float:left;width:40px'>Content</div>
<div id='proppanel' style='float:left;width:200px'>Content</div>
<div id='datapanel' style='float:left;clear:right;width:100px'>Content</div>
</div>
<div id='tabB'>...</div>
</div>
</body>

最初，我正在扩展第三个面板以填充整个可用的客户区域。

的一些方面

var wh = $('#tabA').width() - $('#toolpanel').outerWidth() - $('#proppanel').outerWidth();
$('#datapanel').css('width',wh + 'px');
$('#dialog').dialog({modal:true});

然而，通过这种设置，我发现第一个面板datapanel在我打开对话框后立即浮动到其兄弟姐妹的下方。我暂时放了一个阻止这个

的黑客攻击

$('#datapanel').css('width',wh - 28 + 'px');

基本上，防止数据通道在放置其兄弟姐妹后占用剩下的全部空间。

我不明白。我认为jQuery UI对话框进入绝对定位的图层，默认的zIndex为1000.如果是这种情况，为什么要尝试显示它会导致我的数据通道浮动？为什么那个算术运算会阻止这种情况发生呢？

我非常感谢你对这个有任何帮助。

Answer 1

这是因为您调整大小，而不是因为jQuery UI，我会尽力解释为什么我能做到最好。

你必须记住tabA，作为没有规定宽度的元素，默认情况下会占据其容器的100％（而不是其子容的宽度之和，这就是你似乎已经假设了），因此在尝试调整datapanel时你的算法不起作用。实际上，如果你注释掉对话框调用行，你会看到tabB由于调整大小而中断并且属于折叠。

您可以通过为tabA的宽度定义样式或使用此代码

来解决此问题

var whA = $('#toolpanel').outerWidth(true) + $('#proppanel').outerWidth(true) + $('#datapanel').outerWidth(true);

$('#tabA').css('width',whA + 'px');

您似乎也忽略了所有元素都由边距+边框+填充+内容组成的事实。

所以，当你说

时

var wh = $('#tabA').width() - $('#toolpanel').outerWidth() - $('#proppanel').outerWidth();

首先，通过使用outerWidth（）而不是outerWidth（true），您忽略了两个内部div的边距。

然后在：

 $('#datapanel').css('width',wh + 'px');

您将数据通道的宽度[仅与内容相关]设置为wh，但根据您在wh中计算的内容，您应该设置的是整个div的宽度[包括边距] ，边框和填充]。

所以，减去

$('#datapanel').outerWidth(true)-$('#datapanel').width()  //margins+border+padding of datapanel

<{>>在wh中，您可以获得所需的宽度。

总之，这是一个应该适合您的代码片段：

var whA = $('#toolpanel').outerWidth(true) + $('#proppanel').outerWidth(true) + $('#datapanel').outerWidth(true);

$('#tabA').css('width',whA + 'px');

var wh = $('#tabA').width() - $('#toolpanel').outerWidth(true) - $('#proppanel').outerWidth(true)-$('#datapanel').outerWidth(true)+$('#datapanel').width();


$('#datapanel').css('width',wh + 'px');
$('#dialog').dialog({modal:true});

jQuery UI对话框冲突

1 个答案: