EasyUI Window学习总结

Custom Window Tools

http://www.jeasyui.net/demo/420.html

Custom Window Tools - jQuery EasyUI Demo

Custom Window Tools

Click the right top buttons to perform actions.

οnclick="$(’#w’).window(‘open’)">Open
<a href=“javascript:void(0)” class=“easyui-linkbutton”

οnclick="$(’#w’).window(‘close’)">Close

<div id=“w” class=“easyui-window” title=“Custom Window Tools” data-

options=“iconCls:‘icon-save’,minimizable:false,tools:’#tt’”

style=“width:500px;height:200px;padding:10px;”>
The window content.

<a href=“javascript:void(0)” class=“icon-add” οnclick="javascript:alert

(‘add’)">
<a href=“javascript:void(0)” class=“icon-edit” οnclick="javascript:alert

(‘edit’)">
<a href=“javascript:void(0)” class=“icon-cut” οnclick="javascript:alert

(‘cut’)">
<a href=“javascript:void(0)” class=“icon-help” οnclick="javascript:alert

(‘help’)">

========

Window Layout

http://www.jeasyui.net/demo/586.html

Window Layout - jQuery EasyUI Demo

Window Layout

Using layout on window.

οnclick="$(’#w’).window(‘open’)">Open
<a href=“javascript:void(0)” class=“easyui-linkbutton”

οnclick="$(’#w’).window(‘close’)">Close

<div id=“w” class=“easyui-window” title=“Window Layout” data-

options=“iconCls:‘icon-save’” style=“width:500px;height:200px;padding:5px;”>

<div data-options=“region:‘east’,split:true”

style=“width:100px”>

jQuery EasyUI framework help you build your web page

easily.

<div data-options=“region:‘south’,border:false” style="text-

align:right;padding:5px 0 0;">
<a class=“easyui-linkbutton” data-options="iconCls:'icon-

ok’" href=“javascript:void(0)” οnclick=“javascript:alert(‘ok’)” style=“width:80px”>Ok
<a class=“easyui-linkbutton” data-options="iconCls:'icon-

cancel’" href=“javascript:void(0)” οnclick=“javascript:alert(‘cancel’)”

style=“width:80px”>Cancel

========

Modal Window

http://www.jeasyui.net/demo/585.html

Modal Window - jQuery EasyUI Demo

Modal Window

Click the open button below to open the modal window.

οnclick="$(’#w’).window(‘open’)">Open
<a href=“javascript:void(0)” class=“easyui-linkbutton”

οnclick="$(’#w’).window(‘close’)">Close

<div id=“w” class=“easyui-window” title=“Modal Window” data-

options=“modal:true,closed:true,iconCls:‘icon-save’”

style=“width:500px;height:200px;padding:10px;”>
The window content.

========

EasyUI Window 窗口

http://www.jeasyui.net/plugins/180.html

扩展自 $.fn.panel.defaults。通过 $.fn.window.defaults 重写默认的 defaults。

窗口（window）是一个浮动的、可拖拽的面板，可以当做应用程序窗口使用。默认情况下，窗口可移动

、可调整尺寸、可关闭。它的内容既可以通过静态 html 定义，也可以通过 ajax 动态加载。

依赖
draggable
resizable
panel

用法
创建窗口（window）
1、从标记创建窗口（window）。

Window Content

2、使用 javascript 创建窗口（window）。

$('#win').window({ width:600, height:400, modal:true });

3、通过复合布局创建窗口（window）。

像往常一样，你可以定义窗口布局。下面的实例演示了如何分割窗口区域为两个部分：北区和中心区。

The Content.

窗口（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 起可用。

========

Easy-Ui中window窗口介绍

https://blog.csdn.net/sinat_28729797/article/details/50458622

1、继承panel面板，故具有panel一切属性

2、基本写法：

窗口

$(function(){
$(’#box’).window({
width:600,
height:400,
modal:true
})
});

效果：

3、需注意属性

draggable:false
不可以拖动
resizable:false,
可变大小
shadow:false
有阴影

4、添图标

代码：

效果：

5、事件，如关闭后触发

$(function(){
$(’#box’).window({
width:600,
height:400,
modal:true,
zIndex:1000,
draggable:false,
resizable:false,
shadow:false,
modal:true,
iconCls:‘icon-add’,
onClose:function(){
alert(‘关闭后触发！’);
}
})
});

效果：

6、事件移动，继承panel

$(document).click(function(){
$(’#box’).window(‘move’,{
left:0,
top:0,
})
});

========

easyui window点击关闭按钮，触发事件

https://blog.csdn.net/p793049488/article/details/8237143

使用easyui-window初始化一个窗口，由于窗口上方的按钮都是自动组装生成。故很难找到监听事件源（

平常做监听，都必须找到事件源）。但是easyui提供了一系列的监听方法：onClose,onBeforeColse…

的方法。

如有窗口：<div id=“win” class=“easyui-window” title=“新增互动类型” closed=“true”

style=“width:300px;height:220px;padding:5px;”>

点击关闭的x后触发事件监听：

$(document).ready(function(){

$(’#win’).window({
onBeforeClose:function(){
alert(111);
}
});

});

========

window 限制在父类窗体内

https://www.cnblogs.com/timelesszhuang/p/3685912.html

Inline Window - jQuery EasyUI Demo

Inline Window

The inline window stay inside its parent.

(‘open’)">Open
<a href=“javascript:void(0)” class=“easyui-linkbutton” οnclick="$(’#w’).window

(‘close’)">Close

<div class="easyui-panel"

style=“position:relative;width:500px;height:300px;overflow:auto;”>
<div id=“w” class=“easyui-window” data-options=“title:‘Inline Window’,inline:true”

style=“width:250px;height:150px;padding:10px”>
This window stay inside its parent

========