Window - FineUI.js

Window

FineUI. Window

new Window(options)

Description:

窗体控件。支持模态/非模态、拖动、调整大小、最大化、内嵌 iframe、各种位置定位等。

相关在线示例：

Examples

创建窗体并通过按钮调用show()方法弹出：

FineUI.create({
	type: 'Window', id: 'window1', width: 500, height: 300, bodyPadding: 10, title: '窗体', content: '窗体内容', hidden: true
});

FineUI.create({
	type: 'Button', renderTo: document.body, text: '显示窗体',
	handler: function () {
		FineUI.ui.window1.show();
	}
});

使用resizable和maximizable允许调整大小和最大化：

FineUI.create({
	type: 'Window', renderTo: document.body, width: 500, height: 300, bodyPadding: 10, title: '可调整大小的窗体',
	resizable: true, maximizable: true, content: '拖动右下角可调整大小，点击右上角图标可最大化'
});

使用modal: false创建非模态窗体，positionX和positionY控制初始位置：

FineUI.create({
	type: 'Window', renderTo: document.body, width: 300, height: 150, bodyPadding: 10, content: '右下角非模态窗体',
	modal: false, positionX: 'right', positionY: 'bottom'
});

使用iframe: true和iframeUrl将窗体内容设为内联框架：

FineUI.create({
	type: 'Window', renderTo: document.body, width: 800, height: 500, title: '外部页面',
	iframe: true, iframeUrl: 'http://fineui.com/'
});

通过FineUI.Window#event:close事件监听关闭操作（closeAction控制点击关闭按钮时是隐藏还是销毁）：

FineUI.create({
	type: 'Window', renderTo: document.body, width: 400, height: 200, bodyPadding: 10, title: '关闭事件',
	closeAction: 'hide', content: '尝试关闭此窗体',
	listeners: {
		close: function (event) {
			FineUI.alert('窗体已关闭');
		}
	}
});

Parameters:

Name Type Description

options

Object

初始参数

Properties

Name	Type	Default	Description
`modal`	boolean	`true`	是否模式窗体
`draggable`	boolean	`true`	是否可拖动
`closable`	boolean	`true`	是否可关闭
`resizable`	boolean	`false`	是否可改变大小
`maximizable`	boolean	`false`	是否可最大化
`maximized`	boolean	`false`	当前窗体的最大化状态
`hideOnMaskClick`	boolean	`false`	点击遮罩层时是否隐藏窗体
`constrainInitialSize`	boolean	`true`	限制初始尺寸在当前浏览器窗口内
`constrainSize`	boolean	`false`	限制窗体尺寸在当前浏览器窗口内
`dependsViewPortSize`	boolean	`true`	弹出窗体大小依赖于可视窗口的大小
`keepLastPosition`	boolean	`false`	关闭再打开时是否保持上次的位置（左上角）
`keepLastSize`	boolean	`false`	关闭再打开时是否保持上次的尺寸
`minWidth`	number	`100`	最小宽度
`minHeight`	number	`100`	最小高度
`top`	number		窗体打开时左上角的位置
`left`	number		窗体打开时左上角的位置
`percentWidth`	number		窗体的百分比宽度（介于0-1的小数，比如0.25）（相对于页面窗口的宽度）
`percentHeight`	number		窗体的百分比高度（介于0-1的小数，比如0.25）（相对于页面窗口的高度）
`goldenPosition`	boolean	`false`	窗体打开时是否位于页面黄金分割点的位置
`positionX`	string	`'center'`	横坐标的位置（可选项为：left, center, right）
`positionY`	string	`'center'`	纵坐标的位置（可选项为：top, center, bottom）
`fixedPosition`	boolean	`false`	窗体是否为 fixed 定位（默认为 absolute 定位）
`autoFocus`	boolean	`true`	显示后是否自动获取焦点
`target`	string	`'_self'`	窗体的显示位置（可选项为：_self, _parent, _top）（其中_parent, _top仅在 iframe=true 时有效）
`closeAction`	string	`'hide'`	点击右上角关闭按钮或者按下ESC键时执行的操作（可选项为：hide, hiderefresh, hidepostback\|close）
`enableAnimation`	boolean		是否启用显示隐藏动画（如果未定义，则使用全局设置）
`animationType`	string		显示隐藏的动画类型（可选项为：slideLeft, slideRight, slideUp, slideDown, fade, pop, flip）
`type`	string	`'Window'`	控件类型

Extends

FineUI.Panel

Members

bodyEl :jQuery

Description:

控件主体对应的jQuery节点对象

Inherited From:

FineUI.PanelBase#bodyEl

控件主体对应的jQuery节点对象

Type:

jQuery

el :jQuery

Description:

控件对应的jQuery节点对象

Inherited From:

FineUI.Component#el

控件对应的jQuery节点对象

Type:

jQuery

items :Object

Description:

子控件列表

Inherited From:

FineUI.Container#items

子控件列表

Type:

Object

Methods

active()

Description:

激活窗体（使其位于最上层）

addTool(item)

Description:

添加工具图标

Inherited From:

FineUI.PanelBase#addTool

Parameters:

Name	Type	Description
`item`	FineUI.Tool	工具图标实例

close(eventopt, closeArgumentopt)

Description:

关闭窗体（可以注册beforeclose事件并返回false来阻止窗体关闭）

Examples

直接关闭（不传任何参数）：

FineUI.ui.window1.close();

在 iframe 子页面提交成功后，把"需要刷新"信号回传给父页面（通过closeArgument）：

// 子页面（iframe 内部）：
parent.FineUI.ui.window1.close(null, { refresh: true, newId: '101' });

// 父页面注册<code>close</code>事件接收：
FineUI.create({
    type: 'Window', id: 'window1', iframe: true,
    listeners: {
        close: function (event, closeArgument) {
            if (closeArgument && closeArgument.refresh) {
                FineUI.ui.grid1.loadData([]);
            }
        }
    }
});

Parameters:

Name	Type	Attributes	Description
`event`	jQuery.Event	<optional>	事件对象（可选）
`closeArgument`	*	<optional>	关闭时传递给 close 事件回调的自定义参数（典型用法：iframe 子页面保存后通过此参数把数据回传给父页面）

collapse()

Description:

折叠面板（程序触发；启用collapsible: true时有效）

Inherited From:

FineUI.PanelBase#collapse

Example

程序折叠侧栏：

FineUI.ui.panelSide.collapse();

expand()

Description:

展开面板（与collapse对应）

Inherited From:

FineUI.PanelBase#expand

getEncodedText(text) → {string}

Description:

获取编码后的字符串

Inherited From:

FineUI.Component#getEncodedText

Parameters:

Name	Type	Description
`text`	string	原始字符串

Returns:

编码后的字符串

Type: string

getFormFields() → {Array.<FineUI.Field>}

Description:

获取容器内（深度遍历）所有表单字段实例（FineUI.Field的子类，如TextBox/NumberBox/DatePicker等）

Inherited From:

FineUI.Container#getFormFields

Example

遍历表单全部字段，序列化为 name → value 的对象（用于自定义 ajax 提交；字段未声明name时改用id）：

var values = {};
FineUI.ui.form1.getFormFields().forEach(function (field) {
    values[field.name || field.id] = field.getValue();
});
// values 形如：{ tbxUserName: 'FineUIPro', numberAge: 30, ... }

Returns:

表单字段数组

Type: Array.<FineUI.Field>

getIFrameEl() → {jQuery}

Description:

获取内联框架元素

Inherited From:

FineUI.PanelBase#getIFrameEl

Returns:

内联框架元素

Type: jQuery

getIFrameUrl() → {string}

Description:

获取内联框架地址

Inherited From:

FineUI.PanelBase#getIFrameUrl

Returns:

内联框架地址

Type: string

getIFrameWindow() → {Window}

Description:

获取内联框架窗体对象

Inherited From:

FineUI.PanelBase#getIFrameWindow

Returns:

内联框架窗体对象

Type: Window

getItem(value) → {FineUI.Component}

Description:

获取子控件（按索引/标识符/匹配函数查找；通常配合items无显式 id 的场景，比按FineUI.ui[id]更精准）

Inherited From:

FineUI.Container#getItem

Examples

按索引取第一个子控件：

var firstChild = FineUI.ui.toolbar1.getItem(0);

按 id 取子控件：

var btn = FineUI.ui.toolbar1.getItem('btnSave');

按匹配函数找第一个匹配的子控件（函数对每项返回 true 即匹配）：

var btn = FineUI.ui.toolbar1.getItem(function (item) {
    return item.type === 'Button' && item.text === '保存';
});

Parameters:

Name	Type	Description
`value`	number \| string \| function	子控件索引、标识符或者匹配函数

Returns:

子控件实例

Type: FineUI.Component

getTitleTooltip() → {string}

Description:

获取面板标题提示信息

Inherited From:

FineUI.PanelBase#getTitleTooltip

Returns:

标题提示信息

Type: string

hasHScrollbar() → {boolean}

Description:

是否存在水平滚动条

Inherited From:

FineUI.PanelBase#hasHScrollbar

Returns:

是否存在水平滚动条

Type: boolean

hasVScrollbar() → {boolean}

Description:

是否存在垂直滚动条

Inherited From:

FineUI.PanelBase#hasVScrollbar

Returns:

是否存在垂直滚动条

Type: boolean

hidePopEl()

Description:

隐藏容器内的所有弹出框

Inherited From:

FineUI.Container#hidePopEl

insertTool(insertIndex, item)

Description:

插入工具图标

Inherited From:

FineUI.PanelBase#insertTool

Parameters:

Name	Type	Description
`insertIndex`	number	插入的位置
`item`	FineUI.Tool	工具图标实例

isCollapsed() → {boolean}

Description:

是否处于折叠状态

Inherited From:

FineUI.PanelBase#isCollapsed

Returns:

折叠状态

Type: boolean

isType(value) → {boolean}

Description:

检测当前实例是否指定的控件类型

Inherited From:

FineUI.Base#isType

Example

grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true

Parameters:

Name	Type	Description
`value`	Object	控件类型

Returns:

如果当前实例是指定的控件类型，返回true；否则返回false

Type: boolean

maximize()

Description:

最大化窗体

refreshIFrame()

Description:

刷新内联框架

Inherited From:

FineUI.PanelBase#refreshIFrame

restore()

Description:

还原窗体

setDraggable() → {boolean}

Description:

设置窗体是否可以拖动

Returns:

是否可以拖动

Type: boolean

setIFrameUrl(url)

Description:

设置内联框架地址

Inherited From:

FineUI.PanelBase#setIFrameUrl

Parameters:

Name	Type	Description
`url`	string	内联框架地址

setResizable() → {boolean}

Description:

设置窗体是否可以改变大小

Returns:

是否可以改变大小

Type: boolean

setSplitDraggable() → {boolean}

Description:

设置分隔条是否可以拖动

Inherited From:

FineUI.PanelBase#setSplitDraggable

Returns:

是否可以拖动

Type: boolean

setTitleTooltip(tooltip)

Description:

设置面板标题提示信息

Inherited From:

FineUI.PanelBase#setTitleTooltip

Parameters:

Name	Type	Description
`tooltip`	string	提示信息字符串

toggleCollapse()

Description:

切换面板的折叠状态

Inherited From:

FineUI.PanelBase#toggleCollapse

Events

beforeclose

Description:

关闭窗体之前触发（返回false则阻止关闭窗体）

beforehide

Description:

隐藏控件之前触发（返回false则取消隐藏操作）

Inherited From:

FineUI.Component#event:beforehide

beforeshow

Description:

显示控件之前触发（返回false则取消显示操作）

Inherited From:

FineUI.Component#event:beforeshow

close

Description:

关闭窗体时触发

Parameters:

Name	Type	Attributes	Description
`event`	jQuery.Event		事件对象
`closeArgument`	*	<optional>	调用`close(event, closeArgument)`时传入的自定义参数

collapse

Description:

折叠面板时触发（启用collapsible: true时；用户点击折叠图标或调用collapse()都会触发）

Inherited From:

FineUI.PanelBase#event:collapse

Example

侧栏折叠后让中央面板"伸开"覆盖空间：

FineUI.ui.panelSide.on('collapse', function () {
    FineUI.ui.panelMain.setWidth(window.innerWidth);
});

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象

dirtychange

Description:

容器内的字段值改变时触发

Inherited From:

FineUI.PanelBase#event:dirtychange

expand

Description:

展开面板时触发（与collapse事件对应）

Inherited From:

FineUI.PanelBase#event:expand

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象

hide

Description:

隐藏控件时触发

Inherited From:

FineUI.Component#event:hide

iframeload

Description:

内联框架加载完毕时触发（启用iframe: true时；常用于和 iframe 内部脚本通讯）

Inherited From:

FineUI.PanelBase#event:iframeload

Example

iframe 加载完成后给子页面注入参数：

FineUI.create({
    type: 'Window', iframe: true, iframeUrl: '/detail.aspx',
    listeners: {
        iframeload: function () {
            var iframeWin = this.getIFrameWindow();
            iframeWin.someInitFunction({ userId: 101 });
        }
    }
});

layout

Description:

布局控件时触发

Inherited From:

FineUI.Component#event:layout

maximize

Description:

最大化窗体时触发

remove

Description:

移除控件时触发（调用 remove() 时，控件 DOM 被销毁之前触发；可用于清理外部资源 / 解绑全局事件）

Inherited From:

FineUI.Component#event:remove

render

Description:

渲染控件时触发

Inherited From:

FineUI.Component#event:render

resize

Description:

面板尺寸改变时触发

Inherited From:

FineUI.PanelBase#event:resize

restore

Description:

还原窗体时触发

show

Description:

显示控件时触发

Inherited From:

FineUI.Component#event:show

splitdrag

Description:

拖动分隔条时触发（拖动操作）

Inherited From:

FineUI.PanelBase#event:splitdrag

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象

windowmove

Description:

拖动窗体时触发（拖动过程中持续触发）

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象

windowresize

Description:

改变窗体大小时触发（拖动操作）

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象