easyUI 创建Dialog对话框

@author YHC

dialog是一个特殊的window,可以包含工具栏在顶部和按钮在下面,但是默认的dialog不能改变大小,但是用户可以设置resizable 属性为true使其可以改变大小.

查看 Demo

创建 Dialog

dialog非常简单,可以从DIV 创建,就像这样:

<div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;"  
        title="My Dialog" iconCls="icon-ok"  
        toolbar="#dlg-toolbar" buttons="#dlg-buttons">  
    Dialog Content.  
</div>  

准备工具栏和按钮

<div id="dlg-toolbar">  
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>  
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>  
</div>  
<div id="dlg-buttons">  
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:alert('Ok')">Ok</a>  
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Cancel</a>  
</div>  

以上代码我们创建了一个dialog 和工具栏以及按钮,这是标准配置dialog, toolbar, content 和buttons.

下载 EasyUI 示例代码:

easyui-dialog-demo.zip