EasyUi之dialog对话框

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',

}]