http://www.cnblogs.com/libingql/archive/2011/09/27/2193690.html
<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> |
或
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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、工具栏、按钮栏
代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<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)的相同。
相关推荐
jQuery EasyUI 是一个基于 jQuery 的前端框架，它封装了一系列的 jQuery 插件，为开发者提供了构建用户界面的简便方法。这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件...
在初试 Jquery EasyUI 的 Demo 中，你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码，可以运行...
jQuery EasyUI 的核心在于其组件系统，这些组件包括但不限于数据网格（datagrid）、下拉菜单（combobox）、对话框（dialog）、表单（form）、布局（layout）、菜单（menu）、面板（panel）、进度条（progressbar）、...
**jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作，使得...
- **EasyUI 组件**: EasyUI 将jQuery的功能进一步扩展，提供了如`datagrid`（数据网格）、`panel`（面板）、`dialog`（对话框）等丰富的UI组件。 2. **组件的使用**： - **初始化组件**: 使用`$(selector)....
在使用jQuery EasyUI框架开发Web前端时，Dialog组件是经常会用到的一个功能模块。Dialog组件用于创建弹出对话框，它可以帮助开发者实现页面内容的模态展示，操作的临时中断，或者用户信息的录入等。但是，有时候在...
2. **组件详解**：jQuery EasyUI 提供了许多组件，如 `datagrid`（数据网格）、`dialog`（对话框）、`menu`（菜单）、`tabs`（选项卡）、`tree`（树形结构）和`form`（表单）。每个组件都有详细的配置选项、方法和...
在这个"ssm+jqueryeasyui案例"中，我们可以学习如何将这三者结合，构建出功能完善的Web应用。首先，我们需要在项目中引入SSM框架的相关依赖，包括Spring的核心库、SpringMVC的Servlet容器配置以及MyBatis的数据库...
1. **组件库**：jQuery EasyUI 提供了多种UI组件，如对话框（Dialog）、表单（Form）、表格（Grid）、树形视图（Tree）、下拉菜单（Menu）等。这些组件都有完整的API和丰富的样式，可以满足开发各种类型Web应用的...
EasyUI 是基于 jQuery 的一组 UI 组件，它为开发者提供了诸如表格（datagrid）、下拉菜单（combobox）、树形控件（tree）、对话框（dialog）等常见的网页元素。这些组件不仅具有丰富的样式，还内置了大量的功能，如...
根据提供的文件信息，本文将详细解释与“jQuery EasyUI”相关的知识，特别是“EasyLoader”组件的使用方法及其在实际项目中的应用场景。 ### jQuery EasyUI简介 jQuery EasyUI 是一个基于 jQuery 的用户界面插件...
jQuery EasyUI提供了许多预定义的组件，如面板（Panel）、表单（Form）、菜单（Menu）、对话框（Dialog）等，这些在实际开发中都极其常见。讲义将逐步解释如何配置和使用这些组件，使你可以轻松地构建出复杂的页面...
1. **组件使用**：首先，你需要熟悉jQuery EasyUI的各种组件，例如`datagrid`用于展示数据表格，`form`处理用户输入，`dialog`创建弹窗对话框，`menu`构建导航菜单等。理解这些组件的API和配置选项，是构建界面的...
本教程“jQueryEasyUI从零开始学源码part1”旨在帮助初学者深入理解jQuery EasyUI的工作原理，通过源码分析来提升开发技能。 首先，我们需要了解jQuery EasyUI的基础概念。jQuery是一个轻量级的JavaScript库，简化...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，用于快速构建用户界面。1.4.2 版本是这个框架的一个稳定版本，包含了许多改进和修复，以提升开发者的体验和应用程序的性能。这个压缩包...
jQuery EasyUI 1.0.5改进了dialog组件，目前dialog组件可以从标记中读取collapsible,minimizable,maximizable和 resizable属性 5. jQuery EasyUI 1.0.5新增了一个校验器插件，用于检测用户的输入的合法性
### jQuery EasyUI视频教程知识点概览 #### 一、jQuery EasyUI简介 - **定义**：jQuery EasyUI是一种简化Web开发的工具集，它通过整合jQuery框架与一系列UI组件，帮助开发者快速创建出功能丰富且视觉效果良好的用户...
1. **基本组件**：jQuery EasyUI的基础包括如`dialog`（对话框）、`panel`（面板）、`window`（窗口）和`layout`（布局）。这些组件可以帮助开发者创建出各种常见的页面结构，比如用于显示信息的弹窗、可自定义布局...
1. **对话框(Dialog)**：jQuery EasyUI 提供了对话框组件，可以用于弹出提示信息、显示详情页面或进行确认操作。通过`.dialog()`方法，你可以轻松创建、打开和关闭对话框，还可以设置其大小、位置和可拖动性。 2. *...