# 切换器/Switcher 通过不同的内容窗格进行动态变换。 ## 用法 切换器组件由若干拨动器和与它们相关联的内容项目组成。添加 `data-uk-switcher="{connect:'#ID'}"` 到包含拨动器的元素，将此属性内的ID指向具有相同ID的包含内容项目的元素。添加 `.uk-switcher` 类到同一个元素中。通常，切换器和其他组件搭配使用，这里将展示其中一部分。 ### 示例  ### Code ``` <!-- 这是包含拨动元素的容器 --> <ul data-uk-switcher="{connect:'#my-id'}"> <li><a href="">...</a></li> </ul> <!-- 这是内容项目的容器 --> <ul id="my-id" class="uk-switcher"> <li>...</li> </ul> ``` * * * ### 在内容中切换条目/Switch items from within content 在某些情况下，你想要从显示的内容中操作切换到另一个内容节点。添加 `data-uk-switcher-item` 属性使之成为可能。为了指向目标条目，你必须将 data 属性设置为相应的标号。 #### Example  #### Markup ``` <!-- 这是包含拨动元素的导航 --> <ul data-uk-switcher="{connect:'#my-id'}"> <li><a href="">...</a></li> </ul> <!-- 这是内容条目的容器 --> <ul id="my-id" class="uk-switcher"> <li> ... <a href="" data-uk-switcher-item="0">...</a></li> <li> ... <a href="" data-uk-switcher-item="1">...</a></li> </ul> ``` 将 data 属性设置为 `next` 和 `previous` 将会切换到相邻的条目 #### Markup ``` <li> ... <a href="" data-uk-switcher-item="next">...</a></li> <li> ... <a href="" data-uk-switcher-item="previous">...</a></li> ``` * * * ### 关联多个项目 切换器也可以管理多个内容容器。只需要在 `connect` 参数中填入需要关联的容器的ID，用逗号隔开。 #### 示例  #### Code ``` <!-- 这是包含拨动元素的导航菜单 --> <ul data-uk-switcher="{connect:'#my-id-one, #my-id-two'}"> <li><a href="">...</a></li> </ul> <!-- 这些是包含着内容项目的容器们 --> <ul id="my-id-one" class="uk-switcher"> <li>...</li> </ul> <ul id="my-id-two" class="uk-switcher"> <li>...</li> </ul> ``` * * * ## 动画 切换器组件允许你为它添加各式的切换动画。你所需要做的就是添加 `animation` 参数到data属性中，然后设置你希望使用的动画。查阅下面的列表，了解我们提供的动画吧。 | Class | 描述 | | --- | --- | | `fade` | 元素淡入 | | `scale` | 元素由小变大 | | `slide-top` | 元素从顶部滑入 | | `slide-bottom` | 元素从底部滑入 | | `slide-left` | 元素从左边滑入 | | `slide-right` | 元素从右边滑入 | | `slide-horizontal` | 内容项目水平方向滑动，方向基于元素相邻关系。 | | `slide-vertical` | 内容项目垂直方向滑动，方向基于元素相邻关系。 | ### 示例  ``` <!-- 包含拨动元素的容器 --> <ul data-uk-switcher="{connect:'#my-id', animation: 'fade'}"> <li><a href="">...</a></li> </ul> <!-- 包含内容项目的容器 --> <ul id="my-id" class="uk-switcher"> <li>...</li> </ul> ``` * * * ### 自定义动画 你同样可以使用 [动画组件](animation.html) 中的 `uk-animation-*` 类来应用多个动画。通过这种方式你甚至可以创建你的自定义类来为切换器应用不同的动画效果。 #### 示例  #### Code ``` <!-- 包含拨动元素的容器 --> <ul data-uk-switcher="{connect:'#my-id', animation: 'uk-animation-fade, uk-animation-slide-left'}"> <li><a href="">...</a></li> </ul> <!-- 包含内容项目的容器 --> <ul id="my-id" class="uk-switcher"> <li>...</li> </ul> ``` * * * ## 切换器与二级导航 轻松地将切换器应用于 [二级导航组件](subnav.html) 中. ### 示例  ### Code ``` <!-- 这是包含拨动元素的二级导航 --> <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#my-id'}"> <li><a href="">...</a></li> </ul> <!-- 包含内容项目的容器 --> <ul id="my-id" class="uk-switcher"> <li>...</li> </ul> ``` * * * ## 切换器与选项卡 作为一个特例，添加 `data-uk-tab="{connect:'#ID'}"` 属性，使用“tab”参数替代“switcher”，使得切换器和 [选项卡组件](tab.html "Tab component") 相互结合。 ### 示例  ### Code ``` <!-- 这是包含拨动元素的选项卡式导航 --> <ul class="uk-tab" data-uk-tab="{connect:'#my-id'}"> <li><a href="">...</a></li> </ul> <!-- 包含内容项目的容器 --> <ul id="my-id" class="uk-switcher uk-margin"> <li>...</li> </ul> ``` 注意 当使用选项卡组件的 `.uk-tab-bottom` 类的时候，导航和内容需要按相反的顺序放置，这样内容才会显示在选项卡的上方。 * * * ### 垂直选项卡 使用 [网格组件](grid.html "Grid component")正确地显示带有垂直排列的选项卡导航的内容。 #### 示例  #### Code ``` <!-- 位于左边的选项卡式导航 --> <div class="uk-grid"> <div class="uk-width-medium-1-2"> <!-- 包含拨动元素的垂直选项卡式导航 --> <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#my-id'}">...</ul> </div> <div class="uk-width-medium-1-2"> <!-- 包含内容项目的容器 --> <ul id="my-id" class="uk-switcher">...</ul> </div> </div> <!-- 位于右边的选项卡式导航 --> <div class="uk-grid"> <div class="uk-width-medium-1-2 uk-push-1-2"> <!-- 包含拨动元素的垂直选项卡式导航 --> <ul class="uk-tab uk-tab-right" data-uk-tab="{connect:'#my-id'}">...</ul> </div> <div class="uk-width-medium-1-2 uk-pull-1-2"> <!-- 包含内容项目的容器 --> <ul id="my-id" class="uk-switcher">...</ul> </div> </div> ``` * * * ## 切换器与按钮 切换器同样可以应用于 [按钮或按钮组](button.html "Button component") 中。只需要添加切换器data属性到包含了一组按钮的 `&lt;div&gt;` 元素中或者添加到带有 `.button-group` 类的元素。 ### 示例  ### Code ``` <!-- 包含拨动按钮的容器 --> <div data-uk-switcher="{connect:'#my-id'}"> <button class="uk-button" type="button">...</button> </div> <!-- 包含内容项目的容器 --> <ul id="my-id" class="uk-switcher uk-margin">...</ul> <!-- 包含拨动按钮的按钮租 --> <div class="uk-button-group" data-uk-switcher="{connect:'#my-id'}"> <button class="uk-button" type="button">...</button> </div> <!-- 包含内容项目的容器 --> <ul id="my-id" class="uk-switcher uk-margin">...</ul> ``` * * * ## 切换器与导航菜单 若需将切换器应用于 [导航菜单组件](nav.html "Nav component")，添加data属性到导航菜单的 `&lt;ul&gt;` 元素中。使用 [网格组件](grid.html "Grid component") 将导航菜单和内容项放置在同一个网格布局中。 ### 示例  ### Code ``` <div class="uk-grid"> <div class="uk-width-medium-1-4"> <!-- 包含拨动元素的导航菜单 --> <ul class="uk-nav uk-nav-side" data-uk-switcher="{connect:'#my-id'}"> <li><a href="">...</a></li> </ul> </div> <div class="uk-width-medium-3-4"> <!-- 包含内容项目的容器 --> <ul id="my-id" class="uk-switcher"> <li>...</li> </ul> </div> </div> ``` * * * ## JavaScript 选项 这是一个关于如何通过属性设置选项的例子： ``` data-uk-switcher="{active:1}" ``` | 选项 | 可能的值 | 默认值 | 描述 | | --- | --- | --- | --- | | `connect` | CSS selector | false | 被关联的条目容器 | | `toggle` | CSS selector | '&gt; *' | 拨动CSS选择器，通过点击触发内容的切换行为。 | | `active` | integer | 0 | 初始化时，呈激活状态的内容项目索引值 | | `animation` | mixed | false | 预定义的动画名称或 uikit动画的类名。 | | `swiping` | boolean | true | 启用或禁用通过滑动改变内容 | ### 事件 你可以为以下事件绑定回调函数，用于自定义功能： | 事件名称 | 参数 | 描述 | | --- | --- | --- | | `show.uk.switcher` | event, active item | 切换器条目显示或改变时触发 | ### Example ``` $('[data-uk-switcher]').on('show.uk.switcher', function(event, area){ console.log("Switcher switched to ", area); }); ```