Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Set of jQuery and Javascript functions meant to help develop Metro UI components on websites.
tree: bf5ad3b9d4

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
design
source
LICENSE.markdown
README.markdown

README.markdown

jsMetro ReadMe

jsMetro (jsmetro.johnsedlak.com) is a set of jQuery/js functions created with a goal of bringing Metro design elements to the web. The secondary goal is to learn about jQuery plugin and general javascript development.

Releases

Getting Started

The easiest way to get started is to view the samples at jsmetro.johnsedlak.com which is a live version of the master branch. The jsMetro Framework includes Notify, Dialog, Collapsible, ScrollTo, Map and some associated HTML/CSS tools & styles.

Notify

Notify ($.js.notify) is a simple function that creates a WP7-like Notification at the top of the browser window.

$.js.notify('hello, world');

Dialog

Dialog (WIP) ($.js.dialog) creates a modal dialog with programmable options and content.

Simple

$.js.dialog('<h3>The Dialog Title</h3><p>Hello, world!</p>');

Queueing

Dialog supports queuing automatically. Supply more than one message at a time and it will display them in sequence.

$.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 Options

You can, of course, supply your own custom buttons for the dialog and have methods called when one of this buttons is clicked.

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

The Collapsible function ($.fn.collapsible) collapses elements and allows users to toggle visibility via a second element.

HTML

<div class="collapsible-wrapper">
    <p><a href="#" class="toggle button">[+] Expand</a></p>
    <pre class="collapsible">sample block
    </pre>
</div>

jQuery

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

ScrollTo ($.fn.scrollTo) provides smoothly animated scrolling to any element. The sample uses this for the main navigation.

$('#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();
});

Map

Map ($.js.map) is a basic data-to-DOM mapping function to help populate the DOM with JSON data.

Theming

jsMetro has builtin theming support for the native color swatches for Windows Phone 7.

$.js.theme('pink');

Any of the following values are valid, though more can be added via CSS:

  • blue
  • magenta
  • purple
  • teal
  • lime
  • brown
  • pink
  • orange
  • red
  • green

Contributing

If you want to help/contribute, I am looking for complete Metro widgets and the like that follow the specs & guidelines set forth by the existing js files. In the future I will update this with a stricter set of guidelines.

Something went wrong with that request. Please try again.