You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
759 lines
26 KiB
759 lines
26 KiB
---
|
|
layout : 'default'
|
|
css : 'popup'
|
|
|
|
element : 'popup'
|
|
elementType : 'module'
|
|
|
|
title : 'Popup'
|
|
description : 'A popup displays additional information on top of a page'
|
|
type : 'UI Module'
|
|
|
|
themes : ['Default']
|
|
---
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/popup.less" />
|
|
<script src="/javascript/popup.js"></script>
|
|
|
|
<%- @partial('header', { tabs: 'module' }) %>
|
|
<div class="main container">
|
|
|
|
<div class="ui active tab" data-tab="definition">
|
|
|
|
<h2 class="ui dividing header">
|
|
Types
|
|
</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Content</h4>
|
|
<p>An element can specify popup content to appear</p>
|
|
<div class="ui icon button" data-content="Add users to your feed">
|
|
<i class="add icon"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Title</h4>
|
|
<p>An element can specify popup content with a title</p>
|
|
<img src="/images/avatar/small/elliot.jpg" data-title="Elliot Fu" data-content="Elliot has been a member since July 2012" class="ui avatar image">
|
|
<img src="/images/avatar/small/stevie.jpg" data-title="Stevie Feliciano" data-content="Stevie has been a member since August 2013" class="ui avatar image">
|
|
<img src="/images/avatar/small/matt.jpg" data-title="Matt" data-content="Matt has been a member since July 2014" class="ui avatar image">
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">HTML</h4>
|
|
<p>An element can specify html for a popup</p>
|
|
|
|
<div class="ui card" data-html="<div class='header'>User Rating</div><div class='content'><div class='ui star rating'><i class='active icon'></i><i class='active icon'></i><i class='active icon'></i><i class='icon'></i><i class='icon'></i></div></div>">
|
|
<div class="image">
|
|
<img src="/images/movies/totoro-horizontal.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="header">My Neighbor Totoro</div>
|
|
<div class="description">
|
|
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.
|
|
</div>
|
|
</div>
|
|
<div class="ui two bottom attached buttons">
|
|
<div class="ui button">
|
|
<i class="add icon"></i>
|
|
Queue
|
|
</div>
|
|
<div class="ui primary button">
|
|
<i class="play icon"></i>
|
|
Watch
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="existing example">
|
|
<h4 class="ui header">Pre-Existing</h4>
|
|
<p>An element can display a popup that is already included in the page</p>
|
|
|
|
<div class="ui card">
|
|
<div class="image">
|
|
<img src="/images/movies/watchmen-horizontal.jpg">
|
|
</div>
|
|
<div class="content">
|
|
<div class="header">Watchmen</div>
|
|
<div class="description">
|
|
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.
|
|
</div>
|
|
</div>
|
|
<div class="ui two bottom attached buttons">
|
|
<div class="ui button">
|
|
<i class="add icon"></i>
|
|
Queue
|
|
</div>
|
|
<div class="ui primary button">
|
|
<i class="play icon"></i>
|
|
Watch
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui popup">
|
|
<div class='header'>User Rating</div>
|
|
<div class="ui star rating" data-rating="3"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Width</h4>
|
|
<p>A popup can be extra wide to allow for longer content</p>
|
|
<i class="circular heart icon link" data-content="Hello. This is a wide pop-up which allows for lots of content with additional space. You can fit a lot of words here and the paragraphs will be pretty wide." data-variation="wide"></i>
|
|
<i class="circular heart icon link" data-content="Hello. This is a very wide pop-up which allows for lots of content with additional space. You can fit a lot of words here and the paragraphs will be pretty wide." data-variation="very wide"></i>
|
|
</div>
|
|
|
|
<div class="fluid example">
|
|
<h4 class="ui header">Fluid</h4>
|
|
<p>A fluid popup will take up the entire width of its offset container</p>
|
|
<div class="ui button">Show fluid popup</div>
|
|
<div class="ui fluid popup">
|
|
<div class="ui four column divided center aligned grid">
|
|
<div class="column">1</div>
|
|
<div class="column">2</div>
|
|
<div class="column">3</div>
|
|
<div class="column">4</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Size</h4>
|
|
<p>A popup can vary in size</p>
|
|
<i class="circular heart icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
|
|
<i class="circular heart icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
|
|
<i class="circular heart icon link" data-content="Hello. This is a huge popup" data-variation="huge"></i>
|
|
</div>
|
|
|
|
<div class="fitted example">
|
|
<h4 class="ui header">Flowing</h4>
|
|
<p>A popup can have no maximum width and continue to flow to fit its content</p>
|
|
<div class="ui button">Show flowing popup</div>
|
|
<div class="ui flowing popup">
|
|
<div class="ui three column padded divided center aligned grid">
|
|
<div class="column">
|
|
<h4 class="ui header">Basic Plan</h4>
|
|
<p><b>2</b> projects, $10 a month</p>
|
|
<div class="ui button">Choose</div>
|
|
</div>
|
|
<div class="column">
|
|
<h4 class="ui header">Business Plan</h4>
|
|
<p><b>5</b> projects, $20 a month</p>
|
|
<div class="ui button">Choose</div>
|
|
</div>
|
|
<div class="column">
|
|
<h4 class="ui header">Premium Plan</h4>
|
|
<p><b>8</b> projects, $25 a month</p>
|
|
<div class="ui button">Choose</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Inverted</h4>
|
|
<p>A popup can have its colors inverted</p>
|
|
<i class="circular heart icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="usage">
|
|
|
|
<h2 class="ui dividing header">Usage</h2>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Initializing A Popup</h4>
|
|
<p>A popup is initialized on an activating element</p>
|
|
<div class="code">
|
|
$('.activating.element')
|
|
.popup()
|
|
;
|
|
</div>
|
|
</div>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Using a Pre-existing Popup</h4>
|
|
<p>Using a pre-existing popup allows for you to include complex html inside your popup.<p>
|
|
<p>If you include your popup on page load as an adjacent sibling element to your activating element it can be found automatically.</p>
|
|
<p>To instruct popup to look inline for your popup element you can initialize it with the <code>inline</code> parameter</p>
|
|
<div class="code" data-type="javascript">
|
|
$('.button')
|
|
.popup({
|
|
inline: true
|
|
})
|
|
;
|
|
</div>
|
|
<div class="code" data-type="html">
|
|
<div class="ui button">Activator</div>
|
|
<div class="ui special popup">
|
|
<div class="header">Custom Header</div>
|
|
<div class="ui button">Click Me</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Using a Pre-existing Popup Anywhere</h4>
|
|
<p>If you cannot include your popup element as a sibling element, you can specify a custom selector to retrieve your popup</p>
|
|
<div class="code" data-type="javascript">
|
|
$('.button')
|
|
.popup({
|
|
popup: '.special.popup'
|
|
})
|
|
;
|
|
</div>
|
|
</div>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Specifying Content In Metadata</h4>
|
|
<p>Frequently used settings like, title, content, html, or offset or variation, can be included in html metadata<p>
|
|
<div class="ui info icon ignored message">
|
|
<i class="info icon"></i>
|
|
<div class="content">
|
|
<div class="header">Specifying Content</div>
|
|
<p>Popups can specify content in three ways:<p>
|
|
<ul class="list">
|
|
<li>Using html <code>title</code> attribute</li>
|
|
<li>Using <code>data-content</code> attribute</li>
|
|
<li>Using <code>data-html</code> for specific html</li>
|
|
<li>Using the content property in the initialization of the popup</li>
|
|
</ul>
|
|
<p>Popups can also specify some other frequently used settings using metadata<p>
|
|
<ul class="list">
|
|
<li><code>data-variation</code>: the popup variation to use </li>
|
|
<li><code>data-offset</code>: a pixel offset correction for popup</li>
|
|
<li><code>data-position</code>: the side to position popup on</li>
|
|
<li><code>data-variation</code>: the popup variation to use </li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="code" data-type="html">
|
|
<i class="heart icon" title="Hello I am a popup"></i>
|
|
</div>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Specifying Content In Javascript</h4>
|
|
<div class="code">
|
|
$('.ui.popup')
|
|
.popup({
|
|
title : 'Popup Title',
|
|
content : 'Hello I am a popup'
|
|
})
|
|
;
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Behavior</h2>
|
|
|
|
<p>All the following <a href="/module.html#/behavior">behaviors</a> can be called using the syntax:</p>
|
|
<div class="code">
|
|
$('.your.element')
|
|
.popup('behavior name', argumentOne, argumentTwo)
|
|
;
|
|
</div>
|
|
|
|
<table class="ui definition celled sortable table segment">
|
|
<thead>
|
|
<th>Behavior</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>show</td>
|
|
<td>Shows popup</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hide</td>
|
|
<td>Hides popup</td>
|
|
</tr>
|
|
<tr>
|
|
<td>hide all</td>
|
|
<td>Hides all visible pop ups on the page</td>
|
|
</tr>
|
|
<tr>
|
|
<td>toggle</td>
|
|
<td>Toggles visibility of popup</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is visible</td>
|
|
<td>Returns whether popup is visible</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is hidden</td>
|
|
<td>Returns whether popup is hidden</td>
|
|
</tr>
|
|
<tr>
|
|
<td>exists</td>
|
|
<td>Returns whether popup is created and inserted into the page</td>
|
|
</tr>
|
|
<tr>
|
|
<td>set position(position)</td>
|
|
<td>Repositions a popup</td>
|
|
</tr>
|
|
<tr>
|
|
<td>remove</td>
|
|
<td>Removes popup from the page</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ui tab" data-tab="examples">
|
|
|
|
<h2 class="ui dividing header">Examples</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Wide Popup Menu</h4>
|
|
<div class="ignored">
|
|
<p>An easier way to display complex content, like a wide popup menu is to have the popup content as a pre- existing part of your page's html.</p>
|
|
<p>Using the setting <code>inline: true</code> will let Semantic know to display the next sibling <code>ui popup</code> element after the activator.</p>
|
|
|
|
<p>Tweaking settings like the delay for show, and hide, and making the menu hoverable will help it function more like a dropdown menu</p>
|
|
</div>
|
|
|
|
<div class="evaluated code">
|
|
$('.example .menu .browse')
|
|
.popup({
|
|
inline : true,
|
|
hoverable: true,
|
|
position : 'bottom left',
|
|
delay: {
|
|
show: 300,
|
|
hide: 800
|
|
}
|
|
})
|
|
;
|
|
</div>
|
|
<div class="ui menu">
|
|
<a class="active item">
|
|
<i class="home icon"></i> Home
|
|
</a>
|
|
<a class="browse item">
|
|
<i class="dropdown icon"></i>
|
|
Browse
|
|
</a>
|
|
<div class="ui very wide popup">
|
|
<div class="ui four column grid">
|
|
<div class="ui column">
|
|
<h5 class="ui header">Fabrics</h5>
|
|
<div class="ui link list">
|
|
<a class="item">Cashmere</a>
|
|
<a class="item">Linen</a>
|
|
<a class="item">Cotton</a>
|
|
<a class="item">Viscose</a>
|
|
</div>
|
|
</div>
|
|
<div class="ui column">
|
|
<h5 class="ui header">Sizes</h5>
|
|
<div class="ui link list">
|
|
<a class="item">Small</a>
|
|
<a class="item">Medium</a>
|
|
<a class="item">Large</a>
|
|
<a class="item">Plus Sizes</a>
|
|
</div>
|
|
</div>
|
|
<div class="ui column">
|
|
<h5 class="ui header">Colors</h5>
|
|
<div class="ui link list">
|
|
<a class="item">Neutrals</a>
|
|
<a class="item">Brights</a>
|
|
<a class="item">Pastels</a>
|
|
</div>
|
|
</div>
|
|
<div class="ui column">
|
|
<h5 class="ui header">Types</h5>
|
|
<div class="ui link list">
|
|
<a class="item">Knitwear</a>
|
|
<a class="item">Outerwear</a>
|
|
<a class="item">Pants</a>
|
|
<a class="item">Shoes</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Specifying a selector for a popup</h4>
|
|
<p>If its not possible to include the popup content as the next sibling, you can also specify a custom selector to help link the popup contents to its activator.</p>
|
|
<div class="evaluated code">
|
|
$('.example .custom.button')
|
|
.popup({
|
|
popup : $('.custom.popup'),
|
|
on : 'click'
|
|
})
|
|
;
|
|
</div>
|
|
<div class="some-wrapping-div">
|
|
<div class="ui custom button">Show custom popup</div>
|
|
</div>
|
|
<div class="ui custom popup">
|
|
I'm not on the same level as the button, but i can still be found.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Specifying a trigger event</h4>
|
|
<p>A popup trigger event can be specified</p>
|
|
<div class="evaluated code">
|
|
$('.example .teal.button')
|
|
.popup({
|
|
on: 'click'
|
|
})
|
|
;
|
|
$('.example input')
|
|
.popup({
|
|
on: 'focus'
|
|
})
|
|
;
|
|
</div>
|
|
<div class="ui teal button" data-title="Using click events" data-content="Clicked popups will close if you click away, but not if you click inside the popup">Click Me</div>
|
|
<div class="ui icon input">
|
|
<input type="text" placeholder="Focus me..." data-content="You can use me to enter data">
|
|
<i class="search icon"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Target Element</h4>
|
|
<p>A popup can specify a different target element than itself to show a popup</p>
|
|
<div class="evaluated code">
|
|
$('.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'
|
|
})
|
|
;
|
|
</div>
|
|
<div class="ui green test button">Hover Me</div>
|
|
<div class="ui divider"></div>
|
|
<img class="medium ui test image" src="/images/demo/photo.jpg">
|
|
</div>
|
|
<div class="inline example">
|
|
<h4 class="ui header">Inline or relative to page</h4>
|
|
<p>A popup can either be inserted directly after an element, or added as a child element to the page's <code>body</code>.</p>
|
|
<div class="ui positive message">
|
|
Using inline will allow your popups to go places other popups can't go, like inside <code>fixed</code> or <code>absolutely</code> positioned elements
|
|
</div>
|
|
<div class="ui info message">
|
|
If you want to style each popup individually it makes sense to keep popup <code>inline: true</code>. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set <code>inline: false</code>.
|
|
</div>
|
|
<div class="code" data-type="css">
|
|
/* this will only style the popup if inline is true */
|
|
.example .popup {
|
|
color: #FF0000;
|
|
}
|
|
</div>
|
|
<div class="evaluated code">
|
|
$('.inline.icon')
|
|
.popup({
|
|
inline: true
|
|
})
|
|
;
|
|
</div>
|
|
<i class="heart circular icon link" data-content="This is a child element to the page's body and will not be styled" ></i>
|
|
<i class="mail inline circular icon link" data-content="This popup was inserted inline and will be styled" ></i>
|
|
|
|
</div>
|
|
<div class="position example">
|
|
<h4 class="ui header">Positioning</h4>
|
|
<p>A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.</p>
|
|
<div class="ui segment">
|
|
<i class="square inverted red heart icon link" data-content="Top Left" data-position="top left"></i>
|
|
<i class="square inverted red heart icon link" data-content="Top Center" data-position="top center"></i>
|
|
<i class="square inverted red heart icon link" data-content="Top Right" data-position="top right"></i>
|
|
<i class="square inverted red heart icon link" data-content="Right Center" data-position="right center"></i>
|
|
<i class="square inverted red heart icon link" data-content="Bottom Right" data-position="bottom right"></i>
|
|
<i class="square inverted red heart icon link" data-content="Bottom Center" data-position="bottom center"></i>
|
|
<i class="square inverted red heart icon link" data-content="Bottom Left" data-position="bottom left"></i>
|
|
<i class="square inverted red heart icon link" data-content="Left Center" data-position="left center"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Specifying an offset</h4>
|
|
<p>A popup position can be adjusted manually by specifying an offset property using <code>data-offset="value"</code></p>
|
|
|
|
<i class="heart circular icon link" data-offset="50" data-content="As expected this popup is way off to the right"></i>
|
|
</div>
|
|
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Transitions</h4>
|
|
<p>A popup can use any named ui transition.</p>
|
|
<i class="large demo home circular link icon" data-title="Home" data-content="The place where you keep your dog"></i> Home
|
|
|
|
<div class="ui divider"></div>
|
|
|
|
<div class="ui selection dropdown">
|
|
<input type="hidden" name="transition">
|
|
<div class="default text">Choose a transition</div>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item">Horizontal Flip</div>
|
|
<div class="item">Vertical Flip</div>
|
|
<div class="item">Fade Up</div>
|
|
<div class="item">Fade</div>
|
|
<div class="item">Scale</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui clearing divider"></div>
|
|
<div class="evaluated code">
|
|
$('.selection')
|
|
.dropdown({
|
|
onChange: function(value) {
|
|
$('.demo.icon')
|
|
.popup({
|
|
transition: value
|
|
})
|
|
.popup('toggle')
|
|
;
|
|
}
|
|
})
|
|
;
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="settings">
|
|
|
|
<h3 class="ui header">
|
|
Popup Settings
|
|
<div class="sub header">Settings to configure popup behavior</div>
|
|
</h3>
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<th>Setting</th>
|
|
<th class="four wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>context</td>
|
|
<td>body</td>
|
|
<td>Selector or jquery object specifying where the popup should be created</td>
|
|
</tr>
|
|
<tr>
|
|
<td>position</td>
|
|
<td>top center</td>
|
|
<td>Position that the popup should appear</td>
|
|
</tr>
|
|
<tr>
|
|
<td>inline</td>
|
|
<td>false</td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>preserve</td>
|
|
<td>false</td>
|
|
<td>Whether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>on</td>
|
|
<td>hover</td>
|
|
<td>Event used to trigger popup. Can be either <b>focus, click, hover, or manual</b>. Manul popups must be triggered with <code>$('.element').popup('show');</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>delay</td>
|
|
<td>
|
|
<div class="code">
|
|
delay: {
|
|
show: 50,
|
|
hide: 0
|
|
}
|
|
</div>
|
|
</td>
|
|
<td>Delay in milliseconds before showing or hiding a popup on hover or focus</td>
|
|
</tr>
|
|
<tr>
|
|
<td>transition</td>
|
|
<td>
|
|
slide down
|
|
</td>
|
|
<td>Named transition to use when animating menu in and out. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>duration</td>
|
|
<td>
|
|
250
|
|
</td>
|
|
<td>Duration of animation events</td>
|
|
</tr>
|
|
<tr>
|
|
<td>closable</td>
|
|
<td>true</td>
|
|
<td>When using <code>on: 'click'</code> specifies whether clicking the page should close the popup</td>
|
|
</tr>
|
|
<tr>
|
|
<td>target</td>
|
|
<td>false</td>
|
|
<td>If a selector or jQuery object is specified this allows the popup to be positioned relative to that element.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>distanceAway</td>
|
|
<td>0</td>
|
|
<td>Offset for distance of popup from element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>offset</td>
|
|
<td>0</td>
|
|
<td>Offset in pixels from calculated position</td>
|
|
</tr>
|
|
<tr>
|
|
<td>maxSearchDepth</td>
|
|
<td>10</td>
|
|
<td>Number of iterations before giving up search for popup position when a popup cannot fit on screen</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3 class="ui header">
|
|
Content Settings
|
|
<div class="sub header">Settings to specify popup contents</div>
|
|
</h3>
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<th>Setting</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>variation</td>
|
|
<td>Popup variation to use, can use multiple variations with a space delimiter</td>
|
|
</tr>
|
|
<tr>
|
|
<td>content</td>
|
|
<td>Content to display</td>
|
|
</tr>
|
|
<tr>
|
|
<td>title</td>
|
|
<td>Title to display alongside content</td>
|
|
</tr>
|
|
<tr>
|
|
<td>html</td>
|
|
<td>HTML content to display instead of preformatted title and content</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3 class="ui header">
|
|
DOM Settings
|
|
<div class="sub header">DOM settings specify how this module should interface with the DOM</div>
|
|
</h3>
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<th>Setting</th>
|
|
<th class="six wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>namespace</td>
|
|
<td>popup</td>
|
|
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>selector</td>
|
|
<td>
|
|
<div class="code">
|
|
selector : {
|
|
popup : '.ui.popup'
|
|
}
|
|
</div>
|
|
</td>
|
|
<td>DOM Selectors used internally</td>
|
|
</tr>
|
|
<tr>
|
|
<td>metadata</td>
|
|
<td>
|
|
<div class="code">
|
|
metadata: {
|
|
content : 'content',
|
|
html : 'html',
|
|
offset : 'offset',
|
|
position : 'position',
|
|
title : 'title',
|
|
variation : 'variation'
|
|
}
|
|
</div>
|
|
</td>
|
|
<td>HTML Data attributes used to store data</td>
|
|
</tr>
|
|
<tr>
|
|
<td>className</td>
|
|
<td>
|
|
<div class="code">
|
|
className : {
|
|
loading : 'loading',
|
|
popup : 'ui popup',
|
|
position : 'top left center bottom right',
|
|
visible : 'visible'
|
|
}
|
|
</div>
|
|
</td>
|
|
<td>Class names used to attach style to state</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="ui horizontal divider"><i class="icon setting"></i></div>
|
|
|
|
<h3 class="ui header">
|
|
Debug Settings
|
|
<div class="sub header">Debug settings controls debug output to the console</div>
|
|
</h3>
|
|
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<th>Setting</th>
|
|
<th class="four wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>name</td>
|
|
<td>Popup</td>
|
|
<td>Name used in debug logs</td>
|
|
</tr>
|
|
<tr>
|
|
<td>debug</td>
|
|
<td>True</td>
|
|
<td>Provides standard debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>performance</td>
|
|
<td>True</td>
|
|
<td>Provides standard debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>verbose</td>
|
|
<td>True</td>
|
|
<td>Provides ancillary debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>errors</td>
|
|
<td colspan="2">
|
|
<div class="code">
|
|
error: {
|
|
content : 'Your popup has no content specified',
|
|
method : 'The method you called is not defined.',
|
|
recursion : 'Popup attempted to reposition element to fit, but could not find an adequate position.'
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|