专为 Rails 设计的前端模块化框架

Slide Box 是基于 Tao Component 的滑动容器组件。

用法

<%= link_to "从左到右", 'javascript:;', class: 'button button-slide-box-3' %>

<%= tao_slide_box direction: 'ltr', size: '50%', trigger_selector: '.button-slide-box-3', auto_hide: true do %>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie tempor ex, sit amet scelerisque lorem viverra et. Praesent id condimentum dui. Nam porta odio bibendum orci porta, eu euismod ipsum accumsan. Cras dignissim, urna a auctor scelerisque, eros ex tincidunt justo, condimentum blandit mi ante quis nulla. Vestibulum tortor enim, porta ut volutpat cursus, efficitur in justo. Fusce varius ante orci, eget malesuada sem rhoncus eget.</p>
<% end %>
从左到右

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie tempor ex, sit amet scelerisque lorem viverra et. Praesent id condimentum dui. Nam porta odio bibendum orci porta, eu euismod ipsum accumsan. Cras dignissim, urna a auctor scelerisque, eros ex tincidunt justo, condimentum blandit mi ante quis nulla. Vestibulum tortor enim, porta ut volutpat cursus, efficitur in justo. Fusce varius ante orci, eget malesuada sem rhoncus eget.

初始化选项

active
Boolean
Default: false

指定 Slide Box 的显示状态,切换显示状态的时候会有 transition 动画。

modal
Boolean
Default: false

指定是否在 Slide Box 显示的时候渲染一个半透明的遮罩背景。

with_close_button
Boolean
Default: false

指定是否在 Slide Box 里显示关闭链接。

auto_hide
Boolean
Default: false

在 Slide Box 处于显示状态的时候,是否允许 Slide Box 以外的点击操作自动关闭 Slide Box。

auto_destroy
Boolean
Default: false

是否在关闭 Slide Box 的时候自动移除组件。

trigger_selector
String
CSS selector
Default: ""

通过 CSS Selector 指定一个元素(通常是一个按钮或者链接),当点击这个元素的时候会切换 Slide Box 的显示/隐藏状态。

trigger_traversal
String
jQuery traversing method
Default: ""

配合 trigger_selector 属性来使用,通过指定的 jQuery traversing method(例如:next、prev等)来寻找 trigger 元素。默认会从整个 DOM 树中寻找 trigger 元素。

direction
String
btt / ttb / ltr / rtl
Default: btt

指定 Slide Box 滑动的方向,支持从下到上(btt)、从上到下(ttb)、从左到右(ltr)和从右到左(rtl)四个方向。

size
String / Number
CSS length value

指定 Slide Box 的大小,支持所有的 CSS 长度(包括百分比)。注意,如果 size 是小于0的数字,那么 Slide Box 的大小会被设置为 window width/height + size(px)

公共方法

remove
( )
Return: self

从 DOM 树中移除 Slide Box 组件。

全局公共方法:

Tao.SlideBox.closeAll
( )
Return: closed slide boxes

关闭所有已显示的 Slide Box,关闭的时候会有 transition 动画。

事件

tao:show

Slide Box 显示之后触发。

tao:hide

Slide Box 隐藏之后触发。

tao:beforeRemove

从 DOM 树中移除 Slide Box 之前触发。

tao:remove

从 DOM 树中移除 Slide Box 之后触发。