jquery easyui dialog的几个使用问题

无情 2014-09-20

jquery easyui dialog可以两种方式使用 
1)定义div,使用iframe 
<div id="openRoleDiv" class="easyui-window" closed="true" modal="true" title="标题" style="width:500px;height:350px;"> 
    <iframe scrolling="auto" id='openXXXIframe' frameborder="0"  src="" style="width:100%;height:100%;"></iframe> 
</div> 
需要显示dialog时使用以下2行即可 
$('#openXXXIframe')[0].src='xxxEdit.action'; 
$('#openRoleDiv').dialog('open'); 

2)不使用iframe(请参见easyui的demo) 
<div id="dd" style="padding:5px;width:400px;height:200px;"> 
    Dialog Content. 
</div> 
$(function(){ 
$('#dd').dialog({ 
toolbar:[{ 
text:'Add', 
iconCls:'icon-add', 
handler:function(){ 
alert('add') 

},'-',{ 
text:'Save', 
iconCls:'icon-save', 
handler:function(){ 
alert('save') 

}], 
buttons:[{ 
text:'Ok', 
iconCls:'icon-ok', 
handler:function(){ 
alert('ok'); 

},{ 
text:'Cancel', 
handler:function(){ 
$('#dd').dialog('close'); 

}] 
}); 
}); 
打开用$('#dd').dialog('open'); 

dialog方法和属性的使用 
a)setTitle修改dialog的标题$('#xxxDivId').dialog('setTitle', 'New Title'); 
查看easyui的代码发现setTitle的实际执行内容为 
$('#xxxDivId').panel('options').title = 'New Title'; 
$('#xxxDivId').panel("header").find("div.panel-title").html('New Title'); 

b)options的使用 
var tt = $('#xxxDivId').panel('options').closable; //这里是panel,不是dialog 
alert(tt);//返回该对话框是否可以关闭 

c)定位 
$('#p').panel('move',{ 
  left:100, 
  top:100 
});

相关推荐