09月13, 2018

轻量实用的 Tab 选项卡插件 - mo-tab

项目介绍

轻量实用的 Tab 选项卡插件,可支持:

  1. 自动轮播
  2. 全部 class 自定义
  3. 可配置优先显示块

地址

[ 项目地址 ] [ 效果预览 ]

使用说明

HTML结构

<div id="mo_tab">
    <header>
        <span class="active">选项一</span>
        <span>选项二</span>
        <span>选项三</span>
    </header>
    <div>
        <section class="show">
            内容一
        </section>
        <section>
            内容二
        </section>
        <section>
            内容三
        </section>
    </div>
</div>

配置实例

  1. 引入 mo-tab.js

  2. 实例化

    使用默认配置

     new MoTav('#mo_tab');
    
  3. 可选配置

     new MoTav('#wangzhe', {
         // header 选中状态的class,默认 active
         tabHeadActive: 'current',
    
         // content 当前显示内容的class,默认 show
         tabContenShow: 'current',
    
         // 切换方法,可选参数 'click' || 'mousemove',默认 'click'
         tirgger: 'mousemove',
    
         // 自动切换延迟时间(毫秒),默认 0 不开启
         delay: 3000,
    
         // 默认首先显示的选项,默认 1 显示第一块
         index: 2
     })
    

作者

漠白 : http://www.mobai.pro/

本文链接:http://www.mobai.pro/post/mo-tab.html

-- EOF --

Comments