Enable Win8 Metro Interfaces Easily - Metro.js

Metro.js is a jQuery Plugin that helps you create windows8 Metro Style Interfaces with Live Tiles, the Application Bar and Theming easily.

Basic Usage:

1. Include jQuery Library and Metro.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="MetroJs.js"></script>

2. Include Metro.js CSS

<link href="MetroJs.css" rel="stylesheet" type="text/css" />

3. Markup

<!-- Apply blue theme as default for all tiles -->
<div id="tiles" class="blue"> 
<!-- Sliding Tile that shows 100% of the back tile every 3 seconds -->
<div class="live-tile" data-stops="100%" data-speed="750" data-delay="3000"> <span class="tile-title">slide tile (figure 2a)</span>
<div><img src="images/sample/1tw.gif" alt="1" /></div>
<div><img src="images/sample/2t.gif" alt="2" /></div>
</div>
<!-- Red Flip Tile that flips every 4 seconds -->
<div class="red live-tile" data-mode="flip" data-delay="4000">
<div> <img src="images/sample/3tw.gif" alt="3" /> <a class="tile-title">flip tile front (figure 2b)</a> </div>
<div> <img src="images/sample/4tw.gif" alt="4" /> <a class="tile-title">flip tile back (figure 2b)</a> </div>
</div>
<!-- Mango Flip List that triggers every 3 seconds -->
<div class="mango list-tile"> <span class="tile-title">flip list (figure 2c)</span>
<ul class="flip-list fourTiles" data-mode="flip-list" data-delay="3000">
<li>
<div><img src="images/sample/1t.gif"  alt="1" /></div>
<div><img src="images/sample/1tw.gif" alt="1" /></div>
</li>
<li>
<div><img src="images/sample/2t.gif"  alt="2" /></div>
<div><img src="images/sample/2tw.gif" alt="2" /></div>
</li>
<li>
<div><img src="images/sample/3t.gif"  alt="3" /></div>
<div><img src="images/sample/3tw.gif" alt="3" /></div>
</li>
<li data-direction="horizontal">
<div><img src="images/sample/4t.gif"  alt="4" /></div>
<div><img src="images/sample/4tw.gif" alt="4" /></div>
</li>
</ul>
</div>
<!-- Green Static Tile -->
<div class="green live-tile exclude"> <span class="tile-title">static tile (figure 2d)</span>
<p>Static tiles can take advantage of theming too!</p>
</div>
</div>

4. Call the plugin

<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>

Change log:

v0.9.7 (2013-07-01)

• box-sizing:border-box added to tile and tile-face

---

This awesome jQuery plugin is developed by drewgreenwell. For more Advanced Usages, please check the demo page or visit the official website.