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.
- Latest - jsMetro 1.2.6
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 ($.js.notify) is a simple function that creates a WP7-like Notification at the top of the browser window.
$.js.notify('hello, world');
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 ]
}
);
});
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 ($.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 ($.js.map) is a basic data-to-DOM mapping function to help populate the DOM with JSON data.
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
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent