我尝试通过 AJAX 将一些 HTML 代码加载到 jQueryUI 对话框中。代码本身是一个列表,其中最右边的元素应该绝对定位,以便列表看起来像一个有两列的表格,但仅在某些行中。问题是 jQueryUI 插件似乎没有正确调整对话框的宽度,我认为这是由于某些 li 的绝对定位。我已经阅读了其他类似问题的一些答案,但没有一个帮助我解决这个问题。
这是我加载的代码:
<style type="text/css">
ul {list-style-type:none;margin:0px;padding:0px;}
ul ul {margin:0px;padding:0px;}
ul>li.fila {margin-bottom:5px;padding-bottom:5px;}
ul li.fila ul li
{
display:inline;
padding-left:20px;
position:relative;
margin-bottom:10px;
}
ul li.fila ul li.O
{
background:url(bullet.gif) 5px 8px no-repeat;
list-style-position:inside;
}
</style>
<ul id="raiz" >
<li class="fila">
<ul >
<li style="position:absolute;left:0px;" class="O">
<label for="col1">Col1:</label>
<input type="text" name="col1" id="col1" value="vCol1" class="text ui-widget-content ui-corner-all" />
</li>
<li style="left:250px;" class="O" >
<label for="col2">Col2:</label>
<input type="text" name="col2" id="col2" value="vCol2" class="text ui-widget-content ui-corner-all" />
</li>
</ul>
</li>
<li class="fila">
<ul >
<li>
<label for="col3">Col3:</label>
<input type="text" name="col3" id="col3" value="vCol3" class="text ui-widget-content ui-corner-all" />
</li>
</ul>
</li>
</ul>
和 Dialog 构造函数:
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true,
buttons:{
'Cancel': function() {
$(this).dialog('close');
}
},
open: function(event,ui){
$("#dialog").load("dialogCode.html");
}
});
在此先感谢您的任何建议。