ht.widget.TabView()

new TabView()

new TabView()
页签组件,以页签的方式呈现多组件,页签支持拖拽和关闭等功能

Methods

add(name, view, selected) → {ht.Tab}

添加组件

Parameters:
Name Type Attributes Description
name string

组件的标题文字信息

view Object | HTMLElement

组件内容,可为HT框架提供的组件对象,也可为原生HTML元素

selected boolean <optional>

组件是否选中,默认为false

Returns:
ht.Tab

addPropertyChangeListener(listener, scope, ahead) → {void}

增加自身属性变化事件监听器

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

ahead boolean <optional>

是否将当前监听器插入到监听器列表开头

Returns:
void
See:

addToDOM(parentNode) → {void}

将组件加入到指定的DOM元素底下,不指定则加入到 document.body 下

Parameters:
Name Type Attributes Description
parentNode HTMLElement <optional>

父DOM,默认为 document.body

Returns:
void

addViewListener(listener, scope, ahead) → {void}

监听视图事件,如布局、刷新等

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

ahead boolean <optional>

是否将当前监听器插入到监听器列表开头

Returns:
void

drawCloseIcon(s, g, color, position) → {void}

绘制文本,可重载自定义,label一般绘制在最后因此没有width参数限制

Parameters:
Name Type Description
s any
g CanvasRenderingContext2D

画笔对象

color string

图标颜色

position Object

图标位置

Returns:
void

drawTab(g, data, selected, x, y, width, height) → {void}

绘制行内容,可重载自定义,默认调用drawIcon和drawLabel,如果返回值为HTML元素,则使用HTML元素当作Renderer

Parameters:
Name Type Description
g CanvasRenderingContext2D

画笔对象

data Object

数据元素

selected boolean

数据元素是否选中

x number

左上角x坐标

y number

左上角y坐标

width number

绘制的宽度

height number

绘制的高度

Returns:
void

firePropertyChange(property, oldValue, newValue) → {void}

派发改变事件

Parameters:
Name Type Description
property string

属性

oldValue any

旧值

newValue any

新值

Returns:
void
See:

fireViewEvent(kind) → {void}

Parameters:
Name Type Description
kind string
Returns:
void

fp(property, oldValue, newValue) → {void}

派发改变事件

Parameters:
Name Type Description
property string

属性

oldValue any

旧值

newValue any

新值

Returns:
void
See:

get(nameOrIndex) → {void}

获取指定的Tab对象,参数可为Tab的标签文字或索引

Parameters:
Name Type Description
nameOrIndex string | number

标签文字或索引

Returns:
void

getClass() → {function}

获取类声明(构造函数)

Returns:
function -

类声明(构造函数)

getClassName() → {string}

获取类全名

Returns:
string -

类全名

getContentDiv() → {HTMLDivElement}

获取组件的内容区域Div

Returns:
HTMLDivElement -

组件的内容区域Div

getCurrentTab() → {Object}

获取当前选中的Tab对象

Returns:
Object -

当前选中的Tab对象

getDisabledDiv() → {HTMLElement}

获取被禁用组件的div

Returns:
HTMLElement -

被禁用组件的div

getHeight() → {number}

获取布局高度

Returns:
number -

布局高度

getInsertColor() → {string}

获取提示插入位置颜色

Returns:
string -

提示插入位置颜色

getLabel(tab) → {string}

获取tab对象显示的文字,默认返回tab.toLabel(),可重载自定义

Parameters:
Name Type Description
tab Object

标签文字或索引

Returns:
string -

tab对象显示的文字

getLabelColor(tab) → {string}

获取页签文字颜色,可重载自定义

Parameters:
Name Type Description
tab Object

标签文字或索引

Returns:
string -

tab对象显示的文字

getLabelFont() → {string}

获取页签文字字体,可重载自定义

Returns:
string -

页签文字字体

getLogicalPoint(event) → {Object}

传入HTML事件对象,将事件坐标转换为组件中的逻辑坐标

Parameters:
Name Type Description
event Object

数据模型

Returns:
Object -

组件中的逻辑坐标

See:

getMoveBackground() → {string}

获取移动时的页签背景色

Returns:
string -

移动时的页签背景色

getSelectBackground() → {string}

获取页签选中线条背景色

Returns:
string -

页签选中线条背景色

getSelectWidth() → {number}

获取页签选中的线条宽度,默认值为3

Returns:
number -

页签选中的线条宽度

getSuperClass() → {function}

获取父类声明(构造函数)

Returns:
function -

父类声明(构造函数)

getTabAt(pointOrEvent) → {Object}

传入逻辑坐标点或交互事件对象,返回当前点下 tab 页签

Parameters:
Name Type Description
pointOrEvent Object

逻辑坐标点或交互事件对象

Returns:
Object -

Tab对象

getTabBackground() → {string}

获取页签背景色

Returns:
string -

页签背景色

getTabGap() → {number}

获取页签间隔,默认值为1

Returns:
number -

页签间隔

getTabHeight() → {number}

获取页签高度

Returns:
number -

页签高度

getTabHPadding() → {number}

设置tab左边和右边与组件内容的间距,默认值为0

Returns:
number -

tab左边和右边与组件内容的间距

getTabModel() → {Object}

获取页签模型容器,用于增删Tab页签

Returns:
Object -

页签模型容器

getTabPosition() → {string}

获取页签位置,可用值有:top|bottom|left|right|left-vertical|right-vertical,默认值为top

Returns:
string -

页签位置

getTabWidth(tab) → {number}

获取页签宽度,可重载自定义

Parameters:
Name Type Description
tab Object

标签文字或索引

Returns:
number -

页签宽度

getTitleDiv(tab) → {HTMLDivElement}

获取页签的div容器

Parameters:
Name Type Description
tab Object
Returns:
HTMLDivElement -

页签的div容器

getTranslateX() → {number}

获取水平平移值

Returns:
number -

水平平移值

See:

getTranslateY() → {number}

获取垂直平移值

Returns:
number -

垂直平移值

See:

getView() → {HTMLElement}

获取组件的根层div

Returns:
HTMLElement -

组件的根层div

getWidth() → {number}

获取布局宽度

Returns:
number -

布局宽度

handleSelectionChange(event) → {void}

监听tabView 选择改变事件,可重载做后续处理

Parameters:
Name Type Description
event Object

事件

Returns:
void

hideTabView() → {void}

Returns:
void

invalidate(delay) → {void}

无效组件,并调用延时刷新

Parameters:
Name Type Description
delay number

延迟刷新的间隔事件(单位:ms)

Returns:
void
See:
  • widget.Tabview#iv

isDisabled() → {boolean}

组件是否处于不可用状态,处于此状态时不能进行任何操作并且会遮挡一层蒙板

Returns:
boolean -

组件是否处于不可用状态

isMovable() → {boolean}

获取页签是否可拖拽移动改变显示顺序,默认值为true

Returns:
boolean -

页签是否可拖拽移动改变显示顺序

isScrollable() → {boolean}

获取页签是否可滚动,默认值为fasle

Returns:
boolean -

页签是否可滚动

iv(delay) → {void}

无效组件,并调用延时刷新

Parameters:
Name Type Description
delay number

延迟刷新的间隔事件(单位:ms)

Returns:
void
See:

lp(event) → {Object}

传入HTML事件对象,将事件坐标转换为组件中的逻辑坐标

Parameters:
Name Type Description
event Object

数据模型

Returns:
Object -

组件中的逻辑坐标

See:

mp(listener, scope, ahead) → {void}

增加自身属性变化事件监听器

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

ahead boolean <optional>

是否将当前监听器插入到监听器列表开头

Returns:
void
See:

onPropertyChanged(event) → {void}

属性变化回调函数,可重载做后续处理

Parameters:
Name Type Description
event Object

属性变化事件

Returns:
void
Example
//event格式:
{
	property: 'name',//发生变化的属性
	oldValue: 'oldValue',//旧值
	newValue: 'newValue',''新值
	data: data//发生变化的data
}

onTabChanged(Func) → {void}

当前选中Tab对象变化时回调,可重载做后续处理

Parameters:
Name Type Description
Func function
Returns:
void
Example
// func参数
function (oldTab, newTab){

};

onTabClosed(Func) → {void}

关闭Tab页签回调函数,可重载做后续处理

Parameters:
Name Type Description
Func function
Returns:
void
Example
// func参数
function (tab, index){

};

onTabClosing(Func) → {void}

关闭Tab页签时回调函数,可重载做后续处理

Parameters:
Name Type Description
Func function
Returns:
void
Example
// func参数
function (tab, index){

};

remove(tab) → {void}

删除指定的Tab

Parameters:
Name Type Description
tab string | number | Object

tab Tab对象,或整数类型的索引,或页签文字

Returns:
void

removePropertyChangeListener(listener, scope) → {void}

删除自身属性变化事件监听器

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

Returns:
void
See:

removeViewListener(listener, scope) → {void}

删除视图事件监听器

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

Returns:
void

select(tab) → {void}

选中指定的Tab

Parameters:
Name Type Description
tab string | number | Object

Tab对象,或整数类型的索引,或页签文字

Returns:
void

setDisabled(value, iconUrl) → {void}

设置组件是否处于不可用状态,处于不可用状态时不能进行任何操作并且会遮挡一层蒙板

Parameters:
Name Type Attributes Description
value boolean

是否禁用组件

iconUrl string <optional>

蒙板上显示的icon的路径

Returns:
void

setFocus(tab) → {void}

根据标题找到组件设置焦点

Parameters:
Name Type Description
tab Object

Tab对象

Returns:
void

setHeight(v) → {void}

设置布局高度

Parameters:
Name Type Description
v number

高度值

Returns:
void

setInsertColor(color) → {void}

设置提示插入位置颜色

Parameters:
Name Type Description
color string
Returns:
void

setLabelColor(color) → {void}

设置页签文字颜色

Parameters:
Name Type Description
color string
Returns:
void

setLabelFont(font) → {void}

设置页签文字字体

Parameters:
Name Type Description
font string
Returns:
void

setMovable(v) → {void}

设置页签是否可拖拽移动改变显示顺序,默认值为true

Parameters:
Name Type Description
v boolean
Returns:
void

setMoveBackground(color) → {void}

设置移动时的页签背景色

Parameters:
Name Type Description
color string
Returns:
void

setSelectBackground(color) → {void}

设置页签选中线条背景色

Parameters:
Name Type Description
color string
Returns:
void

setSelectWidth(width) → {void}

设置页签选中的线条宽度,默认值为3

Parameters:
Name Type Description
width number
Returns:
void

setTabBackground(color) → {void}

设置页签背景色

Parameters:
Name Type Description
color string
Returns:
void

setTabGap(v) → {void}

设置页签间隔,默认值为1

Parameters:
Name Type Description
v number
Returns:
void

setTabHeight(v) → {void}

设置页签高度

Parameters:
Name Type Description
v number
Returns:
void

setTabPosition(v) → {void}

设置页签位置,可用值有:top|bottom|left|right|left-vertical|right-vertical,默认值为top

Parameters:
Name Type Description
v string
Returns:
void

setTranslateX(x) → {void}

设置组件水平平移(滚动)值

Parameters:
Name Type Description
x number

水平平移(滚动)值

Returns:
void

setTranslateY(y) → {void}

设置组件垂直平移(滚动)值

Parameters:
Name Type Description
y number

垂直平移(滚动)值

Returns:
void

setWidth(width) → {void}

设置布局宽度

Parameters:
Name Type Description
width number
Returns:
void

tx(value) → {number}

获取水平平移值

Parameters:
Name Type Attributes Description
value number <optional>
Returns:
number -

水平平移值

See:
  • -

ty(value) → {number}

获取垂直平移值

Parameters:
Name Type Attributes Description
value number <optional>
Returns:
number -

垂直平移值

See:
  • -

ump(listener, scope) → {void}

删除自身属性变化事件监听器,removePropertyChangeListener的缩写

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope any <optional>

监听器函数域

Returns:
void
See:

validate() → {void}

刷新组件

Returns:
void