当让 jQuery UI 对话框在选项卡 View 上弹出时，我遇到了一个问题，该选项卡 View 又包含三个 float 面板 (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 的绝对定位层。如果是这种情况，为什么尝试显示它会导致我的数据面板向下 float ？为什么那个算术 wh - 28 会阻止这种情况发生？
我非常感谢任何有关此问题的帮助。
最佳答案
发生这种情况是因为您调整了大小，而不是因为 jQuery UI，我会尽力解释为什么。
您必须记住，tabA 作为一个没有规定宽度的元素，默认情况下将占据其容器的 100%(而不是其子元素的宽度总和，这似乎是您所假设的)，因此您在尝试调整 datapanel 大小时的算术不起作用。实际上，如果您注释掉对话框调用行，您将看到 tabB 由于大小调整而中断并落入折叠中。
您可以通过定义 tabA 宽度的样式或使用这段代码来解决此问题
var whA = $('#toolpanel').outerWidth(true) + $('#proppanel').outerWidth(true) + $('#datapanel').outerWidth(true);
$('#tabA').css('width',whA + 'px');
您似乎还忽略了一个事实，即所有元素都是由 margins+border+padding+content 组成的。
所以，当你说
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});
关于jQuery UI 对话框冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11463778/