jquery easyui-window plugin使用

Jquery中的Window是一个可以浮动的并且是可以拖曳的面板（Panel），它可以被当做程序窗口来使用。默认情况下，window是可以被移动的，调整大小的和可以关闭的。它的内容可以是静态的html，也可以是通过ajax动态加载的。

window依赖的插件有draggable、resizable、panel。

window的使用案例

通过使用标签来创建window

<div id="win" class="easyui-window" data-options="title: 'window example', width: 600, height: auto, modal: true">
  window content
</div>

以上代码创建了一个使用静态html作为内容的，长度为600px，高度自适应的模态窗口。

此外，还可以使用javascript来创建window

<div id="win">
  window content
</div>

<script>
$(document).ready(function ()
{
  $("#win").window({title: 'window example', width: 600, height: auto, modal: true});
});
</script>

使用标签和使用javascript创建的效果是一样的。

给window定义布局

你可以给window定义布局，以下的案例将会把一个window划分成为两块区域（左边和右边）。

<div class="easyui-window" data-options="title: 'window layout', modal: true, width: 600, height: auto">
  <div class="easyui-layout" data-options="fit: true">
    <div data-options="region: 'west', width: 300">
      左边
    </div>
    <div data-options="region: 'east'">
      右边
      </div>
  </div>
</div>

window的动作

打开和关闭window，需要调用脚本来完成。

$("#win").window('open');//打开一个窗口
$("#win").window("close");//关闭一个窗口

通过ajax让窗口加载内容。

$("#win").window('refresh', 'index.jsp');

名称	值类型	描述	默认值
title	string	window的标题（在左上方）	New Window
collapsible	boolean	定义窗口是否可以收缩	true
minimizable	boolean	定义窗口是否具有最小化按钮	true
maximizable	boolean	定义窗口是否具有最大化按钮	true
closable	boolean	定义窗口是否具有关闭按钮	true
closed	boolean	定义是否关闭窗口	false
zIndex	number	window的层叠次数，可以增加该值	9000
draggable	boolean	定义窗口是否可以拖曳	true
resizable	boolean	定义窗口是否可以调整大小	true
shadow	boolean	是否显示阴影	true
inline	boolean	Defines how to stay the window, true to stay inside its parent, false to go on top of all elements.	false
modal	boolean	定义窗口是否为一个模态窗口	true

window的方法

名称	参数	描述
window	none	返回外部的window对象
hcenter	none	让window水平居中
vcenter	none	让window垂直居中
center	none	让window居于屏幕中间