TabStrip

FineUI. TabStrip

new TabStrip(options)

Description:

选项卡面板控件。每个 FineUI.Tab 作为子项，支持任意内容（含 iframe）、可关闭、右键菜单、墨水条等。

相关在线示例：

Examples

创建选项卡面板，通过items配置多个标签页，activeTabIndex指定默认激活的标签：

FineUI.create({
	type: 'TabStrip', renderTo: document.body, width: 400, height: 200, activeTabIndex: 0,
	items: [{
		type: 'Tab', title: '标签一', bodyPadding: 10, content: '第一个标签的内容'
	}, {
		type: 'Tab', title: '标签二', bodyPadding: 10, content: '第二个标签的内容'
	}, {
		type: 'Tab', title: '标签三', bodyPadding: 10, content: '第三个标签的内容'
	}]
});

使用closable: true让标签可关闭，icon设置标签图标：

FineUI.create({
	type: 'TabStrip', renderTo: document.body, width: 400, height: 200,
	items: [{
		type: 'Tab', title: '标签一', closable: true, bodyPadding: 10, content: '可关闭', icon: '../res/icon/tag_pink.png'
	}, {
		type: 'Tab', title: '标签二', closable: true, bodyPadding: 10, content: '可关闭', icon: '../res/icon/tag_purple.png'
	}]
});

使用tabPosition调整标题位置（top/bottom/left/right），tabAlign调整对齐方式：

FineUI.create({
	type: 'TabStrip', renderTo: document.body, width: 400, height: 200,
	tabPosition: 'left', tabAlign: 'center',
	items: [{
		type: 'Tab', title: '标签一', bodyPadding: 10, content: '内容一'
	}, {
		type: 'Tab', title: '标签二', bodyPadding: 10, content: '内容二'
	}]
});

使用iframe: true和iframeUrl将选项卡内容设为内联框架：

FineUI.create({
	type: 'TabStrip', renderTo: document.body, width: 600, height: 400,
	items: [{
		type: 'Tab', title: 'IFRAME 选项卡', closable: true, iframe: true, iframeUrl: 'http://fineui.com/'
	}]
});

通过FineUI.TabStrip#event:tabchange事件监听选项卡切换：

FineUI.create({
	type: 'TabStrip', renderTo: document.body, width: 400, height: 200,
	items: [{
		type: 'Tab', title: '标签一', bodyPadding: 10, content: '内容一'
	}, {
		type: 'Tab', title: '标签二', bodyPadding: 10, content: '内容二'
	}],
	listeners: {
		tabchange: function (event, tab) {
			FineUI.alert('切换到：' + tab.getTitle());
		}
	}
});

Parameters:

Name Type Description

options

Object

初始参数

Properties

Name	Type	Default	Description
`tabPosition`	string	`'top'`	选项卡的位置（可选项为：top, bottom, left, right）
`tabAlign`	string	`'left'`	选项卡的对齐方式（可选项为：left, center, right）
`tabFill`	boolean	`false`	选项卡是否填充整个标题栏
`tabSpace`	number	`4`	选项卡标题之间的间距
`tabBorderColor`	boolean	`false`	是否显示全部选项卡标题的边框（默认仅显示选中选项卡标题的边框）
`tabPlain`	boolean	`false`	是否隐藏选项卡标题的背景色
`tabSeparated`	boolean	`false`	是否将激活的选项卡标题和正文隔开
`activeTabIndex`	number	`0`	激活选项卡的序号
`enableCloseMenu`	boolean	`false`	是否启用右键菜单
`closeOnDblClick`	boolean	`false`	是否双击关闭选项卡
`enableAnimation`	boolean		是否启用切换选项卡动画（如果未定义，则使用全局设置）
`animationType`	string	`'slideX'`	切换选项卡的动画类型（可选项为：slideX, slideY, fade, pop, flip）
`inkBar`	boolean	`false`	是否显示标题栏墨水条
`inkBarPosition`	string	`'bottom'`	标题栏墨水条的位置（可选项为：bottom, top）
`tabTitleVertical`	boolean	`false`	标题栏文字垂直显示（仅当 tabPosition 等于 left 或者 right 时有效）
`type`	string	`'TabStrip'`	控件类型

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

activateTab(tabId, moveToEndopt)

Description:

激活选项卡（与setActiveTab类似；区别：activateTab不接受索引，仅tabId字符串）

Example

程序激活已存在的 Tab：

FineUI.ui.tabstrip1.activateTab('tab_user_list');

Parameters:

Name	Type	Attributes	Default	Description
`tabId`	number \| string			选项卡
`moveToEnd`	boolean	<optional>	`false`	是否将选项卡移到尾部

activeNearTab()

Description:

激活附近的选项卡

activeNextTab()

Description:

激活下一个选项卡

addTab(options) → {FineUI.Tab}

Description:

添加选项卡（典型场景：菜单点击后打开新 iframe Tab；如果id已存在，默认会刷新该 Tab 而非重复创建）

Examples

从菜单/链接动态打开 iframe Tab，重复点击同一项会刷新而非新建：

FineUI.ui.tabstrip1.addTab({
    id: 'tab_user_list',
    iframe: true, iframeUrl: '/user/list.aspx',
    title: '用户列表', closable: true
});

禁用"重复打开时刷新"行为：

FineUI.ui.tabstrip1.addTab({
    id: 'tab_settings',
    iframe: true, iframeUrl: '/settings.aspx',
    title: '设置', closable: true,
    refreshWhenExist: false   // 已存在则只激活，不刷新 iframe
});

Parameters:

Name Type Description

options

Object

参数

Properties

Name	Type	Default	Description
`id`	string		选项卡标识符
`iframe`	boolean		选项卡启用内联框架
`iframeUrl`	string		选项卡内联框架地址
`title`	string		选项卡标题文本
`closable`	boolean	`false`	选项卡是否可关闭
`refreshWhenExist`	boolean	`true`	如果选项卡已存在，是否更新选项卡并刷新内联框架（默认值：true）
`confirmWhenExist`	string	`''`	如果选项卡已存在，则弹出确认对话框，提示用户是否更新已打开的选项卡
`moveToEnd`	boolean	`true`	将新增选项卡移到尾部（如果选项卡已存在，则不改变位置）（默认值：true）
`actived`	boolean	`true`	是否激活选项卡（默认值：true）

Returns:

选项卡实例

Type: FineUI.Tab

addTool(item)

Description:

添加工具图标

Inherited From:

FineUI.PanelBase#addTool

Parameters:

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

closeAllTabs()

Description:

关闭全部选项卡（触发选项卡的close事件，并根据选项卡的removeOnClose属性决定是否移除选项卡实例）

closeOtherTabs(exceptedTab)

Description:

关闭其他选项卡（触发选项卡的close事件，并根据选项卡的removeOnClose属性决定是否移除选项卡实例）

Parameters:

Name	Type	Description
`exceptedTab`	number \| string	被排除在外的选项卡

closeTab(tabId)

Description:

关闭选项卡（触发选项卡的close事件，并根据选项卡的removeOnClose属性决定是销毁还是隐藏）

Example

程序关闭指定 Tab：

FineUI.ui.tabstrip1.closeTab('tab_user_list');

Parameters:

Name	Type	Description
`tabId`	number \| string	选项卡

collapse()

Description:

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

Inherited From:

FineUI.PanelBase#collapse

Example

程序折叠侧栏：

FineUI.ui.panelSide.collapse();

expand()

Description:

展开面板（与collapse对应）

Inherited From:

FineUI.PanelBase#expand

getActiveTab() → {FineUI.Tab}

Description:

获取激活的选项卡

Returns:

选项卡实例

Type: FineUI.Tab

getActiveTabId() → {string}

Description:

获取激活的选项卡标识

Returns:

选项卡标识

Type: string

getActiveTabIndex() → {number}

Description:

获取激活的选项卡索引

Returns:

选项卡索引

Type: number

getClosableTabCount(exceptedTab) → {number}

Description:

获取可关闭的选项卡个数

Parameters:

Name	Type	Description
`exceptedTab`	number \| string	被排除在外的选项卡

Returns:

选项卡个数

Type: number

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

getTab(value) → {FineUI.Tab}

Description:

获取选项卡

Parameters:

Name	Type	Description
`value`	number \| string	选项卡

Returns:

选项卡实例

Type: FineUI.Tab

getTitleTooltip() → {string}

Description:

获取面板标题提示信息

Inherited From:

FineUI.PanelBase#getTitleTooltip

Returns:

标题提示信息

Type: string

getVisibleTabCount() → {number}

Description:

获取显示选项卡的个数

Returns:

选项卡个数

Type: number

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

refreshIFrame()

Description:

刷新内联框架

Inherited From:

FineUI.PanelBase#refreshIFrame

scrollToTab(value)

Description:

滚动到选项卡

Parameters:

Name	Type	Description
`value`	number \| string	选项卡

setActiveTab(value, moveToEnd) → {boolean}

Description:

设置激活选项卡

Parameters:

Name	Type	Description
`value`	number \| string	选项卡索引、标识符
`moveToEnd`	boolean	将选项卡移到尾部

Returns:

是否激活成功

Type: boolean

setIFrameUrl(url)

Description:

设置内联框架地址

Inherited From:

FineUI.PanelBase#setIFrameUrl

Parameters:

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

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	提示信息字符串

showTab(tabId, moveToEnd)

Description:

显示选项卡

Parameters:

Name	Type	Description
`tabId`	number \| string	选项卡
`moveToEnd`	boolean	将选项卡移到尾部

toggleCollapse()

Description:

切换面板的折叠状态

Inherited From:

FineUI.PanelBase#toggleCollapse

Events

alltabsclose

Description:

全部选项卡关闭时触发

Parameters:

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

beforehide

Description:

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

Inherited From:

FineUI.Component#event:beforehide

beforeshow

Description:

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

Inherited From:

FineUI.Component#event:beforeshow

beforetabcontextmenu

Description:

右键点击选项卡时触发（返回false则阻止浏览器默认的右键菜单）

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象
`tabId`	string	选项卡标识符

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

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

show

Description:

显示控件时触发

Inherited From:

FineUI.Component#event:show

splitdrag

Description:

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

Inherited From:

FineUI.PanelBase#event:splitdrag

Parameters:

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

tabchange

Description:

选项卡切换时触发
- 关闭非活跃的选项卡时，不会触发tabchange事件
- 关闭活跃的选项卡时：
  - 如果此选项卡是仅存的一个选项卡，则会触发一次tabsclose和alltabsclose事件
  - 如果还存在其他选项卡，则会尝试激活上一次活跃的选项卡，并触发tabchange事件

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象
`tab`	FineUI.Tab	激活的选项卡实例（如果是关闭全部选项卡时触发，则此参数为空）

tabclose

Description:

选项卡关闭时触发

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象
`tab`	FineUI.Tab	关闭的选项卡实例

tabsclose

Description:

全部可关闭的选项卡（closable==true）关闭时触发

Parameters:

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