Tab控件标准重新修订

[otakustay]

以下是新的Tab控件UI标准，供大家讨论

功能描述

Tab控件可以用于标签页的切换。每个标签可以对应一个容器元素，Tab控件自动控制容器的切换。

Tab标签自身会创建一个导航条，包含各个标签的元素。

继承层级

Tab -> Control

prototype.type

"Tab"

配置项及属性

以下属性可在构造函数中传入，也可在运行过程中通过set或setProperties修改。

• {Array} tabs：指定标签页的配置。
• {boolean} allowClose：如果此项为 true ，则每个标签上会出现一个关闭元素，点击该元素会自动删除该标签。默认值为 false 。
• {number} activeIndex：指定当前激活的标签的下标。默认值为 0 。

其中tabs中的每一项包含以下内容：

• {string} title：标签的标题，必须有。
• {string=} panel：标签对应的面板元素的id，可选。

其中activeIndex的变化如下：

• 正常情况下，添加或移除标签，activeIndex始终指向当前激活的标签的下标。
• 如果移除激活的标签，则该标签后面的那个标签会被激活。如果该标签是最后一个标签，则在移除后的最后一个标签被激活。
• 如果当前没有任何标签，则activeIndex的值为 -1 。
• 如果修改了tabs导致activeIndex超出标签的数量，则其值将会被修正为 0 。

控件主元素

Tab控件的控件主元素必须是<div>元素，如果构造控件时没给定主元素，则创建一个空的<div>元素作为主元素。

HTML声明的导航条

Tab控件的主元素中可以包含一个导航条元素，该导航条元素结构必须如下所示：

<ul data-role="navigator">
    <li data-for="a">tab1</li>
    <li data-for="b">tab2</li>
    <li data-for="c">tab3</li>
</ul>

导航条元素满足以下条件：

• 元素必须为<ul>或<ol>等可包含<li>元素的容器。
• 必须有data-role="navigator"属性。
• 子元素必须是<li>元素。

当Tab控件发现导航条后，会采取以下行为：

1. 从其下的<li>元素抽取标签选项，以data-for为panel属性，以innerText为title属性。
2. 使用该选项 覆盖构造函数传入的tabs选项 。
3. 删除该导航条元素，后续Tab控件会自己建立符合需求的导航条。

HTML声明子元素

当符合以下 全部 条件时：

• 构造函数未传入tabs选项，或该选项为一个空数组。
• 主元素中没有导航条元素。
• 主元素下有其它子元素。

则Tab控件自动将每一个子元素作为一个标签配置项，元素的title属性作为配置项的title属性，元素的id属性作为配置项的panel属性。

公共方法

{void} add({Object} config)

在最后面添加一个标签，其中config包含title和可选的panel选项。

{void} insert({Object} config, {number} index)

在指定位置添加一个标签，其中config包含title和可选的panel选项。

{void} remove({Object} config)

移除指定的标签，其中config必须是控件tabs属性中已有的对象，通过引用判断相等。

{void} removeAt({number} index)

移除指定位置的标签。

{void} activate({Object} config)

激活指定的标签，其中config必须是控件tabs属性中已有的对象，通过引用判断相等。

{void} activateAt({number} index)

激活指定位置的标签。

事件

add

当添加或插入一个标签时触发，事件对象包含：

• tab：添加的标签的配置项。

remove

通过方法或点击关闭标签的元素从而移除一个标签时触发，事件对象包含：

• tab：移除的标签的配置项。

activate

因任何情况导致一个标签被激活时触发，事件对象包含：

• activeIndex：当前激活的标签的下标
• tab：当前激活的标签配置项

注意，当因为插入或移除标签导致activeIndex变化，但当前激活的标签并没有改变时， 不会 触发该事件。

问题

1. 是否需要setActiveIndex、getActiveIndex等方法，现在可以使用set('activeIndex')来操作
2. 是否添加属性使得控件在导航条最后面有一个“添加”按钮，点击后触发add事件，从而实现可变的标签页功能
3. 移除一个标签的时候，对应的面板是否有默认的操作（隐藏？删除？）

[otakustay]

修订：

add和remove事件的事件对象中增加index属性，指示添加或移除的标签所在的下标

[errorrik]

属性命名

建议allowClose -> closable

方法参数命名

{Object} config，这个改成{Object} tab吧

对HTML声明的导航条处理策略

1. 使用该选项 覆盖构造函数传入的tabs选项 。
2. 删除该导航条元素，后续Tab控件会自己建立符合需求的导航条。

我觉得更合理的是：
如果有构造函数传入的tabs属性，用其重新生成导航条。否则，不需要重新建立导航条，直接在上面附加样式和行为。

关于“问题”的问题

1. 是否需要setActiveIndex、getActiveIndex等方法，现在可以使用set('activeIndex')来操作

现在那个activeAt我觉得可以不要。至于这两个方法，可以有可以没有。

1. 是否添加属性使得控件在导航条最后面有一个“添加”按钮，点击后触发add事件，从而实现可变的标签页功能

有这需求么？？看大家咯

1. 移除一个标签的时候，对应的面板是否有默认的操作（隐藏？删除？）

我觉得不能删除面板。可以隐藏

[otakustay]

对HTML声明的导航条处理策略

最初的版本是用户有声明导航条元素，直接用那个元素，不删了重建的，可是碰到些问题。

因为默认的导航条是ul > li的结构，但如果直接复用，用户完全可能用div > span结构，这会导致后续添加tab时，要智能检测用户用的是<li>还是<span>还是啥别的，工作量非常大。

所以为了偷懒，又不想限制用户一定要用ul > li（我不觉得限制得了），就干脆删了原来的重建一个。反正在控件管理下的

其它

现在那个activeAt我觉得可以不要

说白了activateAt(index)就是set('activeIndex', index)，只是因为add和remove都有个对应的传下标的方法在，保持统一性就留出来了。要去掉也OK，如果其他人没意见，到截止时我就去掉这方法。

[errorrik]

导航条处理策略

删了重建的问题是，用户可能在上面自定义了自己的class做特殊样式，或其他什么东西，就没了。

activeAt

我们的ui体系，统一性在于，设置相关的都是set[...]

[otakustay]

导航条处理策略

那能不能这样，我们要求用户必须使用<ul>或<ol>元素，不得用其它元素作为导航条。然后导航条里面的innerHTML是肯定会被覆盖的（更换datasource的时候有清理掉的需要），所以里面的<li>就没什么好说的了，要是在<li>上加样式到时候被冲掉了不负责。

那样又引出另一个问题，如果导航条元素已经存在，要移动一下放到main的最前面来吗？

activeAt

OK，删。

[errorrik]

导航条处理策略

不如kiss点，用data-role="navigator"下的第一个element的tagName？

还有，如果已经存在，就不应该移动它了吧。举个例子，ie的contentEditable，插入一个a，会自动把href换成绝对路径。这就是做得越多错的越多的典型……

[otakustay]

不如kiss点，用data-role="navigator"下的第一个element的tagName？

好吧又变回第一版了……不过需要声明的是，即便我能处理元素类型的问题，在导航条的子元素上有其它的属性或者class，也是会被刷掉的，肯定会用navigator.innerHTML生成各个tab项，别指望会留下来了。

[errorrik]

没变回第一版啊，第一版是不支持data-role="navigator"的。

[otakustay]

那个第一版是我本地的一套实现，从来没commit上来过，你们没看到过哈，那个版本里有

var navNodeName = this.navigator.nodeName.toLowerCase();
var nodeName = navNodeName === 'ul' || navNodeName === 'ol' ? 'li' : 'span';
// ...

等讨论时间截止，没啥变化的话我会使用现在讨论的方案

[errorrik]

喔喔，看来做方案和泡妞一样，通常第一反应看上的是最好的

[otakustay]

我仔细思考了一下，认为我们应该对控件的HTML结构有更强的控制，理由如下：

• 乱用HTML，UI的CSS无法生效
• 乱用HTML，导致控件实现有太多的分支，比如这个Tab还要算navigator下的子元素是啥

我建议控件强制要求用户使用固定的结构，比如Tab的navigator如果有，则必须是<ol>或<ul>，里面是一堆li > span结构，不然就出错不管。

我相信用户都写HTML了，写个<ul>没什么难度，为什么要ESUI去纵容用户呢？

另外，保留navigator元素是可以，但如果datasource之类的关键属性有变化，还是会直接刷掉的。

[otakustay]

在 b9e04ad 中，支持Tab控件从自定义的导航条元素中提取内容后保留该元素，但不提供 猜测元素标签 的功能，永远只使用<li>标签，因此Tab控件的导航条元素只能是<ul>或<ol>元素。

推荐的结构如下：

<ul>
    <li data-for="panel1"><span>tab1</span></li>
</ul>

原则上 不建议 自己提供导航条元素，因为allowClose等属性会影响导航条的内容，建议让控件自动生成正确的结构。

[otakustay]

关，后续单独发标准文档Review