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