2

jQuery UIダイアログをタブビューにポップアップ表示するときに問題が発生しました。タブビューには3つのフロートパネル（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>

もともと、私は3番目のパネルを拡張して、利用可能なクライアント領域全体を埋めていました。の線に沿った何か

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

ただし、この設定では、ダイアログを開くとすぐに、3番目のパネルである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（true）の代わりにouterWidth（）だけを使用すると、2つの内部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});
于 2012-07-13T05:04:47.363 に答える