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

Dialog 是基于 Tao Component 的弹框容器组件。

用法

<%= link_to '点我弹框', 'javascript:;', class: 'button button-dialog' %>
<%= tao_dialog size: 'l', trigger_selector: '.button-dialog', modal: 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. Praesent sit amet leo odio. Duis quis leo sit amet arcu ultricies vehicula. Pellentesque magna nunc, finibus nec tincidunt nec, eleifend eget mauris. Cras nunc lorem, fermentum eu justo sit amet, placerat dapibus arcu. Donec vel nunc elit. Nam commodo turpis in sem feugiat, auctor dictum dolor pretium. In quis luctus arcu. Vestibulum placerat velit eget placerat porttitor. Aliquam commodo lorem eget urna sodales hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</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. Praesent sit amet leo odio. Duis quis leo sit amet arcu ultricies vehicula. Pellentesque magna nunc, finibus nec tincidunt nec, eleifend eget mauris. Cras nunc lorem, fermentum eu justo sit amet, placerat dapibus arcu. Donec vel nunc elit. Nam commodo turpis in sem feugiat, auctor dictum dolor pretium. In quis luctus arcu. Vestibulum placerat velit eget placerat porttitor. Aliquam commodo lorem eget urna sodales hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Confirm 和 Message

Tao UI 还提供了两个 Dialog 的衍生组件,确认弹框(Confirm Dialog)和消息弹框(Message Dialog):

<%= link_to '确认弹框', 'javascript:;', class: 'button button-confirm-dialog' %>
<%= tao_confirm_dialog trigger_selector: '.button-confirm-dialog' do %>
  确定要这么做吗?
<% end %>

<%= link_to '消息弹框', 'javascript:;', class: 'button button-message-dialog' %>
<%= tao_message_dialog trigger_selector: '.button-message-dialog' do %>
  感谢你的支持!
<% end %>
确认弹框
确定要这么做吗?
消息弹框
感谢你的支持!

初始化选项

active
Boolean
Default: false

指定 Dialog 的显示状态。

with_close_button
Boolean
Default: false

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

modal
Boolean
Default: false

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

auto_activate
Boolean
Default: false

在 Dialog 被添加到 DOM 树之后,自动设置为显示状态(会出现 transition 动画)。

auto_destroy
Boolean
Default: false

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

trigger_selector
String
CSS selector
Default: ""

通过 CSS Selector 指定一个元素(通常是一个按钮或者链接),当点击这个元素的时候会显示 Dialog。

trigger_traversal
String
jQuery traversing method
Default: ""

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

size
String / Number
CSS length value

指定 Dialog 的大小,支持所有的 CSS 长度(包括百分比),以及两个预定义的大小:l(860px)和 xl(1140px)。

confirm_text
String

指定 Confirm Dialog 和 Message Dialog 的确认文案,默认文案定义在 Dialog 的 locale 配置里。

cancel_text
String

指定 Confirm Dialog 的取消文案,默认文案定义在 Dialog 的 locale 配置里。

公共属性

active
Boolean

获取或者设置 Dialog 的显示状态,切换显示状态的时候会有 transition 动画。

公共方法

setContent
( content )
Return: self

重新设置 Dialog 的内容,content 可以是 jQuery .append() 方法接受的所有类型的参数。

remove
( )
Return: self

从 DOM 树中移除 Dialog 组件。

全局公共方法:

Tao.Dialog.closeAll
( )
Return: closed dialogs

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

事件

tao:show

Dialog 显示之后触发。

tao:hide

Dialog 隐藏之后触发。

tao:beforeRemove

从 DOM 树中移除 Dialog 之前触发。

tao:remove

从 DOM 树中移除 Dialog 之后触发。

tao:confirm

点击 Confirm Dialog 或者 Message Dialog 的确认按钮之后触发。

tao:cancel

点击 Confirm Dialog 的取消按钮之后触发。