Skip to content

Latest commit

 

History

History
316 lines (200 loc) · 8.6 KB

api-tab.md

File metadata and controls

316 lines (200 loc) · 8.6 KB
Raw

Tab

SaberUI的Tab控件

Dependencies

Extend

Control

Option

  • activeIndex: 默认选中标签的索引

  • orientation: 标签页排列方向

  • itemTemplate: 标签页内容构造模板

  • scroll: 是否支持拖动。类型Boolean，默认值false

    注：此属性为true不能保证拖动正确启用，需确保插件./plugin/scroll已正确引入，否则此属性配置无效

  • plugin.scroll: 拖动插件初始化配置。类型Object，参数可选。当scroll为true时才有效

    此参数可用配置项，请参考saber-scroll

更多配置项，请参考父类Control

Property

注：所有实例属性禁止直接访问和操作，请使用get、set方法操作，若属性存在对应的getter或setter方法，则优先使用getter或setter

activeIndex

当前活动的标签页的索引，类型Number，默认值0

注：若想改变选中项，请直接使用select方法，尽量避免直接更改此属性值。

orientation

标签页排列方向，类型String，默认值horizontal，可取值：

  • horizontal: 横向排列
  • vertical: 纵向排列

itemTemplate

标签页页卡内容的模板，类型String，默认值${title}

scroll

是否启用拖动，类型Boolean，默认值false

注：目前此属性为ReadOnly，set操作不会如愿的启用|禁用拖动。

tabs

标签页的列表数据，类型Array，默认值[]

例子

// 每一项是具有title和panel属性的Object。
// title属性为字符串，代表显示的标题。
// panel属性指定一个容器HTMLElement的id，为可选属性。
[
    { title: 'one', panel: 'panel1' },
    { title: 'two', panel: 'panel2' },
    { title: 'three', panel: 'panel3' },
    { title: 'four' }
]

更多实例属性，请参考父类Control

Method

.add(tabItem)

添加一个标签页

tabItem: 标签页配置对象，类型Object，包含项：

  • title: 标签页的标题，类型String
  • panel: 标签页对应的容器的id，类型String，此属性可选

例子

var tab = new Tab({ tabs: [ { title: 't1', panel: 'a' } ] });
console.info( tab.get( 'tabs' ) ); // [ { title: 't1', panel: 'a' } ]
tab.add( { title: 't2' } );
console.info( tab.get( 'tabs' ) ); // [ { title: 't1', panel: 'a' }, { title: 't2' } ]

.insert(tabItem, index)

在指定位置添加一个标签页

tabItem: 标签页配置对象，类型Object，包含项：

  • title: 标签页的标题，类型String
  • panel: 标签页对应的容器的id，类型String，此属性可选

index: 新标签页要插入的位置索引，类型Number

例子

var tabItems = [ { title: 't1' }, { title: 't2' } ];
var tab = new Tab({ tabs: tabItems });
console.info( tab.get( 'tabs' ) ); // [ { title: 't1' }, { title: 't2' } ]
tab.insert( { title: 't3' }, 1 );
console.info( tab.get( 'tabs' ) ); // [ { title: 't1' }, { title: 't3' }, { title: 't2' } ]

.remove(tabItem)

移除一个标签页

tabItem: 标签页配置对象，类型Object，包含项：

  • title: 标签页的标题，类型String
  • panel: 标签页对应的容器的id，类型String，此属性可选

注：tabItem对比检索使用的是全等(===)，使用时需小心

例子

var tabItems = [ { title: 't1' }, { title: 't2' } ];
var tab = new Tab({ tabs: tabItems });
console.info( tab.get( 'tabs' ) ); // [ { title: 't1' }, { title: 't2' } ]
tab.remove( { title: 't2' } );
console.info( tab.get( 'tabs' ) ); // [ { title: 't1' } ]

.removeByIndex(index)

移除指定索引的标签页

index: 需要移除标签页的索引，类型Number

例子

var tabItems = [ { title: 't1' }, { title: 't2' } ];
var tab = new Tab({ tabs: tabItems });
console.info( tab.get( 'tabs' ) ); // [ { title: 't1' }, { title: 't2' } ]
tab.removeByIndex( 1 );
console.info( tab.get( 'tabs' ) ); // [ { title: 't1' } ]

.select(index)

选择激活标签

index: 需要激活的标签页索引，类型Number

例子

var tabItems = [ { title: 't1' }, { title: 't2' } ];
var tab = new Tab({ tabs: tabItems });
console.info( tab.get( 'activeIndex' ) ); // 0
tab.select( 1 );
console.info( tab.get( 'activeIndex' ) ); // 1

.getItemHTML(tabItem)

获取标签页内容的HTML

返回以属性itemTemplate为模板和参数tabItem为数据的渲染结果字符串

tabItem: 标签页配置对象，类型Object，包含项：

  • title: 标签页的标题，类型String
  • panel: 标签页对应的容器的id，类型String，此属性可选

例子

var tab = new Tab();
var html = tab.getItemHTML( { title: 'tab1', panel: 'p' } );
console.info( html ); // 'tab1'

.beforeChange(oldIndex, newIndex)

切换选项卡前的校验，主要给予使用者更多的灵活控制

默认返回true，不允许切换则需返回false

例子

var tabItems = [ { title: 'a' }, { title: 'b' } ];
var tab = new Tab( { tabs: tabItems, activeIndex: 1 } );
console.info( tab.get( 'activeIndex' ) ); // 1
tab.beforeChange = function ( oldIndex, newIndex ) {
	return newIndex > 0;
};
tab.select( 0 );
console.info( tab.get( 'activeIndex' ) ); // 1

更多实例方法，请参考父类Control

Event

add

当添加标签时触发，附带参数依次为ev、data:

ev: 事件信息对象

  • type: 事件类型名，类型String
  • target: 触发事件的按钮控件对象，类型Tab

data: 当前移除的标签信息，类型Object，包含项：

  • index: 标签索引，类型Number
  • tab: 标签数据对象，类型Object，包含项：
    • title: 标签的标题，类型String
    • panel: 标签对应的容器的id，类型String，此属性可选

例子

var tabItems = [ { title: 'a' }, { title: 'b' } ];
var tab = new Tab( { tabs: tabItems, activeIndex: 1 } );
tab.on( 'add', function ( ev, data ) {
	console.info( ev, data );
});
tab.add( { title: 'c', panel: 'd' } );

remove

当移除标签时触发，附带参数依次为ev、data:

ev: 事件信息对象

  • type: 事件类型名，类型String
  • target: 触发事件的按钮控件对象，类型Tab

data: 当前移除的标签信息，类型Object，包含项：

  • index: 标签索引，类型Number
  • tab: 标签数据对象，类型Object，包含项：
    • title: 标签的标题，类型String
    • panel: 标签对应的容器的id，类型String，此属性可选

例子

var tabItems = [ { title: 'a' }, { title: 'b' } ];
var tab = new Tab( { tabs: tabItems, activeIndex: 1 } );
tab.on( 'remove', function ( ev, data ) {
	console.info( ev, data );
});
tab.removeByIndex( 1 );

change

当切换标签时触发，附带参数依次为ev、data:

ev: 事件信息对象

  • type: 事件类型名，类型String
  • target: 触发事件的按钮控件对象，类型Tab

data: 当前激活标签的信息对象，类型Object，包含项：

  • index: 标签索引，类型Number
  • tab: 标签数据对象，类型Object，包含项：
    • title: 标签的标题，类型String
    • panel: 标签对应的容器的id，类型String，此属性可选

例子

var tabItems = [ { title: 'a' }, { title: 'b' } ];
var tab = new Tab( { tabs: tabItems, activeIndex: 1 } );
tab.on( 'change', function ( ev, data ) {
	console.info( ev, data );
});

更多事件，请参考父类Control

===

Saber