easy

DocsVersion : 0.1.0

Tab 选项卡组件

Define in : tab.js

该组件用于创建一个 TAB 选项卡,支持鼠标点击和悬停的切换触发,也支持横向和纵向滑动效果的切换。还可以设置其自动切换。

Tab( target, [ options ] )

依赖
JS : 不依赖
CSS : 依赖样式
HTML : 固定
参数
  • target
    String|
    Element|
    easyJS Object
    必需

    target 可以是选择器字符串、DOM 元素,也可以是 easyJS Object,仅对第一个匹配元素进行选项卡实例的绑定。

  • options
    Object
    可选

    多选形式的可配置参数。

下表列出多选可配置形式的参数的详细说明。

参数 数据类型 默认值 说明
auto Boolean false

是否自动切换选项卡。

duration Number 200

切换动画的运行时间,仅在 effects 参数不为 null 时才有效。

easing String swing

切换动画的缓动函数名称,仅在 effects 参数不为 null 时才有效。

effects String null

动画效果的名称。

slideX 横向滑动。

slideY 纵向滑动。

interval Number 3000

自动切换时的动画间隔,单位为毫秒。

init Function null

初始化的回调函数,该函数的 this 指向绑定了选项卡实例的元素。

trigger String click

触发选项卡切换的事件。

click 点击切换。

mouseenter 悬停切换。

方法
  • destroy

    销毁选项卡实例。

  • on

    对选项卡实例绑定事件,该方法接受2个参数,第一个参数是事件类型,第二个参数是事件处理器,返回实例便于链式调用。

  • un

    卸载选项卡实例的事件。该方法接受1个事件类型的参数。返回实例便于链式调用。

  • pause

    该方法用来暂停自动播放的选项卡实例。

  • play

    该方法用来继续暂停了的选项卡实例。

下表列出了支持的事件类型。

事件类型 说明 事件对象
change

切换完成后触发的事件。

event.index 当前选项卡面板元素的索引。

event.menu 当前选项卡的菜单元素。

event.target 当前选项卡面板元素。

init

change 是每次切换都回触发,init 是第一次切换才触发。init 事件是一个一次性事件。

event.index 当前选项卡的索引。

event.menu 当前选项卡的菜单元素。

event.target 当前选项卡的面板元素。

在使用 Tab 组件前,对其进行加载。

E.use( 'tab', function(){
    // 在回调中实例化选项卡
});

Tab 组件需要固定的 HTML 结构。

<div class="eui_tab">
    <ul class="tab_menu">
        <li class="current">菜单一</li>
        <li>菜单二</li>
        <li>菜单三</li>
    </ul>
    
    <div class="tab_wrapper">
        <div class="tab_content">
            <div>
                // 选项卡面板1
            </div>
            <div style="display:none">
                // 选项卡面板2
            </div>
            <div style="display:none">
                // 选项卡面板3
            </div>
        </div>
    </div>
</div>

Tab 组件需要依赖样式,初始化时对隐藏面板自行添加 style="display:none",当然也可以定义在外部 CSS 样式表中。

.eui_tab .tab_menu{ height:30px; background:#f0f0f0; padding-left:10px; width:310px; border-bottom:1px solid #ddd; }
.eui_tab .tab_menu li{ padding:0 15px; float:left; height:28px; line-height:28px; cursor:pointer; border:solid #f0f0f0; border-width:2px 1px 0; position:relative; }
.eui_tab .tab_menu .current{ background:#fff; color:#06c; border-color:#ddd; border-top-color:#2d89ef; height:29px; _margin-bottom:-1px; }
例子1

创建一个选项卡,使用 mouseenter 来触发切换。

  • 火星
  • 非洲
  • 酸奶
36年前的打印数据被还原,对它们的最新分析显示美国宇航局(NASA)可能已经在火星上发现了生命。这项研究成果被一个由数学家和科学家组成的国际团队于本周发表。
当非洲成为世界上增速最快的经济体之一时,为什么美国媒体仍将非洲描述为“一个无尽凄惨的大陆”?
日本研究发现,通过持续摄入含R-1乳酸菌的酸奶,可有效降低中小学生患流感的机率,其机理在于提高了一种杀灭坏细胞的NK细胞的活性,从而降低了病菌感染率。
new E.ui.Tab( '#tab1',{
    trigger : 'mouseenter'
});
例子2

创建一个选项卡,点击的时候横向滑动。

  • 火星
  • 非洲
  • 酸奶
36年前的打印数据被还原,对它们的最新分析显示美国宇航局(NASA)可能已经在火星上发现了生命。这项研究成果被一个由数学家和科学家组成的国际团队于本周发表。
当非洲成为世界上增速最快的经济体之一时,为什么美国媒体仍将非洲描述为“一个无尽凄惨的大陆”?
日本研究发现,通过持续摄入含R-1乳酸菌的酸奶,可有效降低中小学生患流感的机率,其机理在于提高了一种杀灭坏细胞的NK细胞的活性,从而降低了病菌感染率。
new E.ui.Tab( '#tab2', {
    effects : 'slideX',
    easing : 'easeOut'
});