1、基本使用
代碼：
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Dialog</title> <link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#dlg').dialog({ title: '對話框', iconCls: "icon-edit", collapsible: true, minimizable: true, maximizable: true, resizable: true, width: 300, height: 200, modal: true }); }); </script> </head> <body> <div id="dlg"> Content </div> </body> </html>
或
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Dialog</title> <link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script> </head> <body> <div id="dlg" class="easyui-dialog" style="width:300px; height:200px;" title="對話框" iconCls="icon-edit"> Content </div> </body> </html>
效果圖：
2、工具欄、按鈕欄
代碼：
<script type="text/javascript"> $(function () { $('#dlg').dialog({ title: '對話框', iconCls:"icon-edit", collapsible: true, minimizable: true, maximizable: true, resizable: true, width: 300, height: 200, modal: true, href: "Content.aspx", onClose: function () { alert("Close"); }, 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', iconCls: 'icon-cancel', handler: function () { $('#dlg').dialog('close'); } }] }); }); </script>
效果圖：
3、參數
| 屬性名 |
類型 |
描述 |
默認值 |
| title |
字符串 |
對話框的標題文本 |
New Dialog |
| collapsible |
布爾 |
定義是否顯示可折疊按鈕 |
false |
| minimizable |
布爾 |
定義是否顯示最小化按鈕 |
false |
| maximizable |
布爾 |
定義是否顯示最大化按鈕 |
false |
| resizable |
布爾 |
定義對話框是否可編輯大小 |
false |
| toolbar |
數組 |
對話框上的工具條，每個工具條包括: |
text, iconCls, disabled, handler etc. null |
| buttons |
數組 |
對話框底部的按鈕，每個按鈕包括: |
text, iconCls, handler etc. null |
4、事件
Dialog的事件和窗口(Window)的事件相同。
5、方法
Dialog的函數方法和窗口(Window)的相同。