jQuery-EasyUI学习（十三）Window（窗口）

最新推荐文章于 2023-05-18 11:07:06 发布

quge_name_harder

最新推荐文章于 2023-05-18 11:07:06 发布

阅读量309

点赞数

CC 4.0 BY-SA版权

分类专栏： easyUi

本文链接：https://blog.youkuaiyun.com/quge_name_harder/article/details/84557252

easyUi 专栏收录该内容

16 篇文章

订阅专栏

一、Window（窗口）

窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

二、例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Window（窗口）</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  <body>
	
	<input type="button" value="打开窗口1" id="open1"/>
	<input type="button" value="关闭窗口1" id="close1"/>
	
	<div style="margin:600px"></div>
		
	<div id="window1"></div>
		
	<script type="text/javascript">
		//定位打开窗口1按钮，同时添加单击事件
		$("#open1").click(function(){
			//打开窗口1
			$("#window1").window({
				title : "窗口1",
				width : 840,
				height : 150,
				left : 200,
				top : 100,
				minimizable : false,
				maximizable : false,
				collapsible : false,
				closable : false,
				draggable : false,
				resizable : true,
				href : "/js-day06/empList.jsp"
			});
		});
	</script>
	
	<script type="text/javascript">
		//定位关闭窗口1按钮，同时添加单击事件
		$("#close1").click(function(){
			//关闭窗口1
			$("#window1").window("close");
		});
	</script>
	
  </body>
</html>

三、属性

窗口的属性扩展自panel(面板)，窗口新增或重新定义的属性如下：

属性名	属性值类型	描述	默认值
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

四、事件

窗口的事件完整继承自panel(面板)。

五、方法

窗口的方法扩展自panel(面板)，窗口新增的方法如下：

方法名	方法参数	描述
window	none	返回外部窗口对象。
hcenter	none	仅水平居中窗口。（该方法自1.3.1版开始可用）
vcenter	none	仅垂直居中窗口。（该方法自1.3.1版开始可用）
center	none	将窗口绝对居中。（该方法自1.3.1版开始可用）