From 23b0ab5dd4934ebd05d2912e5d8b58950f353beb Mon Sep 17 00:00:00 2001 From: jlukic Date: Sat, 12 Oct 2013 17:30:29 -0400 Subject: [PATCH] Updates examples for popup --- node/src/documents/index.html.eco | 1 + node/src/documents/modules/popup.html.eco | 63 ++++++++++++++++------- node/src/files/javascript/popup.js | 2 +- node/src/files/javascript/semantic.js | 1 - 4 files changed, 46 insertions(+), 21 deletions(-) diff --git a/node/src/documents/index.html.eco b/node/src/documents/index.html.eco index 06079cd37..4e0da6cdb 100755 --- a/node/src/documents/index.html.eco +++ b/node/src/documents/index.html.eco @@ -135,6 +135,7 @@ type : 'Semantic'
Open up your web console.
Semantic provides tracing for javascript behavior so your components can tell you what they're doing as they do it.

+ $.fn.transition.settings.debug = true; $('.dog.image') .transition('scale in') .transition('tada', '800ms') diff --git a/node/src/documents/modules/popup.html.eco b/node/src/documents/modules/popup.html.eco index 59b9e10f0..7d2e3a3c4 100755 --- a/node/src/documents/modules/popup.html.eco +++ b/node/src/documents/modules/popup.html.eco @@ -26,7 +26,7 @@ type : 'UI Module'

Popup

A standard popup

- +

Variations

@@ -34,14 +34,14 @@ type : 'UI Module'

Size

A popup can be large or small

- - + +

Inverted

A popup can have its colors inverted

- +
@@ -69,40 +69,65 @@ type : 'UI Module'
- +

Examples

+
+

Inline or Body

+

A popup can either be inserted directly after an element, or added as a child element to the page's body.

+
+ An inline popup will remain in your page's html after being hidden, while a non-inline popup will remove itself after being hidden. +
+
+ If you want to style each popup individually it makes sense to keep popup inline: true. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set inline: false. +
+
+ $('.page.icon') + .popup({ + inline: false + }) + ; + $('.inline.icon') + .popup({ + inline: true + }) + ; +
+ + + +

Positioning

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.

- - - - - - - - + + + + + + + +

Title

A popup can be formatted with a title

- +

HTML

A popup can be formatted with html

- +

Transitions

A popup can have different transitions. Any transition with both an in and out animation can be specified. The following are just a few examples.

- +

$('.fade.icon') @@ -112,7 +137,7 @@ type : 'UI Module'
- +

$('.slide.icon') @@ -122,7 +147,7 @@ type : 'UI Module'
- +

$('.flip.icon') @@ -235,7 +260,7 @@ type : 'UI Module' - onInit + onCreate None Callback after a popup html is generated. diff --git a/node/src/files/javascript/popup.js b/node/src/files/javascript/popup.js index 17c0ccfc1..bb9da2c4c 100755 --- a/node/src/files/javascript/popup.js +++ b/node/src/files/javascript/popup.js @@ -5,7 +5,7 @@ semantic.accordion.ready = function() { // selector cache var - $popup = $('.example .help.icon'), + $popup = $('.example .heart.icon'), // alias handler ; diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js index babf72bff..338bcf3e7 100755 --- a/node/src/files/javascript/semantic.js +++ b/node/src/files/javascript/semantic.js @@ -63,7 +63,6 @@ semantic.ready = function() { handler ; - $.fn.transition.debug = true; // event handlers handler = {