tab - 标签切换控件

用于页面上同一组标点击切换时,改变选中状态,触发切换后的事件回调

如:

tab控件

Allocate

tab控件所在脚本

{lib}util/tab/tab.js

添加标签切换控件依赖文件如下

var f = function(){
    var _  = NEJ.P,
        _p = _('nej.ut');
    //参数的选择详见tab.js
    var tab = _p._$$Tab._$allocate({list:tablist,
                             index:0,
                             event:'click',
                             selected:'js-selected',
                             onchange:onTabChange});
    function onTabChange(_event){
        console.log('last:'+_event.last+',index:'+_event.index);
    }
}
define(['{lib}util/tab/tab.js'],f);

Explain

参数

list是tab的节点列表

index是默认选中第几个tab

event是tab切换响应事件,默认click,可以传入mouseover或其他鼠标事件响应tab切换

selected tab选中时样式

disabled 是tab上有disabled的样式,事件切换tab时无效

onchange是tab有切换时回到,传入的参数查last是在tab切换前的第几个tab是选中的,index是当前被选中的tab

更多的参数信息请参照tab.js api说明

Recycle

tab._$recycle();

API

tab控件还提供了api,可以快速创建出tab控件 e.$tab(_parent,_options) 将某个父容器下的相关节点构造成一个TAB控件

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _p = _('nej.ut');
    var _option =   {index:0,
                     event:'click',
                     selected:'js-selected',
                     onchange:onTabChange}
    _e._$tab(_parent,_option);

    function onTabChange(_event){
        console.log('last:'+_event.last+',index:'+_event.index);
    }
}
define(['{lib}util/tab/tab.js'],f);

Tab external interface

tab._$go(_index) 跳转到第几个tab

tab._$getIndex() 获取当前选中项的index

Known Issues

Demo

Tab控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus