Skip to content

Window(窗口)

扩展自$.fn.iPanel.defaults。使用$.fn.iWindow.defaults重写默认值对象。

窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

依赖关系

用法

创建窗口

  1. 通过标签创建窗口。
html
<div id="win" data-toggle="topjui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true">
    Window Content
</div>
  1. 通过Javascript创建窗口。
html
<div id="win"></div>
javascript
$('#win').iWindow({
    width:600,
    height:400,
    modal:true
});
  1. 创建复合布局窗口。
html
<div id="win" data-toggle="topjui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true">
    <div data-toggle="topjui-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>

窗口的一些动作

打开和关闭窗口。

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

通过ajax读取窗口内容。

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

属性

窗口的属性扩展自panel(面板),窗口新增或重新定义的属性如下:

属性名属性值类型描述默认值
titlestring窗口的标题文本。New Window
collapsibleboolean定义是否显示可折叠按钮。true
minimizableboolean定义是否显示最小化按钮。true
maximizableboolean定义是否显示最大化按钮。true
closableboolean定义是否显示关闭按钮。true
closedboolean定义是否可以关闭窗口。false
zIndexnumber窗口Z轴坐标。9000
draggableboolean定义是否能够拖拽窗口。true
resizableboolean定义是否能够改变窗口大小。true
shadowboolean如果设置为true,在窗体显示的时候显示阴影。true
inlineboolean定义如何布局窗口,如果设置为true,窗口将显示在它的父容器中,否则将显示在所有元素的上面。false
modalboolean定义是否将窗体显示为模式化窗口。true
borderboolean,string定义窗体边框的样式。可用值有:true,false,'thin','thick'。true
constrainboolean定义是否限制窗体的位置。false

事件

窗口的事件完整继承自panel(面板)。

方法

窗口的方法扩展自panel(面板),窗口新增的方法如下:

方法名方法参数描述
windownone返回外部窗口对象。
hcenternone仅水平居中窗口。
vcenternone仅垂直居中窗口。
centernone将窗口绝对居中。

基于最新稳定版jQuery EasyUI构建的前端框架