窗口-EasyUI Window 窗口、EasyUI Dialog 对话框、EasyUI Messager 消息框

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>标签中声明：
  1. <div class="easyui-dialog" style="width:600px;height:300px"
  2. data-options="title:'My Dialog',toolbar:'#tb',modal:true">
  3. Dialog Content.
  4. </div>
  5. <div id="tb">
  6. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
  7. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
  8. </div>
对话框工具栏也可以通过数组定义：
  1. <div class="easyui-dialog" style="width:600px;height:300px"
  2. data-options="title:'My Dialog',modal:true,
  3. toolbar:[{
  4. text:'Edit',
  5. iconCls:'icon-edit',
  6. handler:function(){alert('edit')}
  7. },{
  8. text:'Help',
  9. iconCls:'icon-help',
  10. handler:function(){alert('help')}
  11. }]">
  12. Dialog Content.
  13. </div>
 null
buttons array,selector 对话框的底部按钮，可能的值：
1、数组，每个按钮的选项都与链接按钮（linkbutton）一样。
2、选择器，指示按钮栏。

按钮可以在 <div>标签中声明：
  1. <div class="easyui-dialog" style="width:600px;height:300px"
  2. data-options="title:'My Dialog',buttons:'#bb',modal:true">
  3. Dialog Content.
  4. </div>
  5. <div id="bb">
  6. <a href="#" class="easyui-linkbutton">Save</a>
  7. <a href="#" class="easyui-linkbutton">Close</a>
  8. </div>
按钮也可以通过数组定义：
  1. <div class="easyui-dialog" style="width:600px;height:300px"
  2. data-options="title:'My Dialog',modal:true,
  3. buttons:[{
  4. text:'Save',
  5. handler:function(){...}
  6. },{
  7. text:'Close',
  8. handler:function(){...}
  9. }]">
  10. Dialog Content.
  11. </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');
posted @ 2017-07-04 10:54  jiangxiaobo  阅读(1200)  评论(0)  编辑  收藏  举报