菜单

提示框
提示框显示页面顶部的附加信息

下载

类型

Javascript

提示框有一个 javascript 版本,和一个 CSS 版本,这对大量使用提示框时很有用的,就像 React 和 Meteor 一样。

提示框 (Popup)

一个元素可以指定提示框提示内容

标题 (Titled)

一个元素可以指定带有标题的提示框提示内容

HTML (HTML)

一个元素可以弹出HTML的提示框

My Neighbor Totoro
Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by magical spirits.
Queue
Watch

预提示 (Pre-Existing)

元素可以显示已包含在页面中的提示框

Watchmen
In a gritty and alternate 1985 the glory days of costumed vigilantes have been brought to a close by a government crackdown, but after one of the masked veterans is brutally murdered an investigation into the killer is initiated.
Queue
Watch

No Javascript

工具提示 (Tooltip)
2.2新特性

元素可以指定一个不需要JavaScript就能显示的简单工具提示

工具提示使用元素的 :before:after
上左
上中
上右
下左
下中
下右
右中
左中
上左
上中
上右
下左
下中
下右
右中
左中

变形

基础 (Basic)

提示框可以提供更多的基本格式

宽度 (Width)

提示框运行额外的长度以包含更多内容

流体 (Fluid)

流体提示框将占用整个宽度

Show fluid popup

尺寸 (Size)

提示框可以有不同的尺寸

流动 (Flowing)

提示框可以没有最大宽度,以与其内容同款。

Show flowing popup

反色 (Inverted)

提示框可以让他的颜色反色

用法

初始化 (Initializing A Popup)

提示框在激活的元素中初始化。

$('.activating.element') .popup() ;

使用预存在的提示框 (Using a Pre-existing Popup)

使用预先就存在的提示框,可以允许你包含更复杂的 HTML 内容。

如果将页面加载中的弹出窗口作为相邻的同级元素包含在激活元素中,则可以自动找到。

让你的提示框看起来是内联的,可以使用 inline 参数。

$('.button') .popup({ inline: true }) ;
Activator

在任何地方都可使用 (Using a Pre-existing Popup Anywhere)

如果不能将弹出元素包含为同级元素,则可以指定自定义选择器来检索提示框。

$('.button') .popup({ popup: '.special.popup' }) ;

在元数据中指定内容 (Specifying Content In Metadata)

经常使用的设置,比如 title, content, HTML, 都可以被包含在 HTML 元数据中

指定内容

提示框可以用下面三种方式指定内容:

  • 使用 HTML title 属性
  • 使用 data-content 属性
  • 使用 指定的 data-html
  • 在提示框初始化中使用内容属性

提示框也可以使用元数据指定其他一些经常使用的设置

  • data-variation: 提示框使用的变量
  • data-offset: 提示框像素偏移
  • data-position: 提示框提示的位置

用JS指定内容 (Specifying Content In Javascript)

$('.ui.popup') .popup({ title : 'Popup Title', content : 'Hello I am a popup' }) ;

行为

所有行为可以使用以下语法调用:

$('.your.element') .popup('behavior name', argumentOne, argumentTwo) ;
行为 描述
show 显示提示
hide 隐藏提示
hide all 隐藏页面上的所有可见提示框
get popup 返回当前提示框
change content(html) 修改当前提示框内容
toggle 切换提示框显示状态
is visible 判断当前提示框是否可见
is hidden 判断当前提示框是否隐藏
exists 判断提示框是否存在且在页面中
reposition 当内容变化时调整提示框 ( 只对居中的提示框有必要 )
set position(position) 重新定位提示框
destroy 把提示框从页面移除,并移除其所有事件
remove popup 从页面移除提示框

例子

指定边界 (Specifying Popup Boundaries)
2.2新特性

提示框现在有一个新的设置 boundary ,用来设置提示框不能越出另一个部分的壁边界。

$('.boundary.example .button') .popup({ boundary: '.boundary.example .segment' }) ;
鼠标悬停在这

正常情况下这个提示框在默认的位置 上中(top center) 打开,但是因为不能越出边界,所以他会寻找其他变量的位置来显示自己的内容

宽提示菜单 (Wide Popup Menu)

一个更简单的方式来显示复杂的内容,像一个宽的弹出菜单是有弹出内容作为预先存在的一部分。

使用设置 inline: true 能让 Semantic 知道在激活后怎么显示下一个 ui popup 元素

调整设置,比如 show, hide, 或者让菜单可以悬停(hoverable),能帮助它拥有类似下拉菜单的功能

$('.example .menu .browse') .popup({ inline : true, hoverable : true, position : 'bottom left', delay: { show: 300, hide: 800 } }) ;

指定选择器 (Specifying a selector for a popup)

可以自定义选择器来讲提示框内容连接到它的激活器(its activator)

使用 inline 的提示框,如果弹出内容出现在父元素的边界之外,需要指定 min-width
$('.example .custom.button') .popup({ popup : $('.custom.popup'), on : 'click' }) ;
显示自定义提示框

指定触发事件 (Specifying a trigger event)

可以指定提示框触发事件

$('.example .teal.button') .popup({ on: 'click' }) ; $('.example input') .popup({ on: 'focus' }) ;
单击我

目标元素 (Target Element)

提示框可以指定不同的目标来显示,而不使用自己。

$('.test.button') .popup({ position : 'right center', target : '.test.image', title : 'My favorite dog', content : 'My favorite dog would like other dogs as much as themselves' }) ;
鼠标悬停在这

内联或相对 (Inline or relative to page)

提示框可以直接插入元素,或者作为子元素添加到页面的 body 中。

使用内联将能够使你的提示框出现在其他提示框不能出现的地方,像内部的 fixed 或者 absolutely
/* this will only style the popup if inline is true */ .example .popup { color: #FF0000; }
$('.inline.icon') .popup({ inline: true }) ;

定位 (Positioning)

弹出窗口可以定位到元素的任何一边。如果空间不可用,它会自动搜索一个类似的替代位置使用。

指定偏移 (Specifying an offset)

提示框的位置可以 data-offset="value" 来设置手动偏移

过渡 (Transitions)

提示框可以使用任何命名的过渡(ui transition).

主页
$('.selection') .dropdown({ onChange: function(value) { $('.demo.icon') .popup({ transition: value }) .popup('toggle') ; } }) ;

Popup Settings
Settings to configure popup behavior

Setting Default Description
popup false Can specify a DOM element that should be used as the popup. This is useful for including a pre-formatted popup.
exclusive false Whether all other popups should be hidden when this popup is opened
movePopup true Whether to move popup to same offset container as target element when popup already exists on the page. Using a popup inside of an element without overflow:visible, like a sidebar, may require you to set this to false
observeChanges true Whether popup should attach mutationObservers to automatically run destroy when the element is removed from the page's DOM.
boundary window When the popup surpasses the boundary of this element, it will attempt to find another display position.
context body Selector or jquery object specifying where the popup should be created.
scrollContext window Will automatically hide a popup on scroll event in this context
jitter 2 Number of pixels that a popup is allowed to appear outside the boundaries of its context. This allows for permissible rounding errors when an element is against the edge of its context.
position top left Position that the popup should appear
inline false If a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden.
preserve false Whether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.
prefer adjacent Can be set to adjacent or opposite to prefer adjacent or opposite position if popup cannot fit on screen
lastResort false When set to false, a popup will not appear and produce an error message if it cannot entirely fit on page. Setting this to a position like, right center forces the popup to use this position as a last resort even if it is partially offstage. Setting this to true will use the last attempted position.
on hover Event used to trigger popup. Can be either focus, click, hover, or manual. Manual popups must be triggered with $('.element').popup('show');
delay
delay: { show: 50, hide: 0 }
Delay in milliseconds before showing or hiding a popup on hover or focus
transition slide down Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration 200 Duration of animation events
setFluidWidth true Whether popup should set fluid popup variation width on load to avoid width: 100% including padding
hoverable false Whether popup should not close on hover (useful for popup navigation menus)
closable true When using on: 'click' specifies whether clicking the page should close the popup
addTouchEvents true When using on: 'hover' whether touchstart events should be added to allow the popup to be triggered
hideOnScroll auto Whether popup should hide on scroll or touchmove, auto only hides for popups without on: 'click'.
Set this to false to prevent mobile browsers from closing popups when you tap inside input fields.
target false If a selector or jQuery object is specified this allows the popup to be positioned relative to that element.
distanceAway 0 Offset for distance of popup from element
offset 0 Offset in pixels from calculated position
maxSearchDepth 10 Number of iterations before giving up search for popup position when a popup cannot fit on screen

Callbacks

Callbacks specify a function to occur after a specific behavior.

Parameters Context Description
onCreate $module $popup Callback on popup element creation, with created popup
onRemove $module $popup Callback immediately before Popup is removed from DOM
onShow $module $popup Callback before popup is shown. Returning false from this callback will cancel the popup from showing.
onVisible $module $popup Callback after popup is shown
onHide $module $popup Callback before popup is hidden. Returning false from this callback will cancel the popup from hiding.
onHidden $module $popup Callback after popup is hidden
onUnplaceable $module $popup Callback after popup cannot be placed on screen

Content Settings
Settings to specify popup contents

Setting Description
variation Popup variation to use, can use multiple variations with a space delimiter
content Content to display
title Title to display alongside content
html HTML content to display instead of preformatted title and content

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace popup Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector
selector : { popup : '.ui.popup' }
DOM Selectors used internally
metadata
metadata: { content : 'content', html : 'html', offset : 'offset', position : 'position', title : 'title', variation : 'variation' }
HTML Data attributes used to store data
className
className : { loading : 'loading', popup : 'ui popup', position : 'top left center bottom right', visible : 'visible' }
Class names used to attach style to state

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Popup Name used in debug logs
silent false Silences all console output including error messages, regardless of other debug settings.
debug false Provides standard debug output to console
performance true Provides standard debug output to console
verbose true Provides ancillary debug output to console
errors
error: { invalidPosition : 'The position you specified is not a valid position', cannotPlace : 'Popup does not fit within the boundaries of the viewport', method : 'The method you called is not defined.', noTransition : 'This module requires ui transitions ', notFound : 'The target or popup you specified does not exist on the page' }