jQuery UI对话冲突

我得到的jQuery UI对话框弹出一个选项卡视图，其中又包含三个浮动面板（div）时遇到问题。代码是这样的jQuery UI对话冲突

<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');

从本质上讲，防止dataPanel上采取了把它的兄弟姐妹后剩下的全部空间。

我不明白。我认为jQuery UI对话框会进入一个绝对定位的图层，其默认zIndex为1000.如果是这种情况，为什么应该试图显示它导致我的数据面板下浮？为什么这一点算术，28岁，停止发生？

我非常感谢任何帮助。

来源

2012-07-13 DroidOS

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

你必须记住，tabA作为一个没有规定宽度的元素，在默认情况下将占用其容器的100％（而不是它的子元素的宽度总和，这就是你所看到的已经假设），并且因此您尝试调整datapanel时的算术不起作用。实际上，如果你注释掉对话框调用行，你会发现tabB由于调整大小而折断并落入对方。

您可以通过定义塔巴的宽度的风格无论是解决这个问题，或者使用这段代码

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（真）你是忽略的两个内部div的边缘。

如果是：

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

您的dataPanel上的宽度[刚刚涉及内容]设置为wh，但根据已在WH计算什么，你应该设置是在整个宽度的div [包括边距，边框和填充]。

所以，在wh减去

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

获取所需要的宽度。

总之，这里的代码段应该为你工作：

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-13 05:04:47 ryuusenshi

不知道为什么，我，当我读到它并没有接受这个答案。一定会下滑我的脑海： - / – DroidOS 2012-10-24 15:38:30

jQuery UI对话冲突

回答

相关问题