drewgreenwell

Metro JS

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!

What's on this page

Metro JS

Custom sizes and layouts and colors oh my!

What's Included

Note: Metro JS is modular. You can choose which modules you'd like to include in the download section

What's Planned

.liveTile([options])

Features

  • Full "future proof" hardware acceleration for browsers that support it now and those that will in the future
  • Free! Metro JS is licensed under the MIT License
  • 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)

Anatomy of a liveTile

A minimal tile HTML structure

<div class="live-tile">
    <div>front</div>
    <div>back</div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".live-tile").liveTile();
    });
</script>
	        
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

Basic Example

For a more fully featured demo, check out the fiddle around section or the home page.

slide tile
1
2
3 flip tile front
4 flip tile back
1 carousel slide 1
2 carousel slide 2
3 carousel slide 3
4 carousel slide 4
flip list
  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4
static tile

Static tiles can take advantage of theming too!

Four live tiles using a static set of images and one static tile
The Code


<div class="tiles blue tile-group four-wide">
    
    <div class="live-tile" data-speed="750" data-delay="3000">
        <span class="tile-title">slide tile</span>
        <div><img class="full" src="/images/sample/1tw.gif" alt="1" /></div>
        <div><img class="full" src="/images/sample/2t.gif" alt="2" /></div>
    </div>
    
    <div class="red live-tile" data-mode="flip" data-delay="4000">            
        <div>
            <img class="full" src="/images/sample/3tw.gif" alt="3" />
            <span class="tile-title">flip tile front</span>
        </div>
        <div>
            <img class="full" src="/images/sample/4tw.gif" alt="4" />
            <span class="tile-title">flip tile back</span>
        </div>
    </div>
    
    <div class="live-tile" data-mode="carousel" data-direction="horizontal" data-delay="2500">
		<div>
			<img class="full" src="/images/sample/1tw.gif" alt="1" />
			<span class="tile-title">carousel slide 1</span>
		</div>
		<div>
			<img class="full" src="/images/sample/2t.gif" alt="2" />
			<span class="tile-title accent">carousel slide 2</span>
		</div>
        <div>
			<img class="full" src="/images/sample/3tw.gif" alt="3" />
			<span class="tile-title">carousel slide 3</span>
		</div>
        <div>
			<img class="full" src="/images/sample/4t.gif" alt="4" />
			<span class="tile-title accent">carousel slide 4</span>
		</div>
	</div>
    
    <div class="list-tile mango">
        <span class="tile-title">flip list</span>
        <ul class="flip-list fourTiles" data-mode="flip-list" data-delay="2000">
            <li>
                <div><img class="full" src="/images/sample/1t.gif" alt="1" /></div>
                <div><img class="full" src="/images/sample/1tw.gif" alt="1" /></div>
            </li>
            <li>
                <div><img class="full" src="/images/sample/2t.gif" alt="2" /></div>
                <div><img class="full" src="/images/sample/2tw.gif" alt="2" /></div>
            </li>
            <li>
                <div><img class="full" src="/images/sample/3t.gif" alt="3" /></div>
                <div><img class="full" src="/images/sample/3tw.gif" alt="3" /></div>
            </li>
            <li data-direction="horizontal">
                <div><img class="full" src="/images/sample/4t.gif" alt="4" /></div>
                <div><img class="full" src="/images/sample/4tw.gif" alt="4" /></div>
            </li>
        </ul>
    </div>
    
    <div class="live-tile accent green exclude">
        <span class="tile-title">static tile</span>
        <p>Static tiles can take advantage of theming too!</p>
    </div>
</div>

<script type="text/javascript">
    // apply regular slide universally unless .exclude class is applied 
    // NOTE: The default options for each liveTile are being pulled from the 'data-' attributes
    $(".live-tile, .flip-list").not(".exclude").liveTile();
</script>
Four live tiles and one static tile initialized using 'data-' attributes.

Fiddle Around! (More Examples)

Choose any link below to open/edit a JS Fiddle demonstration on this page. Check out the home page to see Metro JS in action

.liveTile Options

Showing 69 options Jump To - Image Swap Options | Html Swap Options | .liveTile Methods Sort By
  • Name mode Data Attribute data-mode Type string
    Description
    carousel
    slide any number of tile faces infinitely or slide to a specific tile face
    fade
    fade the front face in and out
    slide
    slide two tile faces at an arbitrary number of stopping points
    flip
    flip two tile faces in a vertical or horizontal direction
    flip-list
    trigger a list of tiles to flip between tile faces with custom delays
    none
    no animations are performed. This is useful if you just want to bind a bounce, click or link to the tile.
    Supported modes all Default Value slide Options carousel, fade, flip, flip-list, slide, none
  • Name speed Data Attribute data-speed Type number
    Description
    how fast should animations be performed (in milliseconds).
    Supported modes carousel,fade,flip,flip-list,slide Default Value 500
  • Name initDelay Data Attribute data-initdelay Type number
    Description
    how long to wait before starting (in milliseconds). If the value is '-1' the delay property is used
    Supported modes carousel,fade,flip,flip-list,slide Default Value -1 Options -1 = use delay, any number greater than or equal to zero is used
  • Name delay Data Attribute data-delay Type number
    Description
    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.
    Supported modes carousel,fade,flip,flip-list,slide Default Value 5000
  • Name startNow Data Attribute data-start-now Type boolean
    Description
    should the tile immediately start or wait util play or restart has been called
    Supported modes carousel,fade,flip,flip-list,slide Default Value true
  • Name stops Data Attribute data-stops Type string 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.
    Supported modes slide Default Value 100%
    Example
    Example of multiple stops
    
    <div class="live-tile" data-stops="30px,50%,120px,100%,0px">
        <div>front</div>
        <div>back</div>
    </div>
    
  • Name stack Data Attribute data-stack Type boolean
    Description
    Should tiles in slide mode move synchronously as if stacked (e.g Me tile).
    Supported modes slide Default Value false
  • Name direction Data Attribute data-direction Type string
    Description
    The direction that tiles slide and flip.
    Supported modes flip, flip-list, slide, carousel Default Value vertical Options horizontal, vertical
  • Name bounce Data Attribute data-bounce Type boolean
    Description
    should the tile tilt or shrink when tapped. You can use bounceDirections to choose which directions a tile will tilt or shrink.
    Supported modes carousel,fade,flip,flip-list,slide Default Value false
  • Name bounceDirections Data Attribute data-bounce-dir Type string 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
    Supported modes carousel, fade, flip, slide, none Default Value 'all' Options 'all', 'edges', 'corners', '*', 'c', 'tl', 'tr', 'bl'. 'br'. 't', 'l', 'b', 'r'
    Example
    Example of different bounceDirections options
    
    
    
    bouncy
    bouncy
    bouncy
  • Name bounceFollowsMove Data Attribute data-bounce-follows Type boolean
    Description
    Should the tile change the active bounce direction as the mouse or touch moves
    Supported modes carousel, fade, flip, slide, none Default Value true
  • Name click   Type function
    Description
    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 modes all Default Value null
    Example
    example click
    
    $(".live-tile").liveTile({ 
          click: function($tile, tileData){ 
                    // do some stuff
                    return false; // or return true; 
                }
    });
    
  • Name link Data Attribute data-link Type string
    Description
    a url to go to when clicked or tapped
    Supported modes all Default Value empty string
  • Name newWindow Data Attribute data-new-window Type boolean
    Description
    should the link option be opened in a new window
    Supported modes all Default Value false
  • Name animationDirection Data Attribute data-ani-direction Type string
    Description
    Should animations be played forward or backward
    Supported modes carousel Default Value forward Options backward, forward
  • Name autoAniDirection   Type boolean
    Description
    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.

    Supported modes carousel Default Value true
    Example
    example autoAniDirection
    
    $(".live-tile").liveTile("goto", { index: "next", autoAniDirection: false});
    
  • Name tileSelector Data Attribute data-tile-selector Type string selector
    Description
    The selector used by carousel mode and flip-list mode to select containers
    Supported modes carousel, flip-list Default Value >div,>li,>p,>img,>a
  • Name tileFaceSelector Data Attribute data-face-selector Type string selector
    Description
    the selector used to choose the front and back container ( face ) for the tile
    Supported modes fade, flip, flip-list, slide Default Value >div,>li,>p,>img,>a
  • Name ignoreDataAttributes   Type boolean
    Description
    should data attributes be ignored
    Supported modes all Default Value false
  • Name pauseOnHover Data Attribute data-pause-onhover Type boolean
    Description
    should tile animations be paused on hover in and restarted on hover out
    Supported modes carousel,fade,flip,flip-list,slide Default Value false
  • Name playOnHover Data Attribute data-play-onhover Type boolean
    Description
    should "play" be called when the tile is hovered or touched
    Supported modes carousel,fade,flip,flip-list,slide Default Value false
  • Name onHoverDelay Data Attribute data-hover-delay Type number
    Description
    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
    Supported modes carousel,fade,flip,flip-list,slide Default Value 0
  • Name onHoverOutDelay Data Attribute data-hoverout-delay Type number
    Description
    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.
    Supported modes carousel,fade,flip,flip-list,slide Default Value 200
  • Name repeatCount Data Attribute data-repeat Type number
    Description
    how many times should the animation be performed. If the value is '-1' the animations will loop until stopped or paused
    Supported modes carousel,fade,flip,flip-list,slide Default Value -1
  • Name appendBack Data Attribute data-appendback Type boolean
    Description
    appends the .last tile if one doesnt exist (slide and flip only)
    Supported modes fade,flip,flip-list,slide Default Value true
  • Name alwaysTrigger Data Attribute data-always-trigger Type boolean
    Description
    should every item in a flip list trigger every time a delay passes
    Supported modes flip-list Default Value false
  • Name flipListOnHover Data Attribute data-flip-onhover Type boolean
    Description
    should items in flip-list flip and stop when hovered
    Supported modes flip-list Default Value false
  • Name triggerDelay   Type function
    Description
    Returns a delay (in milliseconds) for each tile in a list. Returning -1 for the delay will skip the tile.
    Supported modes flip-list Default Value function (idx) { return Math.random() * 3000;}
  • Name animationComplete   Type function
    Description
    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);
    Supported modes carousel,fade,flip,flip-list,slide Default Value function (tileData, $front, $back) { }
    Example
    animationComplete example
    
    $(".live-tile").liveTile({
      mode: 'flip',
      animationComplete: function(tileData, $front, $back){
        //console.log('tile has animated ' + tileData.loopCount + ' times');
      }
    });
    
  • Name animationStarting   Type function
    Description
    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 modes carousel, slide, fade, flip, flip-list Default Value
    Example
    
    $('.live-tile').liveTile({
        animationStarting: function (tileData, $front, $back) {
            // returning false will cancel the animation
        }
    });
    
  • Name flipListOnHoverEvent   Type string
    Description
    The event that triggers the fli method to fire for tiles in 'flip-list' mode with 'flipListOnHover' set to true
    Default Value mouseout Options mouseout, mouseover, click, etc.
  • Name noHAflipOpacity Data Attribute flip-opacity Type string
    Description
    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
    Supported modes flip, flip-list Default Value '1' Options 0-1
  • Name haTransFunc   Type string
    Description
    the tranisiton-timing function to use in hardware accelerated mode
    Supported modes carousel, slide, flip, flip-list Default Value ease Options ease | linear | ease-in | ease-out | ease-in-out...
  • Name noHaTransFunc   Type string
    Description
    the animation easing to use in non hardware accelerated mode
    Supported modes carousel,fade,flip,flip-list,slide Default Value linear Options swing | linear | plugins..
  • Name currentIndex Data Attribute data-start-index Type number
    Description
    what is the current stop index for slide mode or slide index for carousel mode
    Supported modes carousel, slide Default Value 0
  • Name useModernizr   Type boolean
    Description
    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.
    Supported modes all Default Value (typeof (window.Modernizr) != "undefined")
  • Name useHardwareAccel Data Attribute data-ha Type boolean
    Description
    should css animations, transitions and transforms be used when available
    Supported modes all Default Value true
  • Name swap Data Attribute data-swap Type string or array
    Description
    which swap modules are active for this tile
    Supported modes carousel,fade,flip,flip-list,slide Default Value [ ] Options html, image
  • Name useTranslate Data Attribute data-use-translate Type boolean
    Description
    Should Metro JS use translate() when available rather than top/left
    Supported modes carousel,slide Default Value true
  • Name swapFront Data Attribute data-swap-front Type string or array
    Description
    override the available swap modules for the front face
    Supported modes carousel,fade,flip,flip-list,slide Default Value [ ] Options html, image
  • Name swapBack Data Attribute data-swap-back Type string or array
    Description
    override the available swap modules for the back face
    Supported modes carousel,fade,flip,flip-list,slide Default Value [ ] Options html, image
  • Name faces   Type object
    Description
    an object containing jQuery elements for the front and/or back tile face
    Supported modes flip, slide Default Value { $front: null, $back: null }
Image Swap Optionsreturn to .liveTileOptions

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 }
});

  • Name preloadImages   Type boolean
    Description
    should images be preloaded as soon as the module is loaded
    Supported modes carousel,fade,flip,flip-list,slide Default Value false
  • Name imageCssSelector Data Attribute data-image-css Type string selector
    Description
    the selector used to choose a an image to apply a src or background to
    Supported modes carousel,fade,flip,flip-list,slide Default Value >img,>a>img
  • Name frontImages   Type string or array
    Description
    An array of image objects that are applied to the front tile. This list is used to pull new images when animations complete.
    Supported modes carousel,fade,flip,flip-list,slide Default Value [ ]
    Example
    example frontImages declaration
    
    $('.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
            }
        ] 
    });
    
  • Name frontIsRandom Data Attribute data-front-israndom Type boolean
    Description
    should images be chosen at random or in order
    Supported modes carousel,fade,flip,flip-list,slide Default Value true
  • Name frontIsInGrid Data Attribute data-front-isingrid Type boolean
    Description
    only chooses one item for each iteration in flip-list
    Supported modes flip-list Default Value false
  • Name frontIsBackgroundImage Data Attribute data-front-isbg Type boolean
    Description
    set the src attribute or css background-image property
    Supported modes carousel,fade,flip,flip-list,slide Default Value false
  • Name fadeSwap Data Attribute data-fadeswap Type boolean
    Description
    Should the image be faded out as the src or background-image property is updated.
    Supported modes carousel,fade,flip,flip-list,slide Default Value false
  • Name alwaysSwapFront Data Attribute data-front-alwaysswap Type boolean
    Description
    Should the front face always be swapped. This can be useful if you are animating a tile face in slide mode with multiple stops
    Supported modes carousel,fade,flip,flip-list,slide Default Value false
  • Name alwaysSwapBack Data Attribute data-back-alwaysswap Type boolean
    Description
    Should the back face always be swapped. This can be useful if you are animating a tile face in slide mode with multiple stops
    Supported modes carousel,fade,flip,flip-list,slide Default Value false
  • Name backImages   Type string or array
    Description
    An array of image objects that are applied to the back tile. This list is used to pull new images when animations complete.
    Supported modes carousel,fade,flip,flip-list,slide Default Value [ ]
    Example
    example backImages declaration
    
    $('.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
            }
        ] 
    });
    
  • Name backIsRandom Data Attribute data-back-israndom Type boolean
    Description
    Should images be chosen at random or in order. Only applies when backImages is set
    Supported modes carousel,fade,flip,flip-list,slide Default Value true
  • Name backIsInGrid Data Attribute data-back-isingrid Type boolean
    Description
    Only chooses one item for each iteration in flip-list. This is useful for dividing an image into parts. Only applies when backImages is set
    Supported modes flip-list Default Value false
  • Name backIsBackgroundImage Data Attribute data-back-isbg Type boolean
    Description
    Set the src attribute or css background-image property of the selected image. Only applies when backImages is set
    Supported modes carousel,fade,flip,flip-list,slide Default Value false
Html Swap Optionsreturn to .liveTileOptions

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 
});

  • Name frontContent   Type string or array
    Description
    an array of html content to use for the front
    Supported modes carousel,fade,flip,flip-list,slide Default Value [ ]
  • Name frontIsRandom Data Attribute data-front-israndom Type boolean
    Description
    should html be chosen at random or in order
    Supported modes carousel,fade,flip,flip-list,slide Default Value true
  • Name frontIsInGrid Data Attribute data-front-isingrid Type boolean
    Description
    only chooses one item for each iteration in flip-list
    Supported modes flip-list Default Value false
  • Name backContent   Type string or array
    Description
    an array of html content to use for the back
    Supported modes carousel,fade,flip,flip-list,slide Default Value [ ]
  • Name backIsRandom Data Attribute data-back-israndom Type boolean
    Description
    should html be chosen at random or in order
    Supported modes carousel,fade,flip,flip-list,slide Default Value true
  • Name backIsInGrid Data Attribute data-back-isingrid Type boolean
    Description
    only chooses one item for each iteration in flip-list
    Supported modes flip-list Default Value false

.liveTile Methodsreturn to .liveTileOptions

Use these methods to get extra control over a tile's behavior

  • Name play Data Attribute .liveTile("play", delay) Type function
    Description
    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.
    Supported modes all Default Value tile delay Options optional - #, { }
    Example
    
    // 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 });
    
  • Name pause Data Attribute .liveTIle("pause") Type function
    Description
    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 modes all Default Value
    Example
    
    // pause the tile
    $('.live-tile').liveTile("pause");
    
  • Name stop Data Attribute .liveTIle("stop") Type function
    Description
    Stops all animations and resets any associated counts. This method causes the initDelay value to be used next time 'play' is called
    Supported modes all Default Value
    Example
    
    // stop the tile
    $('.live-tile').liveTile("stop");
    
  • Name restart Data Attribute .liveTile("restart", delay) Type function
    Description
    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.
    Supported modes all Default Value tile delay Options optional - #, { }
    Example
    
    // restart with the tile's delay values
    $(".live-tile").liveTile("restart");
    // restart in 2 seconds
    $(".live-tile").liveTile("restart", 2000);
    // restart immediately
    $(".live-tile").liveTile("restart", { delay: 0 });
    
  • Name goto Data Attribute .liveTile("goto", index) Type function
    Description
    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")
    Supported modes carousel Default Value next Options optional - #, 'next', 'prev', { }
    Example
    
    // 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' });
    
  • Name animate Data Attribute .liveTIle("animate") Type function
    Description
    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 modes all Default Value
    Example
    
    // call the animate method
    $('.live-tile').liveTile("animate");
    
  • Name rebind Data Attribute .liveTile("rebind", tileData) Type function
    Description
    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
    Supported modes all Default Value { } Options optional - { }
    Example
    
        // 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);
    
  • Name destroy Data Attribute .liveTIle("destroy", removeCss) Type function
    Description
    Stops all animations and timers and removes any associated data. You can optionally remove all css properties and classes added by Metro JS.
    Supported modes all Default Value false Options optional - boolean, { }
    Example
    
    // 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

	<footer class="appbar">
			<nav>
			<ul id="menu" class="appbar-buttons">
				<li>
					<a href="#" class="home"><img src="/images/1pixel.gif" alt="home" /></a>
					<span class="charm-title">Home</span>
				</li>
				<li>
					<a href="#" class="about"><img src="/images/1pixel.gif" alt="about" /></a>
					<span class="charm-title">About</span>
				</li>
				<li>
					<a href="#" target="_blank" class="twitter"><img src="/images/1pixel.gif" alt="twitter" /></a>
					<span class="charm-title">Twitter</span>
				</li>
			</ul>
		</nav>
		<a class="etc">&bull;&bull;&bull;</a>
		<ul class="theme-options clear">
			
		</ul>
		<ul class="base-theme-options clear">		
		</ul>
	</footer>
	<script type="text/javascript">
			var appBar, metroJs;
			$(document).ready(function(){
				appBar = $(".appbar").applicationBar({ 
					preloadAltBaseTheme: true, 
					bindKeyboard: true,
					metroLightUrl: 'images/metroIcons_light.jpg',
					metroDarkUrl: 'images/metroIcons.jpg'
				});
				// append the theme options 
				metroJs = jQuery.fn.metrojs;
				metroJs.theme.appendAccentColors({
					accentListContainer: ".theme-options"
				});
				metroJs.theme.appendBaseThemes({
					baseThemeListContainer: ".base-theme-options"
				});
			});
	</script>

.applicationBar Options

  • Name applyTheme   Type boolean
    Description
    should the theme be loaded from local storage and applied to the page
    Default Value true
  • Name themePicked   Type function
    Description
    called when a new theme is chosen. the chosen theme (dark | light)
    Default Value function (tColor) { }
  • Name accentPicked   Type function
    Description
    called when a new accent is chosen. the chosen theme (blue, mango, purple, etc.)
    Default Value function (aColor) { }
  • Name loaded   Type function
    Description
    called if applyTheme is true onload when a theme has been loaded from local storage or overridden by options
    Default Value function (tColor, aColor) { }
  • Name duration   Type number
    Description
    how fast should animation be performed, in milliseconds
    Default Value 500
  • Name expandHeight   Type string
    Description
    height the application bar to expand to when opened
    Default Value '320px'
  • Name collapseHeight   Type string
    Description
    height the application bar will collapse back to when closed
    Default Value '60px'
  • Name bindKeyboard   Type boolean
    Description
    should up and down keys on keyborad be bound to the application bar
    Default Value true
  • Name baseThemeCssSelector   Type string selector
    Description
    selector to place dark or light class after load or selection
    Default Value 'body'
  • Name accentCssSelector   Type string selector
    Description
    selector to place accent color class after load or selection
    Default Value '.tiles'
  • Name accentColor   Type string
    Description
    the default accent color.
    Default Value 'blue' Options amber, blue, brown, cobalt, crimson, cyan, emerald, green, indigo, lime, magenta, mango, mauve, olive, orange, pink, purple, red, sienna, steel, teal, violet, yellow
  • Name baseTheme   Type string
    Description
    the default theme color
    Default Value 'dark' Options light, dark
  • Name metroLightUrl   Type string
    Description
    the url for the metro light icons (only needed if preload 'preloadAltBaseTheme' is true)
    Default Value 'images/ metroIcons_light.jpg'
  • Name metroDarkUrl   Type string
    Description
    the url for the metro dark icons (only needed if preload 'preloadAltBaseTheme' is true)
    Default Value 'images/metroIcons.jpg'
  • Name preloadAltBaseTheme   Type boolean
    Description
    should the applicationBar icons be pre loaded for the alternate theme to enable fast theme switching
    Default Value false

Get the bits (Download)

What's Changed

View Entire Change log

0.9.75 -> 0.9.75a

0.9.74 -> 0.9.75

0.9.73 -> 0.9.74

0.9.72 -> 0.9.73

0.9.71 -> 0.9.72

0.9.7 -> 0.9.71

0.9.6 -> 0.9.7

0.9.5 -> 0.9.6

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