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

Popover 是基于 Tao Component 的气泡容器组件。

用法

<%= link_to 'Click Me', 'javascript:;', class: 'button button-popover' %>
<%= tao_popover boundary_selector: '.popover-demo', target_selector: '.button-popover', size: 200 do %>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie tempor ex, sit amet scelerisque lorem viverra et.
<% end %>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie tempor ex, sit amet scelerisque lorem viverra et.
Click Me
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie tempor ex, sit amet scelerisque lorem viverra et.

Confirm Popover

Tao UI 还提供了一个 Popover 的衍生组件,确认气泡(Confirm Popover):

<%= link_to 'Confirm Popover', 'javascript:;', class: 'button button-confirm-popover' %>
<%= tao_confirm_popover target_selector: '.button-confirm-popover' do %>
  确定要这么做吗?
<% end %>
Confirm Popover
确定要这么做吗?

初始化选项

active
Boolean
Default: false

指定 Popover 的显示状态。

auto_hide
Boolean
Default: false

在 Popover 处于显示状态的时候,是否允许 Popover 以外的点击操作自动隐藏 Popover。

auto_destroy
Boolean
Default: false

是否在隐藏 Popover 的时候自动移除组件。

with_arrow
Boolean
Default: true

是否显示 Popover 的箭头。

target_selector
String
CSS selector
Default: ""

通过 CSS Selector 指定一个元素作为 Popover 指向的目标。

target_traversal
String
jQuery traversing method
Default: ""

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

trigger_selector
String
CSS selector
Default: ""

通过 CSS Selector 指定一个元素,在点击(或者 hover,具体由 trigger_action 属性决定)这个元素时,会切换 Popover 的显示状态。默认会将 Popover 指向的目标元素作为 trigger 元素。

trigger_traversal
String
jQuery traversing method
Default: ""

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

boundary_selector
String
CSS selector
Default: ""

通过 CSS Selector 指定一个元素,Popver 自动计算显示位置的时候会保证不会超出这个容器的范围。

direction
String
Default: ""

指定 Popover 显示的方向,一共支持 12 个方向:left-top left-middle left-bottom right-top right-middle right-bottom top-left top-center top-right bottom-left bottom-center bottom-right。默认会自动计算 Popover 显示的方向。

size
String / Number

指定 Popover 的宽度,支持所有的 CSS 长度(包括百分比)。

confirm_text
String

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

cancel_text
String

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

公共属性

active
Boolean

获取或者设置 Popover 的显示状态。

公共方法

setContent
( content )
Return: self

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

refresh
( )
Return: self

重新计算 Popover 的位置。

toggleActive
( )
Return: self

切换 Popover 的显示/隐藏状态。

remove
( )
Return: self

从 DOM 树中移除 Popover 组件。

全局公共方法:

Tao.Popover.closeAll
( )
Return: closed popovers

关闭所有已显示的 Popover。

事件

tao:show

Popover 显示之后触发。

tao:hide

Popover 隐藏之后触发。

tao:beforeRemove

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

tao:remove

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

tao:confirm

点击 Confirm Popover 的确认按钮之后触发。

tao:cancel

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