本文介绍了EasyUI中的Window、Dialog及Messager组件的使用方法与属性配置，包括如何创建、操作这些组件以及通过Ajax加载内容等高级特性。
EasyUI Window 窗口
扩展自 $.fn.panel.defaults。通过 $.fn.window.defaults 重写默认的 defaults。
窗口（window）是一个浮动的、可拖拽的面板，可以当做应用程序窗口使用。默认情况下，窗口可移动、可调整尺寸、可关闭。它的内容既可以通过静态 html 定义，也可以通过 ajax 动态加载。
依赖
- draggable
- resizable
- panel
用法
创建窗口（window）
1、从标记创建窗口（window）。
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> Window Content </div>
2、使用 javascript 创建窗口（window）。
<div id="win"></div>
$('#win').window({
width:600,
height:400,
modal:true
});
3、通过复合布局创建窗口（window）。
像往常一样，你可以定义窗口布局。下面的实例演示了如何分割窗口区域为两个部分：北区和中心区。
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',split:true" style="height:100px"></div> <div data-options="region:'center'"> The Content. </div> </div> </div>
窗口（window）动作
打开和关闭窗口（window）。
$('#win').window('open'); // open a window
$('#win').window('close'); // close a window
通过 ajax 加载窗口内容。
$('#win').window('refresh', 'get_content.php');
属性
该属性扩展自面板（panel），下面是为窗口（window）重写和添加的属性。
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| title | string | 窗口的标题文本。 | New Window |
| collapsible | boolean | 定义是否显示折叠按钮。 | true |
| minimizable | boolean | 定义是否显示最小化按钮。 | true |
| maximizable | boolean | 定义是否显示最大化按钮。 | true |
| closable | boolean | 定义是否显示关闭按钮。 | true |
| closed | boolean | 定义是否关闭窗口。 | false |
| zIndex | number | 从其开始增加的窗口的 z-index。 | 9000 |
| draggable | boolean | 定义窗口是否可拖拽。 | true |
| resizable | boolean | 定义窗口是否可调整尺寸。 | true |
| shadow | boolean | 如果设置为 true，当窗口能够显示阴影的时候将会显示阴影。 | true |
| inline | boolean | 定义如何放置窗口，当设置为 true 时则放在它的父容器里，当设置为 false 时则浮在所有元素的顶部。 | false |
| modal | boolean | 定义窗口是不是模态（modal）窗口。 | true |
事件
该事件扩展自面板（panel）。
方法
该方法扩展自面板（panel），下面是为窗口（window）添加的方法。
| 名称 | 参数 | 描述 |
|---|---|---|
| window | none | 返回外部窗口（window）对象。 |
| hcenter | none | 水平居中窗口。该方法自版本 1.3.1 起可用。 |
| vcenter | none | 垂直居中窗口。该方法自版本 1.3.1 起可用。 |
| center | none | 居中窗口。该方法自版本 1.3.1 起可用。 |
EasyUI Dialog 对话框
扩展自 $.fn.window.defaults。通过 $.fn.dialog.defaults 重写默认的 defaults。
对话框（dialog）是一个特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。默认情况下，对话框（dialog）只有一个显示在头部右侧的关闭工具。用户可以配置对话框行为来显示其他工具（比如：可折叠 collapsible、可最小化 minimizable、可最大化 maximizable，等等）。
依赖
- window
- linkbutton
用法
通过标记从已有的 DOM 节点创建对话框（dialog）。下面的实例演示了一个带有可调整尺寸特性的模态对话框。
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true"> Dialog Content. </div>
使用 javascript 创建对话框（dialog）。现在让我们创建一个模态对话框，然后调用 'refresh' 方法来通过 ajax 加载它的内容。
<div id="dd">Dialog Content.</div>
$('#dd').dialog({
title: 'My Dialog',
width: 400,
height: 200,
closed: false,
cache: false,
href: 'get_content.php',
modal: true
});
$('#dd').dialog('refresh', 'new_content.php');
属性
该属性扩展自窗口（window）下面是为对话框（dialog）重写的属性。
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| title | string | 对话框的标题文本。 | New Dialog |
| collapsible | boolean | 定义是否显示折叠按钮。 | false |
| minimizable | boolean | 定义是否显示最小化按钮。 | false |
| maximizable | boolean | 定义是否显示最大化按钮。 | false |
| resizable | boolean | 定义对话框是否可调整尺寸。 | false |
| toolbar | array,selector | 对话框的顶部工具栏，可能的值： 1、数组，每个工具的选项都与链接按钮（linkbutton）一样。 2、选择器，指示工具栏。 对话框工具栏可以在 <div>标签中声明：
| null |
| buttons | array,selector | 对话框的底部按钮，可能的值： 1、数组，每个按钮的选项都与链接按钮（linkbutton）一样。 2、选择器，指示按钮栏。 按钮可以在 <div>标签中声明：
| null |
事件
该事件扩展自面板（panel）。
方法
该方法扩展自窗口（window），下面是为对话框（dialog）添加的方法。
| 名称 | 参数 | 描述 |
|---|---|---|
| dialog | none | 返回外部对话框（dialog）对象。 |
EasyUI Messager 消息框
通过 $.messager.defaults 重写默认的 defaults。
消息框（messager）提供不同样式的消息框，包括警示（alert）、确认（confirm）、提示（prompt）、进展（progress）等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。
依赖
- window
- linkbutton
- progressbar
用法
$.messager.alert('Warning','The warning message');
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
if (r){
alert('ok');
}
});
属性
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| ok | string | 确定按钮的文本。 | Ok |
| cancel | string | 取消按钮的文本。 | Cancel |
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| $.messager.show | options | 在屏幕的右下角显示一个消息窗口，options 参数是一个配置对象： showType： 定义消息窗口如何显示。可用的值是：null、slide、fade、show。默认是 slide。 showSpeed： 定义消息窗口完成显示所需的以毫秒为单位的时间。默认是 600。 width：定义消息窗口的宽度。默认是 250。 height：定义消息窗口的高度。默认是 100。 title：头部面板上显示的标题文本。 msg：要显示的消息文本。 style：定义消息窗口的自定义样式。 timeout：如果定义为 0，除非用户关闭，消息窗口将不会关闭。如果定义为非 0 值，消息窗口将在超时后自动关闭。默认是 4 秒。 代码实例： $.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
// show message window on top center
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show',
style:{
right:'',
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
});
|
| $.messager.alert | title, msg, icon, fn | 显示一个警告提示窗口。参数： title：显示在头部面板上的标题文本。 msg：要显示的消息文本。 icon：要显示的图标图片。可用的值是：error、question、info、warning。 fn：当窗口关闭时触发的回调函数。 代码实例： $.messager.alert('My Title','Here is a info message!','info');
|
| $.messager.confirm | title, msg, fn | 显示一个带"确定"和"取消"按钮的确认消息窗口。参数： title：显示在头部面板上的标题文本。 msg：要显示的消息文本。 fn(b)：回调函数，当用户点击确认按钮时传递一个 true 参数给函数，否则给它传递一个 false 参数。 代码实例： $.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){
if (r){
// exit action;
}
});
|
| $.messager.prompt | title, msg, fn | 显示一个带"确定"和"取消"按钮的消息窗口，提示用户输入一些文本。参数： title：显示在头部面板上的标题文本。 msg：要显示的消息文本。 fn(val)：带有用户输入的数值参数的回调函数。 代码实例： $.messager.prompt('Prompt', 'Please enter your name:', function(r){
if (r){
alert('Your name is:' + r);
}
});
|
| $.messager.progress | options or method | 显示一个进度的消息窗口。 options 定义如下： title：显示在头部面板上的标题文本，默认值是 '' 。 msg：消息框的主体文本，默认值是 '' 。 text：显示在进度条里的文本，默认值是 undefined 。 interval：每次进度更新之间以毫秒为单位的时间长度。默认值是 300。 方法定义如下： bar：获取进度条（progressbar）对象。 close：关闭进度窗口。 代码实例： 显示进度消息窗口。 $.messager.progress();现在关闭消息窗口。 $.messager.progress('close');
|
扫一扫
2899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
