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

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

Hello, world!

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.

Queue 2 Messages

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.

Basic Dialog

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

textarea

option 1 option 2 option 3

label for checkbox1

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>

<body class="pink">

$.js.theme('pink');

$('.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