ダイアログのコンテンツを動的に変更しようとしていますが、コンテンツに変更するとレイアウトが変更されます。
基本的に、jquery-ui デモから取った ... の内容を変更したい
- ...
ここに私のHTML
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<br />
<ul id="suggestions0">
<li id="suggestion0-0" class="suggestion">BLO</li>
<li id="suggestion0-1" class="suggestion">BLU</li>
<li id="suggestion0-2" class="suggestion">BLL</li>
<li id="suggestion0-3" class="suggestion">BOO</li>
<li id="suggestion0-4" class="suggestion">CLA</li>
</ul>
<div id="footer">
<span id="manual-0" class="manual">MANUAL</span><span id="next-0" class="next">Next</span>
</div>
<br />
</div>
それが、表示したいプラン ダイアログです。
2 つのボタンがあります。[OK] をクリックすると、現在のダイアログが変更されずに表示されます。重要な部分は、「li」要素が 2 行にあることです。
お気に入り
BLO BLU BLL BOO CLA XXX ....
しかし、コンテンツを動的に変更すると、「li」要素が2行ではなく1行に整列するようになりました。
私は何が間違っていたのかを理解しようとしています。
ここにクリック用の HTML
<body>
<?prettify lang=java linenums=false?>
<pre class='prettyprint' >
<code>
<span class="highlightOK" id="highlight-0">OK</span>***********************<span class="highlightNOTOK" id="highlight-1">NOT OK</span>
</body>
$('span.highlightOK').click(function() {
setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);;
});
$('span.highlightNOTOK').click(function() {
$("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li><li id='test0-2' class='suggestion'>BLO</li><li id='test0-3' class='suggestion'>BLO</li><li id='test0-4' class='suggestion'>BLO</li><li id='test0-5' class='suggestion'>BLO</li><li id='test0-6' class='suggestion'>BLO</li>");
setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);;
});
ここにライブデモがあります http://jsfiddle.net/survivant/cyFxp/