Metro JS is a JavaScript plugin for jQuery developed to easily enable Metro interfaces on the web.
This release focuses on Live Tiles, the Application Bar and Theming. It's early in the development phase, but all features should work on at least IE7+(Win/WinPhone), Firefox, Chrome, Android, Opera, and Safari(OSX/iOS).
Want to make a 'Me' tile or a 'People' tile like you see on Windows Phone for your website? Metro JS makes it easy!
metrojs.js - jQuery plugins .liveTile, .applicationBar, .theme and .metrojs.preloadImages
metrojs.min.js - minified version of metrojs.js
metrojs.css - base styles for .liveTile, .applicationBar, theme and tile layout definitions
metrojs.min.css - minified version of metrojs.css
images/metroIcons.jpg - windows phone metro icon sprite in dark theme
images/metroIcons_light.jpg - windows phone metro icon sprite in light theme
images/1pixel.gif - placeholder for your sprites/background-position. (not required)
Note: Metro JS is modular. You can choose which modules you'd like to include in the download section
What's Planned
Pivot view ( As of v0.9, carousel mode can be used with the "goto" data method to create a pivot control. Example)
.panorama for long horizontal lists (I'm still tweaking this for android)
Windows Phone / Windows 8 Toast notifications
Theme generator to create custom tile sizes and themes. The theme generator is available for version 0.9 forward.. and it's pretty sweet
Animation repeat property to allow for a static number of animations (i.e. data-repeat="5") data-repeat is available as of 0.8.9.3
Custom triggering functions to allow for custom flip-list patterns As of 0.8.6, you can implement your own triggerDelay function to affect the randomness of flip list
Hardware acceleration. Complete in v0.8.5. CSS animations, transforms and transitions are used to boost performance when available.
.liveTile([options])
Features
Full "future proof" hardware acceleration for browsers that support it now and those that will in the future
An advanced Theme Generator to create custom layouts and accent colors
Uses Modenizr if already available or built in capability checking via the same methods if not
All tile modes support swapping content with images or html at random or sequentially from an array
carousel tile mode to slide through any number of tile faces in arbitrary directions
slide tile mode to stop at an arbitrary number of points to reveal or slide with the tile face behind it (e.g. Me tile, or the animated clouds on the projects page)
flip tile mode to flip between two tile faces
flip-list tile mode to flip any number of tiles in sequence or at custom intervals to create mosaics and other unique content presentations (e.g. People tile or the color strip, skills tile, and the hover list on the home page)
This tile would slide the 'front' div out of the way
at the default delay interval. If a back face is not present, a background accent div is appended to the tile by
default.
Live tiles can contain anything. The default hierarchy for image swapping is {tile}>div>a>img or {tile}>div>img, but those selectors can be customised using the options below
how long to wait between animations (in milliseconds).
Setting the delay value to -1 will use a random delay value between 3500 and 8000 milliseconds (3.5 - 8 seconds).
Setting the delay value to anything lower than -1 (e.g. -2) will call the triggerDelay method (see below) one time to get the delay value.
Namestops Data Attributedata-stopsTypestring or array
Description
How much should the front tile slide in slide mode before pausing.
Setting one stop will make the tile slide between the stop value and 0.
If more than one stop is set, the tile will loop through all stop values
Note: If more than one stop is used, you need to set the final stop to 0px if you want the tile to return to the default position.
NamebounceDirectionsData Attributedata-bounce-dirTypestring or array
Description
Controls the direction that a tile will bounce or tilt in. A click or tap must fall within the region of the option chosen unless the previous region is an '*' as in the the example below
a click handler for the tile. Returning false will prevent the data-link option if it's set. Returning true or not returning a value at all will open the data-link option if it has been set
Supported modesallDefault Valuenull
Example
example click
$(".live-tile").liveTile({
click: function($tile, tileData){
// do some stuff
return false; // or return true;
}
});
NOTE: autoAniDirection is specific to the goto method of carousel mode.
By default, whenever goto is called MetroJS will animate forward or backwards based on the index of the tile face being animated to. If autoAniDirection is false, the data-ani-direction property of that face or the default value for the tile will be used.
a delay that occurs before playOnHover and pauseOnHover is called. Setting this to a value of 200 or greater will reduce accidental flips when a user quickly passes by a tile
a delay that occurs before playOnHover and pauseOnHover call their out action. The default value lets the user move their mouse or finger away and come back before flipping back. This value is added to the value speed property when used. To reduce the speed further you can use a negative value.
fired by by all modes when an animation has finished. note: flip-list mode calls animationComplete after all tile animations have completed. note: The 'this' context is the current tile. e.g. var $tile = $(this);
A function that is called prior to an animation starting. Returning false will cancel the animation from starting. All non static modes call animation starting.
Supported modescarousel, slide, fade, flip, flip-listDefault Value
Example
$('.live-tile').liveTile({
animationStarting: function (tileData, $front, $back) {
// returning false will cancel the animation
}
});
Only applies when hardware acceleration is disabled. If this value is less than 1, flip animations will animate to and from the opacity level specified when they flip
By default this checks to see if modernizer is already in use, but it can be overridden. If you're not using Modernizr, Metro JS will do its own testing internally. If you're using a custom version of Modernizr, Metro JS will need the transforms, transitions, transform3d and touch tests or you can set useModernizr to false.
Swap modules are used to make it easier to swap content out at specific intervals.
You can set the swap option (data-swap='image') and either the frontImages or backImages property to activate the image module.
If you're calling .liveTile for a batch of tiles you can use data-swap-front='image' or data-swap-back='image'
to be more explicit about which content module to use. Additionally, some of the initial options for the html
and image swap modules are shared, to explicitly set the properties for the module, pass the options in an imgSwap object
like in this example.
$(".live-tile").liveTile({
swap:'html,image',
frontContent: ['some html content', '<p>i dont want random></p>'],
frontIsRandom: false,
frontImages: [
{src: 'img1.gif', alt:'some images'},
// note: you can also pass attr and css values directly for images
{ attr: { src:'img2.gif', alt:'i want random' } }
],
imgSwap: { frontIsRandom: true }
});
$('.live-tile').liveTile({
frontImages:[{ src:'koala.jpg', alt:'koala' },
{
src:'tulip.jpg', // path to image
alt:'tulip', // alt text for image
href:'/planting-tulips',// href attribute if 'a' tag present
onclick:'' // onlcick attribute of 'a' or 'img' tag
}
]
});
$('.live-tile').liveTile({
backImages:[{ src:'koala.jpg', alt:'koala' },
{
src:'tulip.jpg', // path to image
alt:'tulip', // alt text for image
href:'/planting-tulips',// href attribute if 'a' tag present
onclick:'' // onlcick attribute of 'a' or 'img' tag
}
]
});
Swap modules are used to make it easier to swap content out at specific intervals.
You can set the swap option (data-swap='html') and either the frontContent or backContent property to activate the html module.
If you're calling .liveTile for a batch of tiles you can use data-swap-front='html' or data-swap-back='html'
to be more explicit about which content module to use. Additionally, some of the initial options for the html
and image swap modules are shared, to explicitly set the properties for the module, pass the options in an htmlSwap object
like in this example.
$(".live-tile").liveTile({
swap:'html,image',
frontContent: ['some content', 'i <strong>dont</strong> want random'],
frontImages: [
{ src: 'img1.gif', alt:'some images' },
// note: you can also pass attr and css values directly for images
{ attr: { src:'img2.gif', alt:'i want random' } }
],
frontIsRandom: true, // this is global
htmlSwap: { frontIsRandom: false } //this is only on the html swap
});
Starts the tile animations. If the tile has not run before and no delay is passed, the initDelay is used. A delay passed into the 'play' method will override the initDelay value if the tile has not previously started.
// cause the tile to start right now
$(".live-tile").liveTile("play", 0);
// cause the tile to start at its specified interval
$(".live-tile").liveTile("play");
// start the tile on a 2 second delay with an object
$(".live-tile").liveTile("play", { delay: 2000 });
Stops all animations and timers without resetting any counts. This method does not reset the hasRun property so the initDelay value will not be used the next time play is called.
Supported modesallDefault Value
Example
// pause the tile
$('.live-tile').liveTile("pause");
Stop animations without resetting counts and then restart the timer. This is equivalent to calling .liveTile("pause") then .liveTile("play"). Restart can be useful for scenarios where you want to restart a countdown before an animation occurs.
Move the carousel to the slide index specified. You can additionally specify a delay, autoAniDirection, animationDirection and direction option.
Note: The delay, animationDirection and direction options are not persisted when they are passed to goto. To set persistent values for these options, set them via the data object $(".live-tile").data("LiveTile")
// goto the next slide
$('.live-tile').liveTile("goto");
// or
$('.live-tile').liveTile("goto", "next");
// goto the previous slide
$('.live-tile').liveTile("goto", "prev");
// go to a slide by index
$('.live-tile').liveTile("goto", 1);
// with a custom animationDirection
$('.live-tile').liveTile("goto", { index:1, animationDirection:'backward' });
This method will call doAction directly rather than triggering the timer. In almost all cases, the 'play' method is a better choice, but this can be helpful for some slide mode cases.
Supported modesallDefault Value
Example
// call the animate method
$('.live-tile').liveTile("animate");
Stops timers if present and recalls the init method with the tileData object. This is helpful if you are posting back the tile's html in an update panel or if you're removing and readding the tile to the DOM
// set up a tile
$("#tile1").liveTile();
// this could be in document ready or called right before the postback
var tile1Data = $("#tile1").data("LiveTile");
//..
// before you remove the tile be sure to stop the tile or call destroy!
$("#tile1").liveTile("destroy");
//..
// this should run after a postback or after the element is removed/readded to the DOM
$("#tile1").liveTile('rebind', tile1Data);
// destroy the tile data
$('.live-tile').liveTile("destroy");
// destroy and remove the css
$('.live-tile').liveTile("destroy", true);
// destroy and remove the css with an object
$('.live-tile').liveTile("destroy", { removeCss: true });
.applicationBar
.applicationBar creates a nested container to house navigation options and additional settings.
The basic premise is that a container (<footer> on this site) is fixed to the bottom of the window or to the bottom of the document when position: fixed; is not supported.
You can use the .theme api to append accent colors and theme options as needed.
The applicationBar also contains a series of metro icons that you can reuse to get the same effect as an appbar on Windows Phone. These classes are part of a sprite sheet and are used by adding a specific sprite class to a descendant of the appbar-buttons class.
Here is a list of the sprite classes you can use.
"search", "home", "twitter", "calendar", "storm", "down", "camera", "camcorder", "qmark", "about", "share", "rain", "cancel", "close", "delete", "trash", "tag",
"addcontact", "save", "snow", "msg", "email", "clock", "edit", "circle", "moon", "calc", "gear", "plus", "dot", "restart", "return", "add", "phone", "film", "back",
"car", "forward", "selectmany", "stop", "contacts", "select", "sun", "dpad", "play"
Basic Example
Example applicationBar markup and initialization code
Improvements to touch support on Chrome/Safari for desktop
Pointer Events standard implementation added
Bower and Node JS packages now available e.g. bower install metrojs or npm install metrojs
0.9.75 -> 0.9.75a
Corrected issue with swapBack introduced 0.9.75
0.9.74 -> 0.9.75
Added onHoverOutDelay (aka data-hoverout-delay) for controlling the amount of time that playOnHover and pauseOnHover wait before doing their out animation.
This value is calculated by adding it to the speed value (speed + onHoverOutDelay). You an use a negative value to reduce the time.
Corrected an issue with rebind not properly passing the data object parameter when it was called.
Added better error handling for cases when a tile is removed from the DOM or used in an AJAX postback panel but was not destroyed or stopped.
The Theme Generator now has Media Query support for making responsive layouts!
0.9.73 -> 0.9.74
Corrected an issue where .appBar was not properly getting theme options on some html structures.
I have not previously listed applicationBar menu icon sprite options, I'm adding them to the documentation for applicationBar, but here is a list: "search", "home", "twitter", "calendar", "storm", "down", "camera", "camcorder", "qmark", "about", "share", "rain", "cancel", "close", "delete", "trash", "tag",
"addcontact", "save", "snow", "msg", "email", "clock", "edit", "circle", "moon", "calc", "gear", "plus", "dot", "restart", "return", "add", "phone", "film", "back",
"car", "forward", "selectmany", "stop", "contacts", "select", "sun", "dpad", "play"
0.9.72 -> 0.9.73
Corrected issue where data-ani-direction would be ignored unless it was set on the tile face
The bounce classes have had their additional qualifiers removed, which should make it easy to reuse bounce functionality
To use, add the "bounce" class to an element.
You can then add or toggle one of the following classes to get the desired effect.
"bounce-c" (center), "bounce-t" (top), "bounce-r" (right), "bounce-b" (bottom),
"bounce-l" (left), "bounce-tl"(top left), "bounce-tr" (top right), "bounce-bl" (bottom left), or "bounce-br" (bottom right). Have fun!
0.9.71 -> 0.9.72
Improved content module performance and tweaked to avoid prototype issues
preloadImages now works properly with image objects and not just string arrays
applicationBar calculates its collapsed height automatically by default for improved support for swapping to 'small' appbar mode
accentBgHover class added
0.9.7 -> 0.9.71
Set default value for playOnHoverEvent back to 'both'
0.9.6 -> 0.9.7
translate() is now used for carousel and slide mode when available.
useTranslate (aka data-use-translate) added to disable translate() and transition on top/left
pauseOnHoverEvent and playOnHoverEvent added. These are defaulted to 'both' which is the normal behavior for playOnHover and pauseOnHover, but can be changed to 'mouseover' etc.
.theme default selectors will now allow nesting the ul. (eg 'ul.theme-options,.theme-options>ul' and 'ul.base-theme-options,.base-theme-options>ul'). You can change this to whatever suits your needs at jQuery.fn.metrojs.theme.defaults
0.9.5 -> 0.9.6
'fade' mode added. This mode fades the front tile face in and out.
bounce now updates to different directions as the mouse/finger moves. This can be disabled by setting bounceFollowsMove aka 'data-bounce-follows' to false
bounceDirections correctly cleans up the perspective origin it sets on it's parent
carousel mode now uses percentages for tile movement to enable responsive scenarios.
All tile modes now pause their timer until the animation has finished (flip was the only mode that did not before)
Have Your Say
Metro JS is still a work in progress, so now is a great time to get your feedback in. Let me know what you think in the comments below or contact me on twitter @DGreenwell
Have Your Say
Metro JS is still a work in progress, so now is a great time to get your feedback in. Let me know what you think in the comments below or contact me on twitter @DGreenwell
blog comments powered by Disqus