LuLu UI组件中文文档 » 选项卡切换

Fork Me

选项卡切换

一、选项卡切换

面向本项目设计的选项卡切换效果,对类名和层级等无依赖,大家在布局的时候可以很灵活。

  1. 语法和API

    var Tab = require('Tab.js');
    new Tab(el, options);

    或者:

    require('Tab.js');
    el.tab(options);

    其中el是点击的选项卡元素,options为可选参数,具体见下表:

    参数名称 支持类型 默认值 释义
    eventType String click 事件类型,本方法写得最早,因此,我写文档的时候发现,并没有对hover事件做支持处理。所以,此参数目前没有用,抱歉啊~~
    index String|Number 'auto' 选中选项卡的索引值。默认'auto'表示根据选项卡上的状态类名,如.checked获取index值。
    history Boolean true 是否通过url无刷新标记选项卡地址。默认true表示选项卡切换时候查询地址变化。IE10+增强功能。IE9-使用hash标记。
    callback Function $.noop 点击切换的回调。其中,上下文this指点击元素DOM对象。支持4个参数。分别表示:当前点击元素选项卡元素,恢复到非选中态的选项卡元素,显示的面板元素,恢复到非选中态的面板元素。

    本组件基于状态类名.checked控制样式变化,选项卡元素和对应的面板元素都是如此。

    本项目通用选项卡基本HTML结构如下:

    <div id="tabView" class="ui-tab-tabs">
        <a href="javascript:" class="ui-tab-tab checked" data-rel="tabTarget1">选项卡切换文档</a>
        <a href="javascript:" class="ui-tab-tab" data-rel="tabTarget2">选项卡切换业务JS分离演示</a>
    </div>
    <div class="ui-tab-contents">
        <div class="ui-tab-content checked"></div>
        <div class="ui-tab-content"></div>
    </div>

    可以看到,本页面的选项卡在现代浏览器下点击是滑来滑去的效果,是使用了如下JS(如果没有callback就是直来直往):

    new Tab($('#tabView > a.ui-tab-tab').filter(function () {
        return /^(:?javas|#)/.test(this.getAttribute('href'));
    }), {
        callback: function () {
            var line;
            // IE10+
            if ($.isFunction(history.pushState)) {
                line = $(this).parent().find('i');
                if (!line.length) {
                    line = $('<i></i>').addClass('ui-tab-line').prependTo($(this).parent());
                }
                line.css({
                    display: 'block',
                    width: $(this).width(),
                    left: $(this).position().left
                });
            }
        }
    });

    如果你的选项卡是url页面刷新跳转之流,则只需要静态HTML即可,无需任何JS绑定或事件处理,自然data-rel属性也不需要。HTML如下:

    <div class="ui-tab-tabs">
        <a href="/a/" class="ui-tab-tab">选项卡切换文档</a>
        <a href="/b/" class="ui-tab-tab checked">选项卡切换业务JS分离演示</a>
    </div>

    HTML结构简单且干净。

    如果是页面内切换,例如本demo演示文档。则对应的面板元素,也就是切换的主体元素,可以通过选项卡元素的data-rel属性与之关联。data-rel属性值可以是面板元素的id也可以是类名(多个元素一起切换)。本文档页面选项卡和面板是一对一的关系,因此使用了id进行关联。

    当我们点击第一个含有“基建说明”文字的选项卡,组件就是找到其data-rel对应的面板元素,并添加状态类名.checked,实现显隐效果。

    有小伙伴可能会疑问,为何不直接JS中show()/hide(), 因为UI层变化多端,选项卡切换有可能是slide效果,使用类名就方便我们使用CSS控制了。

二、作为插件单独使用

引用下面CSS:

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Tab.css">

JS为:

<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Tab.js"></script>

单独使用Demo演示

代码如下:

// 点击第二个选项卡
$('a[data-rel=tabTarget2]').click(function() {
    var container = $('#whatEverId');
    if (container.isLoading()) {
        setTimeout(function() {
            container.html('<img src="xxx.jpg" height="' + (100 + 300 * Math.random()) + '">').unloading();
        }, 1000);
    }
});

可以看到,点击选项卡后执行的方法,与Tab绑定的callback没有任何关系,也就是业务代码就是业务代码,组件代码就是组件代码,前端分离,不耦合,维护方便bug少!

唯一需要注意的是,要先绑定选项卡的click事件,然后在执行Tab方法。

Fork Me 返回顶部