jQuery EasyUI 窗口插件 - Window 窗口

jQuery EasyUI 插件 jQuery EasyUI 插件

擴展自 $.fn.panel.defaults。通過 $.fn.window.defaults 重寫默認的 defaults。

窗口（window）是一個浮動的、可拖拽的面板，可以當做應用程式窗口使用。默認情況下，窗口可移動、可調整尺寸、可關閉。它的內容既可以通過靜態 html 定義，也可以通過 ajax 動態加載。

依賴

  • draggable
  • resizable
  • panel

用法

創建窗口（window）

1、從標記創建窗口（window）。

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
    data-options="iconCls:'icon-save',modal:true">
    Window Content
</div>

2、使用 javascript 創建窗口（window）。

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

$('#win').window({
    width:600,
    height:400,
    modal:true
});

3、通過複合佈局創建窗口（window）。

像往常一樣，你可以定義窗口佈局。下麵的實例演示了如何分割窗口區域為兩個部分：北區和中心區。

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
    data-options="iconCls:'icon-save',modal:true">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',split:true" style="height:100px"></div>
        <div data-options="region:'center'">
            The Content.
        </div>
    </div>
</div>

窗口（window）動作

打開和關閉窗口（window）。

$('#win').window('open'); // open a window
$('#win').window('close'); // close a window

通過 ajax 加載窗口內容。

$('#win').window('refresh', 'get_content.php');

屬性

該屬性擴展自面板（panel），下麵是為窗口（window）重寫和添加的屬性。

名稱 類型 描述 默認值
title string 窗口的標題文本。 New Window
collapsible boolean 定義是否顯示折疊按鈕。 true
minimizable boolean 定義是否顯示最小化按鈕。 true
maximizable boolean 定義是否顯示最大化按鈕。 true
closable boolean 定義是否顯示關閉按鈕。 true
closed boolean 定義是否關閉窗口。 false
zIndex number 從其開始增加的窗口的 z-index。 9000
draggable boolean 定義窗口是否可拖拽。 true
resizable boolean 定義窗口是否可調整尺寸。 true
shadow boolean 如果設置為 true，當窗口能夠顯示陰影的時候將會顯示陰影。 true
inline boolean 定義如何放置窗口，當設置為 true 時則放在它的父容器裏，當設置為 false 時則浮在所有元素的頂部。 false
modal boolean 定義窗口是不是模態（modal）窗口。 true

事件

該事件擴展自面板（panel）。

方法

該方法擴展自面板（panel），下麵是為窗口（window）添加的方法。

名稱 參數 描述
window none 返回外部窗口（window）對象。
hcenter none 水準居中窗口。該方法自版本 1.3.1 起可用。
vcenter none 垂直居中窗口。該方法自版本 1.3.1 起可用。
center none 居中窗口。該方法自版本 1.3.1 起可用。
jQuery EasyUI 插件 jQuery EasyUI 插件