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

一、选项卡切换

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

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演示