选择器

通过不同的内容窗格进行动态变换。

选择器关联

选择器组件由若干触发器和与它们相关联的内容项目组成。添加 data-switcher="{connect:'#ID'}" 到包含触发器的元素,将此属性内的 ID 指向具有相同 ID 的包含内容项目的元素。添加 switcher 类到关联内容。通常,触发器和其他组件搭配使用,这里将展示其中一部分。

示例

  • 触发器一的详细内容
  • 触发器二的详细内容
  • 触发器三的详细内容

代码

<u data-switcher="{'connect':'#my-id'}">
    <li>...</li>
    ...
</ul>
<ul id="my-id" class="switcher">
    <li>...</li>
    ...
</ul>

激活的条目

示例

  • 触发器一的详细内容
  • 触发器二的详细内容
  • 触发器三的详细内容

代码

<ul class="subnav subnav-pill" data-switcher="{'connect':'#my-id-2', 'active': 1}">
    <li><a href="#"></a></li> 
    ...
</ul>
<ul id="my-id-2" class="switcher">
    <li>1...</li> 
    ...
</ul>

关联多个容器

示例

  • 容器一触发器一的详细内容
  • 容器一触发器二的详细内容
  • 容器一触发器三的详细内容
  • 容器二触发器一的详细内容
  • 容器二触发器二的详细内容
  • 容器二触发器三的详细内容

代码

<ul class="subnav subnav-pill" data-switcher="{'connect':'#my-id-3,#my-id-4'}">
    <li><a href="#"></a></li> 
    ...
</ul>
<ul id="my-id-3" class="switcher">
    <li>1...</li> 
    ...
</ul>
<ul id="my-id-4" class="switcher">
    <li>1...</li> 
    ...
</ul>

显示动画

选择器组件允许为各个条目的切换过程添加动画,全部可用动画参考 动画组件

animation 属性 描述
fade 元素淡入
scale-up 元素由小变大
... ...

示例

  • 触发器一的详细内容
  • 触发器二的详细内容
  • 触发器三的详细内容

代码

<ul class="subnav subnav-pill" data-switcher="{'connect':'#my-id-5', 'animation': 'slide-right'}">
    <li><a href="#"></a></li> 
    ...
</ul>
<ul id="my-id-5" class="switcher">
    <li>1...</li> 
    ...
</ul>

不关联内容

示例

代码

<ul class="subnav subnav-pill" data-switcher>
    <li><a href="#">...</a></li>
    ...
</ul>