第二百零三节,jQuery EasyUI,Window(窗口)组件

jQuery EasyUI,Window(窗口)组件

第二百零三节,jQuery EasyUI,Window(窗口)组件

学习要点:

  1.加载方式

  2.属性列表

  3.事件列表

  4.方法列表

本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件依赖于 Panel(面 板)组件、resizable(调整大小)和 draggable(拖动)组件。这个组件扩展与 Panel 组件, 最大的优势就是调整大小和拖动以及内部布局。

一.加载方式

class 加载方式

<div id="box" class="easyui-window" title="My Window"
style="width:600px;height:400px"
data-options="iconCls:'icon-save',modal:true">
窗口
</div>

window()让一个元素,执行窗口方法

JS 加载调用

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

二.属性列表

窗口属性扩展自 Panel(面板),窗口新增或重新定义的属性如下:

第二百零三节,jQuery EasyUI,Window(窗口)组件

第二百零三节,jQuery EasyUI,Window(窗口)组件

title   string 窗口的标题文本。默认值为“New Window”。

$(function () {
$('#box').window({
title:'窗口标题', //窗口的标题文本。默认值为“New Window”。
});
});

collapsible   boolean 定义是否显示可折叠按钮。默认值为 true。

$(function () {
$('#box').window({
title:'窗口标题', //窗口的标题文本。默认值为“New Window”。
collapsible:false //定义是否显示可折叠按钮。默认值为 true。
});
});

minimizable   boolean 定义是否显示最小化按钮。默认值为 true。

$(function () {
$('#box').window({
title:'窗口标题', //窗口的标题文本。默认值为“New Window”。
collapsible:false, //定义是否显示可折叠按钮。默认值为 true。
minimizable:false //定义是否显示最小化按钮。默认值为 true。
});
});

maximizable   boolean 定义是否显示最大化按钮。默认值为 true。

$(function () {
$('#box').window({
title:'窗口标题', //窗口的标题文本。默认值为“New Window”。
collapsible:false, //定义是否显示可折叠按钮。默认值为 true。
minimizable:false, //定义是否显示最小化按钮。默认值为 true。
maximizable:false //定义是否显示最大化按钮。默认值为 true。
});
});

closable   boolean 定义是否显示关闭按钮。默认值为 true。

$(function () {
$('#box').window({
title:'窗口标题', //窗口的标题文本。默认值为“New Window”。
collapsible:false, //定义是否显示可折叠按钮。默认值为 true。
minimizable:false, //定义是否显示最小化按钮。默认值为 true。
maximizable:false, //定义是否显示最大化按钮。默认值为 true。
closable:false //定义是否显示关闭按钮。默认值为 true。
});
});

closed   boolean 定义是否可以关闭窗口。默认值为 false。

$(function () {
$('#box').window({
title:'窗口标题', //窗口的标题文本。默认值为“New Window”。
collapsible:false, //定义是否显示可折叠按钮。默认值为 true。
minimizable:false, //定义是否显示最小化按钮。默认值为 true。
maximizable:false, //定义是否显示最大化按钮。默认值为 true。
closable:false, //定义是否显示关闭按钮。默认值为 true。
closed:true //定义是否关闭窗口。默认值为 false。
});
});

zIndex   number 窗口 Z 轴坐标。默认值为9000。也就是外层等级,设置层级关系

$(function () {
$('#box').window({
title:'窗口标题', //窗口的标题文本。默认值为“New Window”。
zIndex:99999 //窗口 Z 轴坐标。默认值为9000。也就是外层等级,设置层级关系
});
});

draggable   boolean 定义是否能够拖拽窗口。默认值为 true。

$(function () {
$('#box').window({
title:'窗口标题', //窗口的标题文本。默认值为“New Window”。
zIndex:99999, //窗口 Z 轴坐标。默认值为9000。也就是外层等级,设置层级关系
draggable:false //定义是否能够拖拽窗口。默认值为 true。
});
});

resizable   boolean 定义是否能够改变窗口大小。默认值为true。

$(function () {
$('#box').window({
title:'窗口标题', //窗口的标题文本。默认值为“New Window”。
zIndex:99999, //窗口 Z 轴坐标。默认值为9000。也就是外层等级,设置层级关系
draggable:false, //定义是否能够拖拽窗口。默认值为 true。
resizable:false //定义是否能够改变窗口大小。默认值为true。
});
});

shadow   boolean 如果设置为 true,在窗体显示的时候显示阴影。默认值为 true。

$(function () {
$('#box').window({
width: 600,
height: 400,
title:'窗口标题', //窗口的标题文本。默认值为“New Window”。
zIndex:99999, //窗口 Z 轴坐标。默认值为9000。也就是外层等级,设置层级关系
draggable:false, //定义是否能够拖拽窗口。默认值为 true。
resizable:false, //定义是否能够改变窗口大小。默认值为true。
shadow:false //如果设置为 true,在窗体显示的时候显示阴影。默认值为 true。
});
});

inline   boolean定义如何布局窗口,如果设置为 true,窗口将显示在它的父容器中,否则将显示在所有元素的上面。默认值为 false。

$(function () {
$('#box').window({
width: 400,
height: 200,
title:'窗口标题', //窗口的标题文本。默认值为“New Window”。
zIndex:99999, //窗口 Z 轴坐标。默认值为9000。也就是外层等级,设置层级关系
draggable:false, //定义是否能够拖拽窗口。默认值为 true。
resizable:false, //定义是否能够改变窗口大小。默认值为true。
shadow:false, //如果设置为 true,在窗体显示的时候显示阴影。默认值为 true。
inline:false //定义如何布局窗口,如果设置为 true,窗口将显示在它的父容器中,否则将显示在所有元素的上面。默认值为 false。
});
});

modal   boolean 定义是否将窗体显示为模式化窗口。默认值为 true。是否显示遮罩

$(function () {
$('#box').window({
width: 400,
height: 200,
title:'窗口标题', //窗口的标题文本。默认值为“New Window”。
zIndex:99999, //窗口 Z 轴坐标。默认值为9000。也就是外层等级,设置层级关系
draggable:false, //定义是否能够拖拽窗口。默认值为 true。
resizable:false, //定义是否能够改变窗口大小。默认值为true。
shadow:false, //如果设置为 true,在窗体显示的时候显示阴影。默认值为 true。
inline:false, //定义如何布局窗口,如果设置为 true,窗口将显示在它的父容器中,否则将显示在所有元素的上面。默认值为 false。
modal:true //定义是否将窗体显示为模式化窗口。默认值为 true。是否显示遮罩
});
});

还有其他属性可以用Panel(面板)的属性,因为他继承Panel(面板)

PS:以上属性是 Window 自行扩展或代替 Panel 的属性,本身 Window 就是依赖于 Panel 的。所以,上面没有涉及到的属性,请查看 Panel 的属性即可。比如:

//这里的 fit 和 iconCls 来自 Panel 属性
$('#box').window({
width : 600,
height : 400,
modal : true,
fit : true,
iconCls : 'icon-add',
});

三.事件列表

窗口的事件完整继承自 Panel(面板)。所以,直接参考 Panel 面板的事件即可。事件见Panel(面板)事件

如:

$(function () {
$('#box').window({
width: 400,
height: 200,
title: '窗口标题', //窗口的标题文本。默认值为“New Window”。
onClose: function () {
alert('关闭后触发!');
}
});
});

四.方法列表

窗口的方法扩展自 Panel(面板),窗口新增方法如下:

第二百零三节,jQuery EasyUI,Window(窗口)组件

window   none 返回外部窗口对象

$(function () {
$('#box').window({
width: 400,
height: 200,
title: '窗口标题' //窗口的标题文本。默认值为“New Window”。
});
alert($('#box').window('window')); //返回外部窗口对象
});

hcenter   none 仅水平居中窗口。当窗口位置发生改变时,将窗口重新仅水平居中窗口

$(function () {
$('#box').window({
width: 400,
height: 200,
title: '窗口标题' //窗口的标题文本。默认值为“New Window”。
});
$('#box').window('hcenter'); //仅水平居中窗口。
});
    //单击时调整位置
$(document).click(function () {
$('#box').window('move', {
left: 0,
top: 0,
});
});
//双击时恢复各种居中
$(document).dblclick(function () {
//替换成 center 或 vcenter 亦可
$('#box').window('hcenter');
});

vcenter   none 仅垂直居中窗口。当窗口位置发生改变时,将窗口重新仅垂直居中窗口

$(function () {
$('#box').window({
width: 400,
height: 200,
title: '窗口标题' //窗口的标题文本。默认值为“New Window”。
});
$('#box').window('vcenter'); //当窗口位置发生改变时,将窗口重新仅垂直居中窗口
});

center   none 将窗口绝对居中。当窗口位置发生改变时,将窗口重新绝对居中窗口

$(function () {
$('#box').window({
width: 400,
height: 200,
title: '窗口标题' //窗口的标题文本。默认值为“New Window”。
});
$('#box').window('center'); //当窗口位置发生改变时,将窗口重新绝对居中窗口
});

其他方法见Panel(面板)的方法

使用$.fn.window.defaults 重写默认值对象。见前面的

window 组件最强大的地方就是可以内部布局和添加 linkbutton。 具体布局方法如下:

1.外部用 window 组件包裹一下;

2.内部用 layout 组件左右各分配一个,底部分配一个;

3.底部添加一个按钮即可。

<div class="easyui-window" style="width:400px;height:250px;">
<div class="easyui-layout" data-options="fit:true,">
<div data-options="region:'west',split:true," style="width:100px;">左边</div>
<div data-options="region:'center'">内容</div>
<div data-options="region:'south',border:false" style="height:40px;text-align:right;padding:5px 5px 0 0">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="width:80px;">确认</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" style="width:80px;">取消</a>
</div>
</div>
</div>
上一篇:【转发】网易邮箱前端技术分享之javascript编码规范


下一篇:第二百零六节,jQuery EasyUI,Menu(菜单)组件