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 |
4、事件
Window的事件和面板(panel)的事件相同
5、方法
除了”header”和”body”以外，Window的函数方法和面板(panel)的相同
