我试图动态更改对话框的内容,但是当我更改内容时,布局改变了。
基本上,我有…我从jquery-ui演示和想要改变
- 的内容…
here my 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>
这就是我要展示的计划对话框。
我有两个按钮,如果我们点击确定,它只会显示当前的对话框没有修改,重要的是"li"元素在两行
BLO BLU blll BOOCLA XXX ....
但是当我动态更改内容时,"li"元素变成了一行而不是两行。
我想找出我做错了什么。
这里是点击
的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/
在动态html中添加li元素之间的换行符似乎解决了这个问题
$("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li>n<li id='test0-2' class='suggestion'>BLO</li>n<li id='test0-3' class='suggestion'>BLO</li>n<li id='test0-4' class='suggestion'>BLO</li>n<li id='test0-5' class='suggestion'>BLO</li>n<li id='test0-6' class='suggestion'>BLO</li>");
http://jsfiddle.net/Qjbb3/