Menu

Popup
弹出窗口在页面顶部显示额外的信息

Download

types

Javascript

Popup包括一个javascript版本(一个完整的功能集)和一个有限的CSS版本, 在使用很多弹出窗口的页面中,哪些是有用的, 或者使用React或Meteor等库来避免处理DOM生命周期.

Popup

元素可以指定要显示的弹出内容

titled

元素可以指定带有标题的弹出内容

HTML

元素可以为弹出窗口指定HTML

My Neighbor Totoro
为了离住院的母亲更近,两个姐妹和她们的父亲一起搬到乡下, 并发现周围的树木居住着神奇的灵魂.
queue
watch

Pre-Existing

一个元素可以显示一个已经包含在页面中的弹出窗口

watchmen
在一个艰难的1985年,身着便衣的义务警员的光辉岁月因政府的镇压而结束, 但在其中一个蒙面退伍军人被残忍杀害后,一项调查的杀手是发起.
queue
watch

No Javascript

Tooltip
New in 2.2

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

Tooltips use an element's :before and : after pseudo classes. Elements like icon 已经使用这些类进行样式化的元素需要有包装元素的工具提示, like a button, or a span 以确保工具提示正确工作.
Top Left
Top Center
Top Right
Bottom Left
Bottom Center
Bottom Right
Right Center
Left Center
Top Left
Top Center
Top Right
Bottom Left
Bottom Center
Bottom Right
Right Center
Left Center

Variations

basic

弹出窗口可以提供更基本的格式

width

一个弹出窗口可以额外宽,以允许更长的内容

fluid

流体弹出框将占用其偏移容器的整个宽度

Show fluid Popup

size

A Popup can vary in size

Flowing

一个弹出窗口可以没有最大宽度,并继续流动以适应其内容

Show flowing Popup

Inverted

弹出窗口的颜色可以反转

usage

Initializing A Popup

一个弹出窗口是在一个激活元素上初始化的

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

using a Pre-existing Popup

使用预先存在的弹出窗口允许您在弹出窗口中包含复杂的HTML.

如果你在页面加载中包含你的弹出窗口作为激活元素的相邻兄弟元素,它可以被自动找到.

要指示Popup查找您的Popup元素,您可以使用 inline parameter

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

使用预先存在的弹出窗口

如果您不能将弹出元素作为兄弟元素包含在内, 您可以指定一个自定义选择器来检索您的弹出窗口

$('.button') .Popup({ Popup: '.special.Popup” }) ;

Specifying Content In Metadata

Frequently used settings like, title, content, HTML, or offset or variation, 可以包含在HTML元数据中

Specifying Content

弹出窗口可以用三种方式指定内容:

  • using HTML title attribute
  • using data-content attribute
  • using data-html for specific HTML
  • 在弹出窗口的初始化中使用content属性

弹出窗口还可以使用元数据指定一些其他常用设置

  • data-variation: the Popup variation to use
  • data-offset:对弹出窗口进行像素偏移校正
  • data-position: the side to position Popup on

在Javascript中指定内容

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

Behavior

下面的所有行为都可以使用该语法调用:

$('.your.element') .Popup('行为名称',argumentOne, argumentTwo) ;
Behavior Description
show Shows Popup
hide Hides Popup
hide all 隐藏页面上所有可见的弹出窗口
get Popup 返回当前弹出的dom元素
change content(html) Changes current Popup content
toggle Toggles visibility of Popup
is visible 返回弹出窗口是否可见
is hidden Returns whether Popup is hidden
exists 返回是否创建了弹出窗口并插入到页面中
reposition 当内容大小改变时调整弹出窗口(只需要居中弹出窗口)
set position(position) Repositions a Popup
destroy 从页面删除弹出并删除所有事件
remove Popup Removes Popup from the page

Examples

Specifying Popup Boundaries
New in 2.2

弹出窗口现在包括一个新的设置 boundary 它允许您指定一个弹出窗口不应该逃脱另一个部分的边界. 这在复杂的窗格布局中很有用

另外,弹出窗口现在可以指定滚动上下文, 允许除窗口外的滚动容器使单击的弹出窗口隐藏在滚动上.

$('.boundary.example .button') .Popup({ boundary: '.boundary.example .segment' }) ;
Hover Me

通常这个弹出窗口会在默认位置打开 top center 但因为这将逃脱区段的边界,它将搜索其他可用的位置,直到它可以找到一个放置弹出,而停留在区段内

Wide Popup Menu

显示复杂内容的一种更简单的方法, 像一个宽的弹出式菜单是有弹出内容作为你的页面的HTML的一个预先存在的部分.

using the setting inline: true 会让语义知道显示下一个兄弟 ui Popup element after the activator.

调整延迟播放等设置, and hide, 使菜单可悬停可以让它更像一个下拉菜单

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

为弹出窗口指定选择器

如果它不可能包括弹出内容作为下一个兄弟, 您还可以指定一个自定义选择器来帮助将弹出内容链接到它的激活器.

using an inline Popup may require specifying a min-width 在你的弹出窗口中,如果你的弹出内容出现在父元素的边界之外.
$('.example .custom.button') .Popup({ Popup : $('.custom.Popup”), on : 'click' }) ;
Show custom Popup

Specifying a trigger event

可以指定一个弹出触发器事件

$('.example .teal.button') .Popup({ on: 'click' }) ; $('.example input') .Popup({ on: 'focus' }) ;
Click Me

Target Element

一个弹出窗口可以指定一个不同于它本身的目标元素来显示一个弹出窗口

$('.test.button') .Popup({ position : 'right center', target : '.test.Image', title : 'My favorite dog', 内容:“我最喜欢的狗会像喜欢自己一样喜欢其他狗。” }) ;
Hover Me

Inline or relative to page

弹出窗口可以直接插入到元素之后,也可以作为页面的子元素添加 body.

使用内联可以让你的弹出窗口到达其他弹出窗口无法到达的地方,比如内部 fixed or absolutely positioned elements
如果你想为每个弹出窗口单独设置样式,那么保持弹出窗口是有意义的 inline: true. 如果你担心你的弹出窗口可能会错误地继承它不应该继承的样式, you should set inline: false.
/*这将只样式弹出时,内联为真*/ .example .Popup { color: #FF0000; }
$('.inline.icon》) .Popup({ inline: true }) ;

Positioning

弹出窗口可以被放置在元素的任何一侧. 如果空间不可用,它将自动搜索类似的替代位置使用.

Specifying an offset

可以通过使用指定偏移量属性来手动调整弹出窗口的位置 data-offset="value"

Transitions

一个弹出窗口可以使用任何命名的ui转换.

home
$('.selection') .dropdown({ onChange: function(value) { $('.demo.icon》) .Popup({ transition: value }) .Popup('toggle') ; } }) ;

Popup Settings
设置来配置弹出行为

Setting Default Description
Popup false 可以指定一个DOM元素,应该用作弹出. 这对于包含预格式化的弹出窗口非常有用.
exclusive false 当这个弹出窗口打开时,是否所有其他的弹出窗口都应该被隐藏
movePopup true 是否将Popup移动到与目标元素相同的偏移容器中 Popup already exists on the page. 在元素中使用弹出窗口 overflow:visible,比如边栏,可能需要将其设置为 false
observeChanges true Whether Popup should attach mutationObservers to automatically run destroy 当该元素从页面的DOM中移除时.
boundary window 当弹出窗口超出该元素的边界时, 它将试图找到另一个显示位置.
context body 选择器或jquery对象指定哪里应该创建弹出.
scrollContext window 会自动隐藏一个弹出的滚动事件在这个上下文中
jitter 2 允许弹出窗口出现在其上下文边界之外的像素数. 这允许当元素在其边缘处时出现允许的舍入错误 context.
position top left 弹出窗口应该出现的位置
inline false 如果一个弹出窗口是内联的,它将被创建在当前元素旁边, 允许应用本地CSS规则. 在被隐藏之后,它不会从DOM中移除. 否则弹出窗口将附加到身体和删除后被隐藏.
preserve false 弹出内容隐藏后是否保留在页面中, 允许它在随后的加载中稍微更快地重新出现.
prefer adjacent Can be set to adjacent or opposite 如果弹出窗口不能适应屏幕,则选择相邻或相对的位置
lastResort false When set to false,弹出窗口将不会出现,并产生错误消息,如果它不能完全适合页面. 将它设置为, right center 强迫弹出窗口使用这个位置作为最后的手段,即使它是部分退出舞台. Setting this to true 会使用最后尝试的姿势吗.
on hover Event used to trigger Popup. Can be either focus, click, hover, or manual. 手动弹出窗口必须触发 $('.element').Popup('show');
被: { show: 50, hide: 0 }
在悬停或焦点上显示或隐藏弹出窗口之前的毫秒延迟
transition slide down 命名过渡时使用的动画菜单进出.
duration 200 Duration of animation events
arrowPixelsFromEdge
New in 2.3
20 当一个目标元素小于这个量的2倍时, 弹出窗口将出现,箭头居中于目标元素, 而不是弹出的边缘匹配目标的边缘.
setfluidwidth true 是否弹出应设置流体弹出宽度变化负载,以避免 width: 100% including padding
hoverable false 是否弹出窗口不应该关闭悬停(适用于弹出导航菜单)
closable true When using on: 'click' 指定单击页面是否应该关闭弹出窗口
addTouchEvents true When using on: 'hover' whether touchstart 应该添加事件来触发弹出窗口
hideOnScroll auto 弹出窗口应该隐藏在滚动或touchmove, auto only hides for Popups without on: 'click'.
Set this to false 防止移动浏览器关闭弹出框,当你点击输入字段.
target false 如果指定了选择器或jQuery对象,这将允许弹出窗口相对于该元素定位.
distanceAway 0 从元素到弹出窗口的距离偏移量
offset 0 从计算位置偏移像素
maxsearchDepth 10 当弹出窗口无法在屏幕上显示时,放弃搜索弹出窗口位置之前的迭代次数

Callbacks

回调函数指定在特定行为之后发生的函数.

Parameters Context Description
onCreate $module $Popup 创建Popup元素的回调,使用created Popup
onRemove $module $Popup 在Popup从DOM中移除之前立即回调
onShow $module $Popup Callback before Popup is shown. Returning false 从这个回调将取消弹出显示.
onVisible $module $Popup Callback after Popup is shown
onhide $module $Popup Callback before Popup is hidden. Returning false 这个回调将取消隐藏的弹出窗口.
onHidden $module $Popup Callback after Popup is hidden
onUnplaceable $module $Popup 弹出后的回调不能放在屏幕上

Content Settings
指定弹出内容的设置

Setting Description
variation 弹出变量要使用,可以使用多个变量带一个空格分隔符
content Content to display
title 标题显示在内容旁边
html HTML内容,而不是预先格式化的标题和内容

DOM Settings
DOM设置指定该模块应该如何与DOM接口

Setting Default Description
namespace Popup Event namespace. 确保模块拆卸不会影响附加到元素的其他事件.
selector
selector : { Popup : '.ui.Popup” }
DOM Selectors used internally
metadata
metadata: { content : 'content', html : 'html', offset : 'offset', position : 'position', title : 'title', variation : 'variation' }
用于存储数据的数据属性
className
className : { loading : 'loading', Popup : 'ui Popup”, 位置:“左上中右下”, visible : 'visible' }
用于将样式附加到状态的类名

Debug Settings
调试设置控制到控制台的调试输出

Setting Default Description
name Popup Name used in debug進 logs
silent false 关闭所有控制台输出,包括错误消息,而不考虑其他调试设置.
debug進 false 提供标准的调试输出到控制台
performance true 提供标准的调试输出到控制台
verbose true 提供辅助调试输出到控制台
errors
error: { invalidPosition: '您指定的位置不是有效位置', cannotPlace: 'Popup不适合在视口的边界内', 方法:'你调用的方法没有定义.', noTransition: '这个模块需要ui transitions ', notFound: '你指定的目标或弹出窗口在页面上不存在' }

dimmer Message
dimmer sub-header

友情链接: 1 2 3 4 5 6 7 8 9 10