richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Updates examples for popup

pull/258/head
jlukic 11 years ago
parent
9b8d3bd55e
commit
23b0ab5dd4
4 changed files with 46 additions and 21 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      node/src/documents/index.html.eco
  2. 63
      node/src/documents/modules/popup.html.eco
  3. 2
      node/src/files/javascript/popup.js
  4. 1
      node/src/files/javascript/semantic.js

1
node/src/documents/index.html.eco
View File

@ -135,6 +135,7 @@ type : 'Semantic'
<div class="ui teal header">Open up your web console.</div>
Semantic provides tracing for javascript behavior so your components can tell you what they're doing as they do it.</p>
<div class="code" data-type="javascript" data-demo="true">
$.fn.transition.settings.debug = true;
$('.dog.image')
.transition('scale in')
.transition('tada', '800ms')

63
node/src/documents/modules/popup.html.eco
View File

@ -26,7 +26,7 @@ type : 'UI Module'
<div class="example">
<h4 class="ui header">Popup</h4>
<p>A standard popup</p>
<i class="large help icon link" data-content="Hello, I am a pop-up."></i>
<i class="large heart circular icon link" data-content="Hello, I am a pop-up."></i>
</div>
<h2 class="ui dividing header">Variations</h2>
@ -34,14 +34,14 @@ type : 'UI Module'
<div class="example">
<h4 class="ui header">Size</h4>
<p>A popup can be large or small</p>
<i class="help icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
<i class="help 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 small popup" data-variation="small"></i>
<i class="circular heart icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
</div>
<div class="example">
<h4 class="ui header">Inverted</h4>
<p>A popup can have its colors inverted</p>
<i class="help icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
<i class="circular heart icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
</div>
@ -69,40 +69,65 @@ type : 'UI Module'
</div>
</div>
<div class="code" data-type="html">
<i class="help icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i>
<i class="circular heart icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i>
</div>
<h2 class="ui dividing header">Examples</h2>
<div class="example segment">
<h4 class="ui header">Inline or Body</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 warning message">
An inline popup will remain in your page's html after being hidden, while a non-inline popup will remove itself after being hidden.
</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="evaluated code">
$('.page.icon')
.popup({
inline: false
})
;
$('.inline.icon')
.popup({
inline: true
})
;
</div>
<i class="mail page circular icon link" data-content="This is a child element to the page's body" ></i>
<i class="mail inline circular icon link" data-content="This is sibling of the icon" ></i>
</div>
<div class="example segment">
<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>
<i class="help icon link" data-content="Top Left" data-position="top left"></i>
<i class="help icon link" data-content="Top Center" data-position="top center"></i>
<i class="help icon link" data-content="Top Right" data-position="top right"></i>
<i class="help icon link" data-content="Left Center" data-position="left center"></i>
<i class="help icon link" data-content="Right Center" data-position="right center"></i>
<i class="help icon link" data-content="Bottom Left" data-position="bottom left"></i>
<i class="help icon link" data-content="Bottom Center" data-position="bottom center"></i>
<i class="help icon link" data-content="Bottom Right" data-position="bottom right"></i>
<i class="circular heart icon link" data-content="Top Left" data-position="top left"></i>
<i class="circular heart icon link" data-content="Top Center" data-position="top center"></i>
<i class="circular heart icon link" data-content="Top Right" data-position="top right"></i>
<i class="circular heart icon link" data-content="Left Center" data-position="left center"></i>
<i class="circular heart icon link" data-content="Right Center" data-position="right center"></i>
<i class="circular heart icon link" data-content="Bottom Left" data-position="bottom left"></i>
<i class="circular heart icon link" data-content="Bottom Center" data-position="bottom center"></i>
<i class="circular heart icon link" data-content="Bottom Right" data-position="bottom right"></i>
</div>
<div class="example segment">
<h4 class="ui header">Title</h4>
<p>A popup can be formatted with a title</p>
<i class="help icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i>
<i class="circular heart icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i>
</div>
<div class="example segment">
<h4 class="ui header">HTML</h4>
<p>A popup can be formatted with html</p>
<i class="help icon link" data-html="<strike>I rescind my comment about cats</strike>"></i>
<i class="circular heart icon link" data-html="<strike>I rescind my comment about cats</strike>"></i>
</div>
<div class="no example">
<h4 class="ui header">Transitions</h4>
<p>A popup can have different <a href="/modules/transition.html">transitions</a>. Any transition with both an in and out animation can be specified. The following are just a few examples.</p>
<i class="help icon fade link" data-content="This is a different transition"></i>
<i class="heart icon fade link" data-content="This is a different transition"></i>
<br><br>
<div class="code" data-demo="true" data-title="Fade">
$('.fade.icon')
@ -112,7 +137,7 @@ type : 'UI Module'
</div>
</div>
<div class="no example">
<i class="help icon slide link" data-content="This is a different transition"></i>
<i class="heart icon slide link" data-content="This is a different transition"></i>
<br><br>
<div class="code" data-demo="true" data-title="Slide Up">
$('.slide.icon')
@ -122,7 +147,7 @@ type : 'UI Module'
</div>
</div>
<div class="no example">
<i class="help icon flip link" data-content="This is a different transition"></i>
<i class="heart icon flip link" data-content="This is a different transition"></i>
<br><br>
<div class="code" data-demo="true" data-title="Vertical Flip">
$('.flip.icon')
@ -235,7 +260,7 @@ type : 'UI Module'
</thead>
<tbody>
<tr>
<td>onInit</td>
<td>onCreate</td>
<td>None</td>
<td>Callback after a popup html is generated.</td>
</tr>

2
node/src/files/javascript/popup.js
View File

@ -5,7 +5,7 @@ semantic.accordion.ready = function() {
// selector cache
var
$popup = $('.example .help.icon'),
$popup = $('.example .heart.icon'),
// alias
handler
;

1
node/src/files/javascript/semantic.js
View File

@ -63,7 +63,6 @@ semantic.ready = function() {
handler
;
$.fn.transition.debug = true;
// event handlers
handler = {

Write Preview
Loading…
Cancel
Save