Implementation of Metro effect by jquery

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

1.<head>The labels need this reference metrojs.css, jquery.js, metro.js, demo code is as follows

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="http://www.drewgreenwell.com/content/metrojs.css" rel="stylesheet" />

    <script src="http://code.jquery.com/jquery-1.7.1.js"></script>

    <script src="http://www.drewgreenwell.com/scripts/metrojs.js"></script>

</head>


The following post complete code:

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <link href="http://www.drewgreenwell.com/content/metrojs.css" rel="stylesheet" />
 7     <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
 8     <script src="http://www.drewgreenwell.com/scripts/metrojs.js"></script>
 9 </head>
10 <body>
11     <h1>Simple Metro demo</h1>
12     <!--The first is a div as Metro container, the container can be placed in a plurality of liveTile (dynamic magnet), class= "black" with what kind of style, there are other options, website now support custom-->
13     <div class="blue">
14         <!--This is the first liveTile-->
15         <!--Note that the class= "live-tile" Oh, this is can be changed, but the JS $(".Live-tile").LiveTile (OH); synchronization-->
16         <div class="live-tile"> 
17             Each liveTile should have two div, respectively, as the two picture
18             <div><a href="#">I was the first liveTile</a></div>
19             <div>
20                 <p>I was the second face first liveTile oh.</p>
21             </div>
22         </div>
23          <!--The following is second liveTile-->
24         <!--The default width height is 150px, can be changed.-->
25         <div class="live-tile" style="width:300px; height:300px">
26             <div>I was second liveTile</div>
27             <div>
28                 <p>Put the following picture.</p>
29                 <img src="http://www.baidu.com/img/bdlogo.gif" alt="I am Baidu oh" />
30             </div>
31         </div>
32     </div>
33     <script type="text/javascript">
34         $(document).ready(function () {
35             $(".live-tile").liveTile();
36         });
37     </script>
38 </body>
39 </html>

Want to get a iframe to display the effect, but no way to get, but also very late, tired, do not get the, are interested in their own copy code.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Fiona at November 20, 2013 - 6:57 PM