第十三章:Window(窗口)组件
学习要点:
- 加载方式
- 属性列表
- 事件列表
- 方法列表
一、加载方式:
1.class加载方式:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div class="easyui-window" data-option="model:true">
</div>
</body>
</html>
2.JS调用:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="box">
窗口
</div>
</body>
</html>
$(function(){
$('#box').window({
});
});
二、属性列表:
窗口属性扩展自Panel(面板),窗口新增或重新定义的属性如下:
Window属性 | ||
---|---|---|
属性名 | 值 | 说明 |
title | string | 窗口的标题文本。默认值为"New Window"。 |
collapsible | boolean | 定义是否显示可折叠按钮。默认值为:true。 |
minimizable | boolean | 定义是否显示最小化按钮。默认值为:true。 |
maximizable | boolean | 定义是否显示最大化按钮。默认值为:true。 |
closable | boolean | 定义是否显示关闭按钮。默认值为:true。 |
closed | boolean | 定义是否可以关闭窗口。默认值为:false。 |
zIndex | number | 窗口Z轴坐标。默认值为9000。 |
draggable | boolean | 定义是否能够拖拽窗口。默认值为true。 |
resizable | boolean | 定义是否能够改变窗口大小,默认值为true。 |
shadow | boolean | 如果设置为true,在窗体显示的时候显示阴影。默认值为:true。 |
inline | boolean | 定义如何布局窗口,如果设置为true,窗口将显示在他的父容器中,否则将显示在所有元素的上面。默认值为false。 |
modal | boolean | 定义是否将窗口显示为模式化窗口。默认值为true。 |
ps:以上属性是Window自行扩展或者代替Panel的属性,本身Window就是依赖于Panel的。所以,上面没有涉及到的属性,请查看Panel的属性即可。例如:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div style="position:relative;overflow:hidden;width:600px;height:400px;border:1px solid #ccc">
<div id="box">
窗口
</div>
</div>
</body>
</html>
$(function(){
$('#box').window({
width:500,
height:400,
//iconCls:'icon-add',
//fit:true,
/*
width:500,
height:400,
title:'窗口',
collapsible:false,
minimizable:false,
maxinizable:false,
closable:false,
closed:true,
zIndex:9999,
darggable:false,
resizable:false,
shadow:false,
modal:true,
inline:true,
width:200,
height:150,
inline:true,
*/
});
});
三、事件列表:
窗口的事件完整继承自Panel(面板)。所以,直接参考Panel面板的事件即可。
Window事件 | ||
---|---|---|
事件名 | 传参 | 说明 |
onBeforeLoad | none | 在加载远程数据之前触发。 |
onLoad | none | 在加载远程数据时触发。 |
onBeforeOpen | none | 在打开面板之前触发,返回false可以打开操作。 |
onOpen | none | 在打开面板之后触发。 |
onBeforeClose | none | 在关闭面板之前触发,返回false可以取消关闭操作。 |
onClose | none | 在面板关闭之后触发。 |
onbeforeDestroy | none | 在面板销毁之前触发,返回false可以取消销毁操作。 |
onDestroy | none | 在面板销毁之后触发。 |
onBeforeCollapse | none | 在面板折叠之前触发,返回false可以终止折叠操作。 |
onCollapse | none | 在面板折叠之后触发。 |
onBeforeExpand | none | 在面板展开之前触发,返回false可以终止展开操作。 |
onExpand | none | 在面板展开之后触发。 |
onResize | width,height | 在面板改变大小之后触发,width:新的宽度,height:新的高度 |
onMove | left,top | 在面板移动之后触发。left:新的左边距位置,top:新的上边距位置 |
onMaximize | none | 在窗口最大化之后触发。 |
onRestore | none | 在窗口恢复到原始大小以后触发 |
onMinimize | none | 在窗口最小化之后触发。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div style="position:relative;overflow:hidden;width:600px;height:400px;border:1px solid #ccc">
<div id="box">
窗口
</div>
</div>
</body>
</html>
$(function(){
$('#box').window({
width:500,
height:400,
fit:true,
onClose:function(){
alert("关闭之后触发!");
}
});
});
四、方法列表:
窗口的方法扩展自Panel(面板),窗口新增方法如下:
Window方法 | ||
---|---|---|
方法名 | 参数 | 说明 |
Window | none | 返回外部端口对象 |
hcenter | none | 仅水平居中窗口 |
vcenter | none | 仅垂直居中窗口 |
center | none | 将窗口绝对居中 |
使用$.fn.widow.defaults重写默认值对象
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div style="position:relative;overflow:hidden;width:600px;height:400px;border:1px solid #ccc">
<div id="box">
窗口
</div>
</div>
</body>
</html>
$(function(){
$('#box').window({
width:500,
height:400,
});
//console.log($('#box').window('window'));
//console.log($('#box').window('body'));
$(decument).click(fucntion(){
$('#box').window(move,{
left:0,
top:0,
});
});
$(decument).dblclick(fucntion(){
$('#box').window('center');
//$('#box').window('hcenter');
//$('#box').window('vcenter');
});
});
Window组件最强大的地方就是内部布局和添加linkbutton。
具体布局方法如下:
- 外部用window组件包裹一下。
- 内部用layout组件左右各分配一个,底部分配一个。
- 底部添加一个按钮即可。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div class="easy-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-option="region:'south',border:false" style="width:40px;text-align:right;padding:5px 5px 0 0">下边</div>
<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>
</body>
</html>
作者:Roger_CoderLife
链接:https://blog.csdn.net/Roger_CoderLife/article/details/102928944
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档,转载请注明原文出处,欢迎转载