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居於屏幕中間