jsMetro v... Demos

Pop Notifications

$.js.popNotify('Hello, world.');

Notify Me!

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).

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

Demo

[+] View 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)

Useful for validation summary messages.

  • Can house HTML
  • Red color tells user there is a problem.

Warning (.warning-message)

Useful for validation summary messages.

  • Can house HTML
  • Red color tells user there is a slight problem.

Success (.success-message)

Useful for validation summary messages.

  • Can house HTML
  • Green color tells user there is was a success / completion.

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>

[+] View Demo

base add back camera cancel check delete download edit add-to-favs favs ff flag folder heart info mail minus up down overflow parent pause phone play question refresh rew save search settings 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.