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 layou 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;
}
});
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
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
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, 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");
//..
// 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.
Basic Example
Example applicationBar markup and initialization code
bounceDirections aka data-bounce-dir added to allow tilt bouncing of tiles in addition to the default scale. You can limit the directions explicitly or use phrases like 'edges' or 'corners'.
animationComplete now correctly passes the current tile as the 'this'context
Resolved an issue with the swap modules not always triggering in slide mode
Added fadeSwap to the image swap module to force a fade when the image is changed
Added alwaysSwapFront and alwaysSwapBack to the image module. This can be useful in slide mode if you want to make the front and back face swap simultaneously
0.9d -> 0.9d1
Fixed typo causing global scope on a carousel property
haTransFunc and noHaTransFunc added to expose easing properties of animations
Support for jQuery 1.3.2 added
0.9c -> 0.9d
You can now declare data-direction and data-ani-direction on each tile face in carousel mode
Calling 'goto' with no options is now the same as calling .liveTile('goto', 'next')
autoAniDirection option added to 'goto' to override the index based direction swapping
Issue with carousel mode getting index from all siblings resolved (fixes issues with a global tile-title in a carousel)
newWindow support added to data-link for flip-list
flipListOnHoverEvent option added to allow flipping based on events other than mouseout
flipListOnHover now works when startNow is set to false
issue with .themeLoaded resolved
accentBorderTop, accentBorderRight, accentBorderBottom and accentBorderLeft classes added for theming
.applicationBar now exposes its methods through the "ApplicationBar" data object
slideOpen and slideClosed methods added to .applicationBar, you can call them via .data("ApplicationBar")
handleSelector added to .applicationBar so you can use something other than 'a.etc'
0.9b -> 0.9c
Corrected issue with destroy unbinding bounce twice
Added onHoverDelay aka data-hover-delay to allow a delay before a tile play or pause is triggered when a user hovers the tile
Resolved issue with .applicationBar in jQuery 1.9
.fourTiles and .nineTiles tile sizes are now relative to their container. The mosaic background-positions are still defined for one-tile size.
I'm planning to create a mosaic generator to create custom CSS for tile mosaics.
0.9a -> 0.9b
The fadeout effect used in flip animations on non hardware accelerated browsers has been disabled by default. To turn it back on you can set noHAflipOpacity: '0'.
Fixed a flicker that occurs when playOnHover is set and a user hovers in and out of a flip tile faster than the css reset can be applied.
0.9 -> 0.9a
Added direction support to the 'goto' carousel method in addition to animationDirection. see JS Fiddle example here
Finished updating calls to appendStyleProperties. (Thanks Devline)
Style change to help IE8 and below
Updated destroy method
padding-box style does not have consistent enough support and has been removed.
Padding removed from .face class. You can get padding on content by using a 'p' tag
0.8.9.3l -> 0.9
Note: 0.9 is a full rewrite. I made every effort to keep 100% backward compatibility with 0.8, but please test your code before going live.
More often than not, if a change in your code is required, it will be a reduction in the amount of code.
Full rewrite! Improved performance, touch support, new features.
Improved compatibility with IE10
150px X 150px with a 5px margin is the new default tile size. I have added a theme generator here to let you generate your own tile sizes (Previous versions used 180px X 180px with a 15px margin).
New css classes to help size and layout tiles have been added.
.tile-group is intended to be a wrapper for tiles
.tile-strip is intended to wrap a group of tiles within a tile-group
.copy-tile is intended for use with plain text styles (you can add an accent class as needed)
.live-tile, .list-tile, .copy-tile, .tile-group and .tile-strip all support the #-wide #tall syntax
the #-wide/#-tall classes range from half, one, two, three, four, five, six, seven, eight, nine and ten
'half-tile' is also supported as shorthand for half-wide half-tall
Flip animations are now much smoother
startNow aka data-start-now added to eliminate the lazy load requirements
playOnHover aka data-play-onhover added
'carousel' mode added. Slide any number of tile faces in any direction.
'goto' method added for use with carousel mode
animationDirection aka data-ani-direction added
'none' mode added to make it easy to use bounce / link with no timer overhead
link aka data-link option added
newWindow aka data-new-window option added to be used in conjunction with link
bounce aka data-bounce added to make a tile shrink when tapped/clicked
'image' Swap module now supports passing attr and css options directly.
// be sure to undo any changes you make!
var images = [{ attr:{ title:'my title',src:'img1.gif' alt:'1'}, css:{ borderColor:'' } },
{ attr:{ title:'', src:'img2.gif', alt:'2' }, css:{ borderColor:'red' } }];
'html' swap module added. (supports an array of html content)
Important: swap aka data-swap has been added. a swap property is now required to activate any content modules
swap properties include 'swap', 'swapFront' and 'swapBack'. swaps support a value of 'image', 'html' or 'image,html'
CSS Selector options are now named tileSelector and tileFaceSelector
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