jsMetro v... Demos
Pop Notifications
$.js.popNotify('Hello, world.');
Notifications
The Notify API displays a notification akin to the Windows Phone 7 (WP7) notification bar (displayed after recieving a text message). It requires a direct call and makes use of an element automatically added to the DOM (#JSNotification
).
-
PreInitialization of the DOM
To ensure that the CSS animation works correctly the first time you supply a notification, you can simply pass in zero arguments into the
$.js.notify
function. This will add the appropriate elements to the DOM, letting the browser apply the CSS.[+] View Source$.js.notify();
-
Create a Notification
[+] View Source
$.js.notify('hello, world!');
-
Create a 1 Second Notification
[+] View Source
$.js.notify( 'hello, world', { timeout: 1000 } );
-
Create a 1 Second, Red Notification
[+] View Source
$.js.notify( 'hello, world', { timeout: 1000, cssClass: 'red' } );
Dialog
Signature
$.js.dialog(message, options)
Basic Dialog
The simplest way to use Dialog is to call it with just an HTML string containing your message.
jQuery
$.js.dialog('<h3>The Dialog Title</h3><p>Hello, world!</p>');
Queueing
The Dialog function can also queue up multiple messages. It works in a fire-and-forget fashion as demonstrated below.
jQuery
$.js.dialog('<h3>The Dialog Title</h3><p>Hello, world!</p>'); $.js.dialog('<h3>The Dialog Title</h3><p>Hello, world! The sequel!</p>');
Dialog w/ Callbacks
To display a Dialog, just call $.js.dialog
with a few settings. The DOM manipulation is taken care of by the plugin, so there is work to do outside of the Javascript call. Note: The order of all the options (buttons
, buttonClasses
, callbacks
) matters - the function relies on these being in the same order.
jQuery
var cancelCallback = function(controller, button, event) { $.js.dialog('Cancel was clicked!'); }; var continueCallback = function(c, b, e) { $.js.dialog('Continue was clicked!'); }; $('#BasicDialog').click(function(event) { event.preventDefault(); $.js.dialog( '<h3>Callbacks Sample</h3><p>Would you like to continue?</p>', { buttons: [ 'Cancel', 'Continue' ], buttonClasses: [ 'previous icon', 'next icon' ], callbacks: [ cancelCallback, continueCallback ] } ); });
Collapsible
Collapsible takes each element and looks for two things: a child configurable element that triggers the collapsing, and the element to collapse.
Options
collapsibleSelector
- The jQuery selector for choosing the element that collapses. (default:.collapse
)toggleSelector
- The jQuery selector for choosing the element that toggles the collapse. The selector works off the parent wrapper element. (default:>a
)hidden
- Callback function for when a collapsible is hidden.parent
is set to the parent wrapper element;toggle
is the element that triggered the event.visible(parent, toggle)
- Callback function for when a collapsible is made visible.parent
is set to the parent wrapper element;toggle
is the element that triggered the event.time
- The time (in milliseconds) for the slide animation. (default:250
)easing
- Easing function used for jQuery animations. (default:linear
)autoCollapse
- Boolean that will automatically collapse (or not) all collapsibles. (default:true
)
Demo
sample block
HTML/CSS
The basic HTML setup has a wrapper element that contains two child elements - the trigger and the collapsible element.
<div class="collapsible-wrapper"> <p><a href="#" class="toggle button">[+] Expand</a></p> <pre class="collapsible">sample block </pre> </div>
jQuery
The collapsible function can take a few options. Demoed here are toggleSelector
, hidden
, and visible
.
$('.collapsible-wrapper').collapsible({ toggleSelector: 'a.toggle', hidden: function(parent, toggle) { if (toggle.data('hidden-text')) { toggle.html(toggle.data('hidden-text')); } else { toggle.html('[+] View Demo'); } }, visible: function(parent, toggle) { if (toggle.data('visible-text')) { toggle.html(toggle.data('visible-text')); } else { toggle.html('[-] Hide Demo'); } } });
ScrollTo
The ScrollTo function allows for easy smooth scrolling to an element. The following demonstrates how the top navigation works on this site. It simultaneously pushes a history state while initiating the smooth scroll.
$('#Page>header ul a').click(function(event) { event.preventDefault(); var that = $(this); var scrollDestination = $('a[name="' + that.attr('href').substr(1) + '"]'); if (window.history && window.history.pushState) { window.history.pushState('', scrollDestination.html() + ' - jsMetro Demos', that.attr('href')) } scrollDestination.scrollTo(); });
Forms
As part of the jsMetro package, a few form styles have been included.
Form Elements
Radio 1
Radio 2
Message Sections
Message sections are a great way to tell a user about both problems (errors & warnings) as well as successful completions. The jsMetro CSS includes a few styles to help this.
Error (.error-message
)
Warning (.warning-message
)
Success (.success-message
)
Buttons
a.button a.button.edit.icon a.button.edit.icon.disabled a[disabled="disabled"]
<p> <input type="button" class="button" value="input.button" /> <a class="button" href="#">a.button</a> <a class="edit icon button" href="#">a.button.edit.icon</a> </p>
base add back camera cancel check delete download edit add-to-favs favs ff flag folder heart info mail minus next previous up down overflow parent pause phone play question refresh rew save search settings share upload video
Theming
The stylesheets that give jsMetro its style include support for the built-in style swatches for Windows Phone 7. You can switch the theme of this page by using the buttons below. Give it a try!
Default (Blue) Theme Magenta Theme Purple Theme Teal Theme Lime Theme Brown Theme Pink Theme Orange Theme Red Theme Green Theme
How To
To set the theme, simply add the theme name (in lowercase) to the body element!
<body class="pink">
To change the theme easily, use the theme
function of the framework.
$.js.theme('pink');
Scroll Bar Theming
Scroll bar theming is currently only available for WebKit browsers. If you have WebKit, the scroll bars should be themed according to the current WP7 swatch.
$('.collapsible-wrapper').collapsible({ toggleSelector: 'a.toggle', hidden: function(parent, toggle) { if (toggle.data('hidden-text')) { toggle.html(toggle.data('hidden-text')); } else { toggle.html('[+] View Demo'); } }, visible: function(parent, toggle) { if (toggle.data('visible-text')) { toggle.html(toggle.data('visible-text')); } else { toggle.html('[-] Hide Demo'); } } }); $('.collapsible-wrapper').collapsible({ toggleSelector: 'a.toggle', hidden: function(parent, toggle) { if (toggle.data('hidden-text')) { toggle.html(toggle.data('hidden-text')); } else { toggle.html('[+] View Demo'); } }, visible: function(parent, toggle) { if (toggle.data('visible-text')) { toggle.html(toggle.data('visible-text')); } else { toggle.html('[-] Hide Demo'); } } }); $('.collapsible-wrapper').collapsible({ toggleSelector: 'a.toggle', hidden: function(parent, toggle) { if (toggle.data('hidden-text')) { toggle.html(toggle.data('hidden-text')); } else { toggle.html('[+] View Demo'); } }, visible: function(parent, toggle) { if (toggle.data('visible-text')) { toggle.html(toggle.data('visible-text')); } else { toggle.html('[-] Hide Demo'); } } });
Columnize
Code
$('.columns').columnize({ gap: 20, separator: 'h1, h2, h3, h4, h5, h6, .header' });
Sample
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum consequat felis, non lobortis augue dignissim vel. Phasellus placerat libero et augue adipiscing non laoreet sem suscipit. Proin rutrum placerat massa ac posuere. Ut at felis at urna luctus laoreet. Phasellus augue sapien, tempor tristique pharetra nec, molestie id lorem. Nullam fermentum tempus gravida.
Nunc scelerisque, est vitae vulputate porttitor, dolor risus consectetur tortor, fringilla sagittis neque orci a neque. Donec non turpis non dui varius vehicula. Proin massa urna, ornare at blandit ut, pharetra in dolor. Nam vehicula ultrices metus vel pellentesque.
Phasellus vestibulum ipsum
Phasellus vestibulum ipsum id arcu laoreet tempor. Nam urna velit, tempor vel dictum quis, adipiscing non justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ac urna nec lorem facilisis commodo. Maecenas aliquet, augue imperdiet vestibulum accumsan, diam purus consectetur ante, ut ornare lectus erat ac dui. Mauris tristique enim vel quam malesuada id rhoncus urna aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque mauris ligula, pretium non aliquam ac, dictum at libero. Donec fringilla, eros ut scelerisque aliquet, lorem diam facilisis felis, at fermentum odio nisi eget mauris. Fusce viverra, orci et tempor cursus, augue metus posuere leo, et porta erat est quis tellus. Sed mi libero, placerat non ultrices ultricies, rhoncus eu sapien. Nam mollis, purus at dapibus feugiat, nunc lectus blandit risus, sed bibendum lacus ligula non nunc. Phasellus nulla mi, eleifend nec tempus sed, gravida vitae sem. Cras tincidunt lacinia massa et varius.
Phasellus porttitor interdum orci
Morbi felis arcu, mollis eu lobortis id, fringilla vel sem. Donec at dolor est, id porttitor lectus. Donec magna tortor, tristique vitae hendrerit eu, molestie sit amet orci. Aenean congue risus ultricies tellus vulputate adipiscing. Sed ac arcu ante, at imperdiet nisl. Nulla hendrerit vehicula nunc a varius. Phasellus porttitor interdum orci, et consequat dui euismod id. Aenean porta, erat et sodales pretium, justo massa lacinia metus, ut malesuada neque purus quis quam. Donec id ante lacus, bibendum tincidunt purus. Suspendisse potenti. Morbi quis purus augue, vitae bibendum orci. Fusce imperdiet lacus sit amet magna malesuada blandit. Nulla scelerisque volutpat lectus nec adipiscing. Aenean ut lacus libero, vel malesuada mi.