窗口-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');