❮ Plugins Base Searchbox Plugins Form Slider ❯

jQuery EasyUI Window Plugin - `Window`

Extends from $.fn.panel.defaults. Overrides the default defaults with $.fn.window.defaults.

The window is a floating and draggable panel that can be used as an application window. By default, the window is movable, resizable, and closable. Its content can be defined by static HTML or loaded dynamically via AJAX.

Dependencies

draggable
resizable
panel

Usage

Creating a Window

Create a window from markup.

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

Create a window using JavaScript.
```
<div id="win"></div>
```

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

Create a window with a compound layout.

As usual, you can define the window layout. The following example demonstrates how to split the window area into two parts: north and center.

<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 Actions

Open and close a window.

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

Load window content via AJAX.

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

Properties

This property extends from the panel. Below are the properties overridden and added for the window.

Name	Type	Description	Default Value
title	string	The title text of the window.	New Window
collapsible	boolean	Defines whether to show the collapse button.	true
minimizable	boolean	Defines whether to show the minimize button.	true
maximizable	boolean	Defines whether to show the maximize button.	true
closable	boolean	Defines whether to show the close button.	true
closed	boolean	Defines whether to close the window.	false
zIndex	number	The z-index to start increasing from for the window.	9000
draggable	boolean	Defines whether the window is draggable.	true
resizable	boolean	Defines whether the window is resizable.	true
shadow	boolean	If set to true, the shadow will be shown when the window can display a shadow.	true
inline	boolean	Defines how to place the window, when set to true it will be placed inside its parent container, when set to false it will float on top of all elements.	false
modal	boolean	Defines whether the window is a modal window.	true

Events

This event extends from the panel.

Methods

This method extends from the panel. Below are the methods added for the window.

Name	Parameters	Description
window	none	Returns the outer window object.
hcenter	none	Horizontally center the window. This method is available since version 1.3.1.
vcenter	none	Vertically center the window. This method is available since version 1.3.1.
center	none	Center the window. This method is available since version 1.3.1.