F.js - 企业级前端界面库

Class: TabStrip

F. TabStrip

new F.TabStrip(options)

F.TabStrip.js, line 3

选项卡面板控件

Name Type Description

options

Object

初始参数

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

Extends

F.Panel

Members

bodyEljQuery

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

eljQuery

控件对应的jQuery节点对象

itemsObject

子控件列表

Methods

activeNearTab() F.TabStrip.js, line 96

激活附近的选项卡

activeNextTab() F.TabStrip.js, line 89

激活下一个选项卡

activeTab(tabId, moveToEnd) F.TabStrip.js, line 152

激活选项卡

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

inherited add(value) F.Container.js, line 55

添加新的子控件到当前控件

Name	Type	Description
`value`	Object \| Array.<Object>	控件实例数组

Example

menu1.add(['-', {
		type: 'menuitem',
		text: '新菜单项'
}]);

addTab(options, moveToEnd, actived){F.Tab} F.TabStrip.js, line 170

添加选项卡

Name Type Default Description

options

Object

参数

Name	Type	Default	Description
`id`	string		选项卡标识符
`iframe`	boolean		选项卡启用内联框架
`iframeUrl`	string		选项卡内联框架地址
`title`	string		选项卡标题文本
`closable`	boolean	false	选项卡是否可关闭
`refreshWhenExist`	boolean	false	如果选项卡已存在，是否更新选项卡
`confirmWhenExist`	string	''	如果选项卡已存在，则弹出确认对话框，提示用户是否更新已打开的选项卡

moveToEnd boolean 将选项卡移到尾部（如果选项卡已存在，则不改变位置）

actived boolean true optional 是否激活选项卡（默认为true）

Returns:

Type	Description
F.Tab	选项卡实例

inherited addTool(item) F.PanelBase.js, line 171

添加工具图标

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

inherited clearDirty() F.Container.js, line 83

清空容器内字段的改变状态（接受字段已改变的值）

inherited collapse() F.PanelBase.js, line 194

折叠面板

inherited disable() F.PanelBase.js, line 102

禁用控件

inherited doLayout(startFormTopmostComonent) F.Component.js, line 122

执行布局操作

Name	Type	Default	Description
`startFormTopmostComonent`	boolean	false	optional 从最顶层的控件开始布局

inherited enable() F.PanelBase.js, line 108

启用控件

inherited expand() F.PanelBase.js, line 200

展开面板

getActiveTab(){F.Tab} F.TabStrip.js, line 57

获取激活的选项卡

Returns:

Type	Description
F.Tab	选项卡实例

getActiveTabId(){string} F.TabStrip.js, line 71

获取激活的选项卡标识

Returns:

Type	Description
string	选项卡标识

getActiveTabIndex(){number} F.TabStrip.js, line 64

获取激活的选项卡索引

Returns:

Type	Description
number	选项卡索引

inherited getAttr(key){string} F.Component.js, line 101

获取节点属性

Name	Type	Description
`key`	string	节点属性键

Returns:

Type	Description
string	节点属性值

getClosableTabCount(exceptTab){number} F.TabStrip.js, line 120

获取可关闭的选项卡个数

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

Returns:

Type	Description
number	选项卡个数

inherited getFormFields(){Array.<F.Field>} F.Container.js, line 64

获取容器内的所有表单字段

Returns:

Type	Description
Array.<F.Field>	表单字段数组

inherited getHeight(){number} F.Component.js, line 136

获取控件高度

Returns:

Type	Description
number	高度

inherited getIconEl(){jQuery} F.PanelBase.js, line 143

获取图标元素

Returns:

Type	Description
jQuery	图标元素

inherited getIFrameEl(){jQuery} F.PanelBase.js, line 253

获取内联框架元素

Returns:

Type	Description
jQuery	内联框架元素

inherited getIFrameUrl(){string} F.PanelBase.js, line 246

获取内联框架地址

Returns:

Type	Description
string	内联框架地址

inherited getIFrameWindow(){Window} F.PanelBase.js, line 260

获取内联框架窗体对象

Returns:

Type	Description
Window	内联框架窗体对象

inherited getItem(value){F.Component} F.Container.js, line 112

获取子控件

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

Returns:

Type	Description
F.Component	子控件实例

inherited getScrollEl(){jQuery} F.PanelBase.js, line 115

获取可滚动元素

Returns:

Type	Description
jQuery	可滚动元素

getTab(value){F.Tab} F.TabStrip.js, line 50

获取选项卡

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

Returns:

Type	Description
F.Tab	选项卡实例

inherited getTitle(){string} F.PanelBase.js, line 218

获取面板标题

Returns:

Type	Description
string	标题文本

inherited getTitleTooltip(){string} F.PanelBase.js, line 225

获取面板标题提示信息

Returns:

Type	Description
string	标题提示信息

inherited getTooltip(){string} F.Component.js, line 196

获取提示信息

Returns:

Type	Description
string	提示信息

getVisibleTabCount(){number} F.TabStrip.js, line 127

获取显示选项卡的个数

Returns:

Type	Description
number	选项卡个数

inherited getWidth(){number} F.Component.js, line 130

获取控件宽度

Returns:

Type	Description
number	宽度

inherited hasHScrollbar(){boolean} F.PanelBase.js, line 122

是否存在水平滚动条

Returns:

Type	Description
boolean	是否存在水平滚动条

inherited hasIcon(){boolean} F.PanelBase.js, line 137

是否有图标

Returns:

Type	Description
boolean	是否有图标

inherited hasVScrollbar(){boolean} F.PanelBase.js, line 130

是否存在垂直滚动条

Returns:

Type	Description
boolean	是否存在垂直滚动条

inherited hide() F.PanelBase.js, line 273

隐藏面板

hideAllTabs() F.TabStrip.js, line 103

隐藏全部选项卡

inherited hideLoading() F.Container.js, line 95

隐藏加载动画

hideOtherTabs(exceptTab) F.TabStrip.js, line 111

隐藏其他选项卡

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

hideTab(tabId) F.TabStrip.js, line 134

隐藏选项卡

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

inherited insert(insertIndex, value) F.Container.js, line 44

插入新的子控件到当前控件

Name	Type	Description
`insertIndex`	number	插入的位置
`value`	Object \| Array.<Object>	控件实例数组

Example

menu1.insert(0, ['-', {
		type: 'menuitem',
		text: '新菜单项'
}]);

inherited insertTool(item, insertIndex) F.PanelBase.js, line 179

插入工具图标

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

inherited isCollapsed(){boolean} F.PanelBase.js, line 188

是否处于折叠状态

Returns:

Type	Description
boolean	折叠状态

inherited isDirty(){boolean} F.Container.js, line 77

容器内的表单字段是否已经改变

Returns:

Type	Description
boolean	容器内的表单字段是否已经改变

inherited isDisabled(){boolean} F.Component.js, line 224

是否禁用

Returns:

Type	Description
boolean	是否禁用

inherited isType(value){boolean} F.Base.js, line 23

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

Name	Type	Description
`value`	Object	控件类型

Returns:

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

Example

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

inherited isValid(onlyFirstInvalidField){Array.<Object>} F.Container.js, line 71

容器内的表单字段是否有效

Name	Type	Default	Description
`onlyFirstInvalidField`	boolean	false	是否仅返回第一个无效的字段

Returns:

Type	Description
Array.<Object>	容器内的表单字段是否有效（[isValid, firstInvalidField, secondInvalidField, thirdInvalidField...]）

inherited isVisible(){boolean} F.Component.js, line 216

是否可见

Returns:

Type	Description
boolean	是否可见

inherited off(eventNames, fn) F.Component.js, line 181

移除事件

Name	Type	Description
`eventNames`	string	事件名称（可以空格分割多个事件名称）
`fn`	F_Component_on	之前注册的事件处理函数

inherited on(eventNames, fn) F.Component.js, line 174

注册事件

Name	Type	Description
`eventNames`	string	事件名称（可以空格分割多个事件名称）
`fn`	F_Component_on	触发事件时执行的函数

inherited refreshIFrame() F.PanelBase.js, line 267

刷新内联框架

inherited remove() F.Component.js, line 115

删除父控件中移除当前控件

inherited removeAttr(key) F.Component.js, line 108

删除节点属性

Name	Type	Description
`key`	string	节点属性键

inherited removeTooltip() F.Component.js, line 208

删除提示信息

inherited reset() F.Container.js, line 89

重置容器内的全部字段

scrollToTab(value) F.TabStrip.js, line 42

滚动到选项卡

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

setActiveTab(value, moveToEnd){boolean} F.TabStrip.js, line 80

设置激活选项卡

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

Returns:

Type	Description
boolean	是否激活成功

inherited setAttr(key, value) F.Component.js, line 94

设置节点属性

Name	Type	Description
`key`	string	节点属性键
`value`	string	节点属性值

inherited setAttrs(attrs) F.Component.js, line 86

设置节点属性

Name	Type	Description
`attrs`	Object	节点属性对象

inherited setDisabled(disabled) F.Component.js, line 248

设置控件的禁用状态

Name	Type	Description
`disabled`	boolean	是否禁用

inherited setEnabled(enabled) F.Component.js, line 254

设置控件的启用状态

Name	Type	Description
`enabled`	boolean	是否启用

inherited setHeight(height) F.Component.js, line 143

设置控件高度

Name	Type	Description
`height`	number	高度

inherited setHidden(hidden) F.Component.js, line 286

设置控件的隐藏状态

Name	Type	Description
`hidden`	boolean	是否隐藏

inherited setIcon(icon) F.PanelBase.js, line 152

设置图标地址

Name	Type	Description
`icon`	string	图标地址

Example

F.ui.panel1.setIcon('../res/images/16/1.png');

inherited setIconFont(iconFont) F.PanelBase.js, line 161

设置图标字体

Name	Type	Description
`iconFont`	string	图标字体

Example

F.ui.panel1.setIconFont('bank');

inherited setIFrameUrl(url) F.PanelBase.js, line 239

设置内联框架地址

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

inherited setSize(width, height) F.Component.js, line 158

设置控件尺寸

Name	Type	Description
`width`	number	宽度
`height`	number	高度

inherited setSplitDraggable(){boolean} F.PanelBase.js, line 281

设置分隔条是否可以拖动

Returns:

Type	Description
boolean	是否可以拖动

inherited setTitle(title) F.PanelBase.js, line 212

设置面板标题

Name	Type	Description
`title`	string	标题文本

inherited setTitleTooltip(tooltip) F.PanelBase.js, line 232

设置面板标题提示信息

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

inherited setTooltip(tooltip) F.Component.js, line 202

设置提示信息

Name	Type	Description
`tooltip`	string	提示信息

inherited setVisible(visible) F.Component.js, line 280

设置控件的显示状态

Name	Type	Description
`visible`	boolean	是否可见

inherited setWidth(width) F.Component.js, line 150

设置控件宽度

Name	Type	Description
`width`	number	宽度

inherited show() F.Component.js, line 268

显示控件

inherited showLoading(opacity, container) F.Container.js, line 103

显示加载动画

Name	Type	Description
`opacity`	number	透明度（默认值：0.65）
`container`	jQuery	显示动画的目标元素（留空则为内容元素）

showTab(tabId, moveToEnd) F.TabStrip.js, line 144

显示选项卡

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

inherited toggleCollapse() F.PanelBase.js, line 206

切换面板的折叠状态

inherited toggleEnabled() F.Component.js, line 230

切换启用状态

inherited toggleVisible() F.Component.js, line 274

切换显示状态

inherited trigger(eventName, args) F.Component.js, line 189

触发事件

Name	Type	Description
`eventName`	string	事件名称
`args`	Object	事件参数

Events

inherited beforehide F.Component.js, line 57

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

inherited beforeshow F.Component.js, line 69

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

inherited collapse F.PanelBase.js, line 68

折叠面板时触发

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

inherited dirtychange F.PanelBase.js, line 45

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

inherited expand F.PanelBase.js, line 76

展开面板时触发

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

inherited hide F.Component.js, line 63

隐藏控件时触发

inherited iframeload F.PanelBase.js, line 84

内联框架加载完毕时触发

inherited layout F.Component.js, line 45

布局控件时触发

inherited render F.Component.js, line 51

渲染控件时触发

inherited resize F.PanelBase.js, line 61

面板尺寸改变时触发

inherited show F.Component.js, line 75

显示控件时触发

inherited splitdrag F.PanelBase.js, line 53

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

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

tabchange F.TabStrip.js, line 28

选项卡切换时触发

Name	Type	Description
`event`	jQuery.Event	事件对象
`tab`	F.Tab	激活的选项卡实例

F.js v8.2.1

Class: TabStrip

new F.TabStrip(options)

Extends

Members

bodyEljQuery

eljQuery

itemsObject

Methods

activeNearTab()

activeNextTab()

activeTab(tabId, moveToEnd)

inherited add(value)

Example

addTab(options, moveToEnd, actived){F.Tab}

Returns:

inherited addTool(item)

inherited clearDirty()

inherited collapse()

inherited disable()

inherited doLayout(startFormTopmostComonent)

inherited enable()

inherited expand()

getActiveTab(){F.Tab}

Returns:

getActiveTabId(){string}

Returns:

getActiveTabIndex(){number}

Returns:

inherited getAttr(key){string}

Returns:

getClosableTabCount(exceptTab){number}

Returns:

inherited getFormFields(){Array.<F.Field>}

Returns:

inherited getHeight(){number}

Returns:

inherited getIconEl(){jQuery}

Returns:

inherited getIFrameEl(){jQuery}

Returns:

inherited getIFrameUrl(){string}

Returns:

inherited getIFrameWindow(){Window}

Returns:

inherited getItem(value){F.Component}

Returns:

inherited getScrollEl(){jQuery}

Returns:

getTab(value){F.Tab}

Returns:

inherited getTitle(){string}

Returns:

inherited getTitleTooltip(){string}

Returns:

inherited getTooltip(){string}

Returns:

getVisibleTabCount(){number}

Returns:

inherited getWidth(){number}

Returns:

inherited hasHScrollbar(){boolean}

Returns:

inherited hasIcon(){boolean}

Returns:

inherited hasVScrollbar(){boolean}

Returns:

inherited hide()

hideAllTabs()

inherited hideLoading()

hideOtherTabs(exceptTab)

hideTab(tabId)

inherited insert(insertIndex, value)

Example

inherited insertTool(item, insertIndex)

inherited isCollapsed(){boolean}

Returns:

inherited isDirty(){boolean}

Returns:

inherited isDisabled(){boolean}