jQueryEasyUI Window的基本使用

本文主要是介绍jQueryEasyUI Window的基本使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、基本使用

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Window</title><link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" /><link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" /><script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script><script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script><script type="text/javascript">$(function () {$("#win").window({title: "窗体",width: 300,height: 200});});</script>
</head>
<body><div id="win">Content</div>
</body>
</html>

或

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Window</title><link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" /><link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" /><script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script><script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body><div id="win" class="easyui-window" style="width:300px; height:200px;" title="窗体">Content</div>
</body>
</html>

效果图：

2、Window工具栏

代码：

<script type="text/javascript">$(function () {$("#win").window({title: "窗体",width: 300,height: 200,iconCls: "icon-add",collapsible: true,minimizable: true,maximizable: true,resizable: false,modal: true,href: "Content.aspx",tools: [{iconCls: 'icon-add',handler: function () {alert('add');}}, {iconCls: 'icon-remove',handler: function () {alert('remove');}}]});});
</script>

效果图：

3、参数

大多数的属性和面板(panel)的属性是相同的，下面列出一些Window私有的属性：

属性名	类型	描述	默认值
zIndex	数字	窗口的z-index属性，可以通过这个属性来增加	9000
draggable	布尔	定义窗口是否可被拖动	true
resizable	布尔	定义窗口是否可以被改变大小	true
shadow	布尔	如果设置为true，窗口的阴影也将显示。	true
modal	布尔	定义窗口是否是一个模式窗口。	false

Window也重写了Panel里的一些属性

属性名	类型	描述	默认值
title	字符串	窗口的标题文本	New Window
collapsible	布尔	定义是否显示可折叠定义按钮	true
minimizable	布尔	定义是否显示最小化按钮	true
maximizable	布尔	定义是否显示最大化按钮	true
closable	布尔	定义是否显示关闭按钮	true