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對話衝突

回答

相關問題