构建 TabPage 类的新实例。
| 全称 | mx.containers.TabPage |
| 命名空间 | mx.containers |
| 类 | TabPage |
| 继承层次结构 | TabPageContainerControl |
| 源文件 | ~\mx\scripts\containers\TabControl.js |
提供一个表示 TabControl 中的单个选项卡页的类。示例请参见 TabControl。
构造函数
| 名称 | 说明 |
| TabPage() | 构建 TabPage 类的新实例。 |
初始化函数
| 名称 | 说明 |
| init() | 初始化方法。执行设置样式并初始化属性等操作。 |
方法
| 名称 | 说明 |
| addControl(p_control, p_islinebreak) | 将 Control 对象添加到集合 controls 中。@param p_control 一个 Control 对象。 @param p_islinebreak 一个布尔值，表示添加新控件时是否先换行。 |
| addControls(p_controls) | 将一组 Control 对象添加到集合 controls 中。@param p_controls 一个 Control 控件数组。 |
| append($p_obj) | 向选项卡页中添加内容。 |
| clear() | 容器的dispose方法 |
| close() | 将选项卡关闭 |
| contains($p_target) | 返回一个 Boolean 值，该值表示控件的容器中是否包含该 JQuery 对象。 |
| dispose() | 容器的dispose方法 |
| findControl(p_alias) | 根据指定的控件属性及属性值查找当前视图中对应的控件。 如果仅传入一个参数，则默认将该参数作为别名的值进行查找。 @overload function(p_alias) @param p_alias 一个字符串，表示控件的别名。 @overload function(p_attrName, p_attrValue) @param p_attrName 一个字符串，表示控件的属性名。 @param p_attrValue 一个字符串，表示控件的属性值。 |
| findControl(p_attrName, p_attrValue) | 根据指定的控件属性及属性值查找当前视图中对应的控件。 如果仅传入一个参数，则默认将该参数作为别名的值进行查找。 @overload function(p_alias) @param p_alias 一个字符串，表示控件的别名。 @overload function(p_attrName, p_attrValue) @param p_attrName 一个字符串，表示控件的属性名。 @param p_attrValue 一个字符串，表示控件的属性值。 |
| findControlByPermissionID(p_permissionID) | 根据指定的权限标识查找当前视图中对应的控件。 |
| getContext() | 获取控件当前所属 Weblet 的上下文信息（ WebletContext 类型）。 |
| getEl() | 获取控件容器对应的 HTML DOM 元素对象。 |
| getIndex() | 返回该选项卡页在 TabControl 的 TabControl.pages 集合中的序号（0 代表第一个）。如果该对象的 owner 字段为空，则返回 -1。 |
| hide() | 将选项卡页置为不可见，即将 visible 字段置为 false。 |
| moveTo(p_left, p_top) | 移动控件到指定位置。@param p_left 一个数字，表示 css 样式的 left 属性。 @param p_top 一个数字，表示 css 样式的 top 属性。 |
| remove($p_obj) | 移除选项卡中指定的内容。 |
| removeControl(p_control, p_deep) | 从 controls 集合中移除指定的 Control 对象。 从集合中移除控件时，该控件会被从上下文的 DOM 中移除，但仍驻留在内存中，可以重用。 |
| resizeTo(p_width, p_height) | 重设控件的大小。@param p_width 控件的宽度，可以是数字（如 100），也可以是字符串（如 “100%”）。 @param p_height 控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。 |
| setBorder(p_border) | 设置控件的边框样式。@param p_border 一个字符串，表示css样式的 border 属性。 |
| setBottom(p_bottom) | 设置 bottom 字段的值。@param p_bottom 控件的下边界与父容器下边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。 |
| setClosable(p_closable) | 设置 closable 字段的值。 |
| setCss(p_css) | 设置 css 字段的值。 @param p_css 一个 JSON 对象，表示控件的 CSS 样式。 |
| setCssClass(p_cssClass) | 设置 cssClass 字段的值 @param p_cssClass 一个String 对象，样式classname |
| setDisplay(p_display) | 设置 display 字段的值。@param p_display css 样式的 display 属性。 |
| setDisplayIcon(p_displayIcon) | 设置标签页图标是否显示。根据 TabControl.displayIcon 属性设置标签图标的可见性。 |
| setEnabled(p_enabled) | 设置 enabled 字段的值。 |
| setHeight(p_height) | 设置 height 字段的值。 注：子类UploadControl上传控件不支持百分比设置高度 @param p_height 控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。 |
| setImageKey(p_imageKey) | 设置 imageKey 字段的值。 |
| setImageUrl(p_imageUrl) | 设置 imageUrl 字段的值。 |
| setLeft(p_left) | 设置 left 字段的值。 @param p_left 控件的左边界与父容器左边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。 |
| setPadding(p_padding) | 设置控件的内边距。 {@excude mx.containers.Wizard} |
| setPosition(p_position) | 设置 position 字段的值。@param p_position 一个字符串，表示 css 样式的 position 属性。 |
| setRight(p_right) | 设置 right 字段的值。@param p_right 控件的右边界与父容器右边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。 |
| setText(p_text) | 设置 text 字段的值。 |
| setTop(p_top) | 设置 top 字段的值。 @param p_top 控件的上边界与父容器上边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。 |
| setVisible(p_visible) | 设置 visible 字段的值。 |
| setWidth(p_width) | 设置 width 字段的值。@param p_width 控件的高度,可以是数字（如 500）、字符串（如“500px”或“50%”）. |
| show() | 将选项卡页置为可见，即将 visible 字段置为 true。 |
| $(p_expression) | 该方法与 me.$e.find(p_expression) 等同。 |
| $wrap([p_obj]) | 返回一个 JQuery 对象。 |
字段
| 名称 | 说明 |
| alias | 获取或设置一个字符串，表示控件的别名。 |
| autoInit | 详见 {MXComponent.autoInit} 属性。 |
| border | 获取控件的边框样式。如“1px solid red”，表示边框的样式为 1 像素红色的实线。请使用 setBorder 方法设置该字段的值。 |
| bottom | 获取控件的下边界与父容器下边界的像素距离。请使用 setBottom 方法设置该字段的值。 |
| closable | 获取一个 Boolean 值，表示是否显示关闭选项卡按钮。如果该值为 true，则显示；反之则不显示。请使用 setClosable 方法设置该字段的值。 |
| contextMenu | 获取或设置容器的上下文菜单。@default null |
| controls | 获取容器包含的控件集合。集合中的单个控件也可能是一个容器。请使用 addControl 和 removeControl 方法向集合中添加或移除控件。 |
| cssClass | 指定css伪类名称，设置控件显示样式 |
| display | 获取控件的显示样式值。如“none”，表示隐藏控件； “block”表示强制作为块对象呈递。请使用 setDisplay方法设置该字段的值。 |
| enableBrowserContextMenu | 获取或初始化设置是否允许浏览器默认的上下文菜单。 |
| enabled | 获取控件是否可以对用户交互作出响应。如果该值为 true，则表示控件可以对用户交互作出响应；反之则不能。 请使用 setEnabled 方法设置该字段的值。@default true |
| eTag | 获取控件的标签。 |
| height | 获取容器的高度。可以是数字（如 500）、字符串（如“500px”或“50%”）。 |
| imageKey | 获取一个字符串，表示 TabPage 标签图标的名称。请使用 setImageKey 方法设置该字段的值。 必须设置TabControl的 displayIcon:true,该属性才能生效 |
| imageUrl | 获取一个字符串，表示 TabPage 标签图标的 URL（如“~$/icons/save.png”）。请使用 setImageUrl 方法设置该字段的值。 必须设置TabControl的 displayIcon:true,该属性才能生效 |
layout |
获取和设置一个容器控件的布局器。该字段可选的值包括：
@example
下面是一个绝对定位布局的容器添加控件的示例：
var container = new mx.containers.Container({
layout: "mx.layouts.AbsoluteLayout"
});
var textEditor = new mx.editors.TextEditor({
layoutConfigs: {
left: 100,
top: 50
}
});
container.addControl(textEditor);
@example
下面是一个锚定布局的容器添加控件的示例：
var container = new mx.containers.Container({
layout: "mx.layouts.AnchorLayout"
});
var textEditor1 = new mx.editors.TextEditor({
id: "editor1",
layoutConfigs: {
left: "100",
top: 50
}
});
container.addControl(textEditor1);
var textEditor2 = new mx.editors.TextEditor({
id: "editor2",
layoutConfigs: {
left: "editor1, 100px",//坐标值以逗号分隔，逗号之前是锚定对象的 id ，逗号之后表示相对于锚定对象的偏移。
top: 50,//如果不设置锚定对象，则以当前父容器为锚定对象。
bottom: "editor1, 100px"
}
});
container.addControl(textEditor2);
|
| layoutConfigs | 获取或者设置一个 JSON 对象，该属性表示控件在父容器中的布局配置参数。该属性只有在控件父容器运用布局器才会生效。 |
| left | 获取控件的左边界与父容器左边界的像素距离。请使用 setLeft 方法设置该字段的值。 |
| name | 获取或设置选项卡页的名称。该字段也是选项卡页的唯一标识。 该字段仅能设置非数字类型的字符串，避免包含特殊字符。 控件初始化时必须设置该属性 |
| owner | 获取该对象的父容器的对象，通常是一个 TabControl 类的实例。 |
| padding | 获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素； “4px 2px 3px 1px”则表示上边距为 4 像素，右边距为 2 像素，下边距为 3 像素，左边距为 1 像素。请使用 setPadding 方法设置该字段的值。 |
| parent | 获取控件所属的父对象。 |
| permissionID | 获取或设置一个字符串，表示控件的权限标识。 |
| position | 详见 Control.position 属性。 |
| right | 获取控件的右边界与父容器右边界的像素距离。请使用 setRight 方法设置该字段的值。 |
| text | 获取该选项卡页按钮上显示的文本。请使用 setText 方法设置该字段的值。 |
| top | 获取控件的上边界与父容器上边界的像素距离。请使用 setTop 方法设置该字段的值。 |
| visible | 获取一个 Boolean 值，表示是否显示选项卡页的按钮。如果该值为 true，则显示；反之则不显示。请使用 setVisible 方法设置该字段的值。 |
| width | 获取容器的宽度。可以是数字（如 500）、字符串（如“500px”或“50%”）。 |
| $button | 获取一个 JQuery 对象，表示该选项卡页的按钮对象。 |
| $container | 获取容器控件中用来包含控件 DOM 元素的占位符。 |
| $e | 获取该控件的占位符，该占位符为一个 JQuery 对象。 |
事件
| 名称 | 说明 |
| onclose | 当选项卡页被关闭后将触发该事件。通常调用 close 方法后会触发该事件。 |
| onclosing | 当选项卡页被关闭前将触发该事件。通常调用 close 等方法前会触发该事件。 |
| oncontextmenu | 在弹出上下之前执行 传入执行方法中参数为 {cancel:false,event:e}; cancel如果为true会中断默认逻辑的执行，event为事件参数 |
| onctrladded | 当添加控件到容器后，将触发该事件。 |
| onctrlremoved | 当从容器移除控件后，将触发该事件。 |
| onhide | 当选项卡页被隐藏后将触发该事件。通常调用 hide 等方法后会触发该事件。 |
| onhiding | 当选项卡页被隐藏前将触发该事件。通常调用 hide 方法前会触发该事件。 |
方法详细信息
addControl(p_control, p_islinebreak) 方法
将 Control 对象添加到集合 controls 中。@param p_control
一个 Control 对象。
@param p_islinebreak
一个布尔值，表示添加新控件时是否先换行。
参数
- p_control一个 Control 对象。
- p_islinebreak一个布尔值，表示添加新控件时是否先换行。
继承自
append($p_obj) 方法
向选项卡页中添加内容。
参数
- $p_obj一个 JQuery 对象，或一个控件（包含 $container 容器），或一个 HTML DOM 元素。
继承自
close() 方法
将选项卡关闭
contains($p_target) 方法
返回一个 Boolean 值，该值表示控件的容器中是否包含该 JQuery 对象。
参数
- $p_target一个 JQuery 对象，或 JQuery 选择器对应的字符串（如“#container”），或 HTML DOM 元素。
继承自
findControl(p_alias) 方法
根据指定的控件属性及属性值查找当前视图中对应的控件。
如果仅传入一个参数，则默认将该参数作为别名的值进行查找。
@overload function(p_alias)
@param p_alias 一个字符串，表示控件的别名。
@overload function(p_attrName, p_attrValue)
@param p_attrName 一个字符串，表示控件的属性名。
@param p_attrValue 一个字符串，表示控件的属性值。
参数
- p_alias一个字符串，表示控件的别名。
继承自
findControl(p_attrName, p_attrValue) 方法
根据指定的控件属性及属性值查找当前视图中对应的控件。
如果仅传入一个参数，则默认将该参数作为别名的值进行查找。
@overload function(p_alias)
@param p_alias 一个字符串，表示控件的别名。
@overload function(p_attrName, p_attrValue)
@param p_attrName 一个字符串，表示控件的属性名。
@param p_attrValue 一个字符串，表示控件的属性值。
参数
- p_attrName一个字符串，表示控件的属性名。
- p_attrValue一个字符串，表示控件的属性值。 {@exclude mx.datacontrols.DynamicForm}
继承自
findControlByPermissionID(p_permissionID) 方法
根据指定的权限标识查找当前视图中对应的控件。
参数
- p_permissionID一个字符串，表示控件的权限标识。
继承自
moveTo(p_left, p_top) 方法
移动控件到指定位置。@param p_left
一个数字，表示 css 样式的 left 属性。
@param p_top
一个数字，表示 css 样式的 top 属性。
参数
- p_left一个数字，表示 css 样式的 left 属性。
- p_top一个数字，表示 css 样式的 top 属性。
继承自
remove($p_obj) 方法
移除选项卡中指定的内容。
参数
- $p_obj一个 JQuery 对象，或一个控件（包含 $container 容器），或一个 HTML DOM 元素。
resizeTo(p_width, p_height) 方法
重设控件的大小。@param p_width
控件的宽度，可以是数字（如 100），也可以是字符串（如 “100%”）。
@param p_height
控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。
参数
- p_width控件的宽度，可以是数字（如 100），也可以是字符串（如 “100%”）。
- p_height控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。
继承自
setBorder(p_border) 方法
设置控件的边框样式。@param p_border
一个字符串，表示css样式的 border 属性。
参数
- p_border一个字符串，表示css样式的 border 属性。
继承自
setBottom(p_bottom) 方法
设置 bottom 字段的值。@param p_bottom
控件的下边界与父容器下边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。
参数
- p_bottom控件的下边界与父容器下边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。
继承自
setCss(p_css) 方法
设置 css 字段的值。
@param p_css 一个 JSON 对象，表示控件的 CSS 样式。
参数
- p_css一个 JSON 对象，表示控件的 CSS 样式。 {@exclude mx.datacontrols.ScrollBar}
继承自
setCssClass(p_cssClass) 方法
设置 cssClass 字段的值
@param p_cssClass 一个String 对象，样式classname
参数
- p_cssClass一个String 对象，样式classname {@exclude mx.datacontrols.ScrollBar}
继承自
setDisplay(p_display) 方法
setDisplayIcon(p_displayIcon) 方法
setHeight(p_height) 方法
设置 height 字段的值。
注：子类UploadControl上传控件不支持百分比设置高度
@param p_height
控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。
参数
- p_height控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。
继承自
setLeft(p_left) 方法
设置 left 字段的值。
@param p_left
控件的左边界与父容器左边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。
参数
- p_left控件的左边界与父容器左边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。 {@exclude mx.datacontrols.ComplexForm} {@exclude mx.datacontrols.DataGridSearchBox} {@exclude mx.datacontrols.DynamicForm} {@exclude mx.datacontrols.SkinDataForm}
继承自
setPadding(p_padding) 方法
设置控件的内边距。
{@excude mx.containers.Wizard}
参数
- p_paddingcss 样式的 padding 属性。
继承自
setPosition(p_position) 方法
设置 position 字段的值。@param p_position
一个字符串，表示 css 样式的 position 属性。
参数
- p_position一个字符串，表示 css 样式的 position 属性。
继承自
setRight(p_right) 方法
设置 right 字段的值。@param p_right
控件的右边界与父容器右边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。
参数
- p_right控件的右边界与父容器右边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。
继承自
setTop(p_top) 方法
设置 top 字段的值。
@param p_top
控件的上边界与父容器上边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。
参数
- p_top控件的上边界与父容器上边界的像素距离，可以是数字（如 50），也可以是字符串（如 50%）。 {@exclude mx.datacontrols.ComplexForm} {@exclude mx.datacontrols.DataGridSearchBox} {@exclude mx.datacontrols.DynamicForm} {@exclude mx.datacontrols.SkinDataForm}
继承自
setWidth(p_width) 方法
设置 width 字段的值。@param p_width
控件的高度,可以是数字（如 500）、字符串（如“500px”或“50%”）.
参数
- p_width控件的高度,可以是数字（如 500）、字符串（如“500px”或“50%”）.
继承自
$wrap([p_obj]) 方法
返回一个 JQuery 对象。
参数
- p_obj可选的。默认值为“me.$e”。一个 JQuery 对象，或继承自 Control 的控件，或字符串，或 HTML DOM 元素。 如果参数为 JQuery 对象，则返回本身； 如果参数为继承自 Control 的控件，则返回控件的 $e 对象； 如果参数为字符串，则返回以字符串为选择器的 JQuery 对象； 如果参数为空，则返回控件本身的 $e 对象。
继承自
字段详细信息
autoInit 字段
详见 {MXComponent.autoInit} 属性。
默认值
false
controls 字段
获取容器包含的控件集合。集合中的单个控件也可能是一个容器。请使用 addControl 和
removeControl 方法向集合中添加或移除控件。
继承自
集合
该字段是一个集合数组字段。
集合中成员的类型为
mx.controls.Control。
集合索引
控件在集合中的序号（从 0 开始计数）。
enableBrowserContextMenu 字段
enabled 字段
获取控件是否可以对用户交互作出响应。如果该值为 true，则表示控件可以对用户交互作出响应；反之则不能。
请使用 setEnabled 方法设置该字段的值。@default true
继承自
默认值
true
imageKey 字段
imageUrl 字段
获取一个字符串，表示 TabPage 标签图标的 URL（如“~$/icons/save.png”）。请使用 setImageUrl 方法设置该字段的值。
必须设置TabControl的 displayIcon:true,该属性才能生效
layout 字段
获取和设置一个容器控件的布局器。该字段可选的值包括：
@example
下面是一个绝对定位布局的容器添加控件的示例：
var container = new mx.containers.Container({
layout: "mx.layouts.AbsoluteLayout"
});
var textEditor = new mx.editors.TextEditor({
layoutConfigs: {
left: 100,
top: 50
}
});
container.addControl(textEditor);
@example
下面是一个锚定布局的容器添加控件的示例：
var container = new mx.containers.Container({
layout: "mx.layouts.AnchorLayout"
});
var textEditor1 = new mx.editors.TextEditor({
id: "editor1",
layoutConfigs: {
left: "100",
top: 50
}
});
container.addControl(textEditor1);
var textEditor2 = new mx.editors.TextEditor({
id: "editor2",
layoutConfigs: {
left: "editor1, 100px",//坐标值以逗号分隔，逗号之前是锚定对象的 id ，逗号之后表示相对于锚定对象的偏移。
top: 50,//如果不设置锚定对象，则以当前父容器为锚定对象。
bottom: "editor1, 100px"
}
});
container.addControl(textEditor2);
继承自
示例 1
下面是一个绝对定位布局的容器添加控件的示例：
| JavaScript 代码 |
var container = new mx.containers.Container({
layout: "mx.layouts.AbsoluteLayout"
});
var textEditor = new mx.editors.TextEditor({
layoutConfigs: {
left: 100,
top: 50
}
});
container.addControl(textEditor); |
示例 2
下面是一个锚定布局的容器添加控件的示例：
| JavaScript 代码 |
var container = new mx.containers.Container({
layout: "mx.layouts.AnchorLayout"
});
var textEditor1 = new mx.editors.TextEditor({
id: "editor1",
layoutConfigs: {
left: "100",
top: 50
}
});
container.addControl(textEditor1);
var textEditor2 = new mx.editors.TextEditor({
id: "editor2",
layoutConfigs: {
left: "editor1, 100px",//坐标值以逗号分隔，逗号之前是锚定对象的 id ，逗号之后表示相对于锚定对象的偏移。
top: 50,//如果不设置锚定对象，则以当前父容器为锚定对象。
bottom: "editor1, 100px"
}
});
container.addControl(textEditor2); |
layoutConfigs 字段
name 字段
获取或设置选项卡页的名称。该字段也是选项卡页的唯一标识。
该字段仅能设置非数字类型的字符串，避免包含特殊字符。
控件初始化时必须设置该属性
padding 字段
获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素； “4px 2px 3px 1px”则表示上边距为 4 像素，右边距为 2
像素，下边距为 3 像素，左边距为 1 像素。请使用 setPadding 方法设置该字段的值。
继承自
visible 字段
$button 字段
获取一个 JQuery 对象，表示该选项卡页的按钮对象。