1、该组件依赖于linkButton及window组件
2、基本功能实现,两种方式,
一种是直接写
<div id="box" class="easyui-dialog" style="width:500px;height:250px;">
对话框
</div>
第二种是js形式
<div id="box">对话框</div>
js文件中为(下同):
$(function(){
$('#box').dialog({
width:300,
height:300,
});
});
效果均为如下:
属性为:
3、加入标题
$(function(){
$('#box').dialog({
width:400,
height:300,
title:'对话框'
});
});
效果如下:
4、按钮组
按钮组两种方式
第一种:取得div形式
<div id="box">对话框</div>
<div id="tt">
<a href="###" class="easyui-linkbutton" iconCls="icon-edit">编辑</a>
</div>
$(function(){
$('#box').dialog({
width:400,
height:300,
title:'对话框',
toolbar:'#tt',
});
});
第二种数组形式
$(function(){
$('#box').dialog({
width:400,
height:300,
title:'对话框',
toolbar:[{
text:'编辑',
iconCls:'icon-edit',
handler:function(){
alert('编辑')
}
},{}],
modal:true
});
});
效果均为
第二种handler里,触发事件后,效果为
5、button类似
buttons:[{
text:'确定',
iconCls:'icon-ok',
},{
text:'取消',
iconCls:'icon-cancel',
}]