2

当让 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 的绝对定位层。如果是这种情况，为什么要尝试显示它会导致我的数据面板向下浮动？为什么那一点算术，wh - 28，阻止这种情况发生？

我非常感谢您对此提供的任何帮助。

4

1 回答 1

2

发生这种情况是因为您调整了大小，而不是因为 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');

您正在将 datapanel 的宽度 [仅与内容相关] 设置为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});
于 2012-07-13T05:04:47.363 回答