Tiles 组件简介:
Tiles是你应用程序子模块的表现方式。你的内容显示在Tile中,理想状态下这些东西是可以定期更新的,特别是你的内容是实时的,这样更新可以与用户更好的交流。 Tiles 可以文本和图像的组合一起显示,也可以以一枚徽章的状态来显示。 Tile是一个区块,可以放在任何容器内。
Tile的默认尺寸大小是150×150像素。 Tile尺寸也可以添加子类来增加更多的对象: .double(-vertical)
, .triple(-vertical)
,.quadro(-vertical)
.
可以对Tile设置已选择状态:”selected”。你也可以通过添加类名.bg-color-*
来改变Tile的背景色。
Tiles 语法定义:
<div class="tile"></div> <div class="tile double"></div> <div class="tile selected"></div> <div class="tile bg-color-orange"></div>
Metro UI CSS 案例Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!--metro UI css 样式文件(组件基础)--> <link href="css/metro-bootstrap.css" rel="stylesheet"> <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> <!--metro UI css 样式文件(组件基础)--> <link href="css/modern.css" rel="stylesheet"> <link href="css/modern-responsive.css" rel="stylesheet"> <!--加载jquery js 文件--> <script src="js/jquery/jquery.min.js"></script> <script src="js/jquery/jquery.widget.min.js"></script> <!--加载metro js 文件--> <script src="js/metro/metro.min.js"></script> <title>Modern UI CSS 学习笔记</title> </head> <body class="modern-ui" style="background: #f1f1f1"> <div class="page"> <div class="page-header"> <div class="page-header-content"> <h3>Metro UI CSS样式文件之 Tiles组件</h3> </div> </div> <div class="page-region"> <div class="page-region-content"> <p>Tiles 基本样式</p> <div class="clearfix"> <div class="tile"></div> <div class="tile double"></div> <div class="tile selected"></div> <div class="tile bg-color-orange"></div> </div> </div> </div> </div> </body> </html>
效果展示:
Tile内容
Tile可以使用类名.tile-content
将内容放置在子容器中。类名.tile-content
顶部和底部有10px的内距,距左边和右边有15px的内距。
Tile 语法定义:
<div class="tile"> <div class="tile-content"> ...content here... </div> </div>
Metro UI CSS 案例Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!--metro UI css 样式文件(组件基础)--> <link href="css/metro-bootstrap.css" rel="stylesheet"> <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> <!--metro UI css 样式文件(组件基础)--> <link href="css/modern.css" rel="stylesheet"> <link href="css/modern-responsive.css" rel="stylesheet"> <!--加载jquery js 文件--> <script src="js/jquery/jquery.min.js"></script> <script src="js/jquery/jquery.widget.min.js"></script> <!--加载metro js 文件--> <script src="js/metro/metro.min.js"></script> <title>Modern UI CSS 学习笔记</title> </head> <body class="modern-ui" style="background: #f1f1f1"> <div class="page"> <div class="page-header"> <div class="page-header-content"> <h3>Metro UI CSS样式文件之 Tiles组件</h3> </div> </div> <div class="page-region"> <div class="page-region-content"> <p>Tiles 基本样式</p> <div class="clearfix"> <div class="tile"></div> <div class="tile double"></div> <div class="tile selected"></div> <div class="tile bg-color-orange"></div> </div> <p>Tiles 内容</p> <div class="clearfix"> <div class="tile double bg-color-green"> <div class="tile-content"> <h2>mattberg@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Congratulations! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="brand"> <div class="badge">12</div> <img src="images/Mail128.png" class="icon"> </div> </div> <div class="tile bg-color-red icon"> <b class="check"></b> <div class="tile-content"> <img src="images/Market128.png"> </div> <div class="brand"> <span class="name">Store</span> <span class="badge">6</span> </div> </div> <div class="tile double bg-color-blueDark"> <div class="tile-content"> <img class="place-right" src="images/michael.jpg"> <h4 style="margin-bottom: 5px;">michael_angiulo</h4> <p> I just saw Thor last night. It was awesome! I think you'd love it. </p><h5>RT @julie_green</h5> <p></p> </div> <div class="brand"> <span class="name">Tweet@rama</span> </div> </div> </div> </div> </div> </div> </body> </html>
效果展示:
Tiles内容内置的子类
Tiles内容在子块可使用的类名: .icon
, .image
, .image-set
, .image-slider
.
Metro UI CSS 案例Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!--metro UI css 样式文件(组件基础)--> <link href="css/metro-bootstrap.css" rel="stylesheet"> <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> <!--metro UI css 样式文件(组件基础)--> <link href="css/modern.css" rel="stylesheet"> <link href="css/modern-responsive.css" rel="stylesheet"> <!--加载jquery js 文件--> <script src="js/jquery/jquery.min.js"></script> <script src="js/jquery/jquery.widget.min.js"></script> <!--加载metro js 文件--> <script src="js/metro/metro.min.js"></script> <title>Modern UI CSS 学习笔记</title> </head> <body class="modern-ui" style="background: #f1f1f1"> <div class="page"> <div class="page-header"> <div class="page-header-content"> <h3>Metro UI CSS样式文件之 Tiles组件</h3> </div> </div> <div class="page-region"> <div class="page-region-content"> <p>Tiles 基本样式</p> <div class="clearfix"> <div class="tile"></div> <div class="tile double"></div> <div class="tile selected"></div> <div class="tile bg-color-orange"></div> </div> <p>Tiles 内容</p> <div class="clearfix"> <div class="tile double bg-color-green"> <div class="tile-content"> <h2>mattberg@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Congratulations! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="brand"> <div class="badge">12</div> <img src="images/Mail128.png" class="icon"> </div> </div> <div class="tile bg-color-red icon"> <b class="check"></b> <div class="tile-content"> <img src="images/Market128.png"> </div> <div class="brand"> <span class="name">Store</span> <span class="badge">6</span> </div> </div> <div class="tile double bg-color-blueDark"> <div class="tile-content"> <img class="place-right" src="images/michael.jpg"> <h4 style="margin-bottom: 5px;">michael_angiulo</h4> <p> I just saw Thor last night. It was awesome! I think you'd love it. </p><h5>RT @julie_green</h5> <p></p> </div> <div class="brand"> <span class="name">Tweet@rama</span> </div> </div> </div> <p>Tiles内容内置的子类</p> <div class="grid"> <div class="row"> <div class="span2"> <h5>字类名<code>.icon</code></h5> <div class="tile icon"> <div class="tile-content"> <img src="images/armor.png"> </div> </div> </div> <div class="span4"> <h5>子类名<code>.image</code></h5> <div class="tile double image"> <div class="tile-content"> <img alt="" src="images/5.jpg"> </div> </div> </div> <div class="span4"> <h5>子类名<code>.image-set</code></h5> <div class="tile double image-set"> <div class="tile-content"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content"> <img alt="" src="images/5.jpg"> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
效果展示:
Tile滑块控件
使用tile-slider
,你需要在你的页面</head>
前加上tile-slider.js
并在Title对像中添加自定义属性data-role="tile-slider"
。 也可以为Tile对像设置特定的参数,例如:direction
, duration
和period
,data-param-direction(duration, period)
Metro UI CSS 案例Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!--metro UI css 样式文件(组件基础)--> <link href="css/metro-bootstrap.css" rel="stylesheet"> <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> <!--metro UI css 样式文件(组件基础)--> <link href="css/modern.css" rel="stylesheet"> <link href="css/modern-responsive.css" rel="stylesheet"> <!--加载jquery js 文件--> <script src="js/jquery/jquery.min.js"></script> <script src="js/jquery/jquery.widget.min.js"></script> <!--加载metro js 文件--> <script src="js/metro/metro.min.js"></script> <!--加载第三方js 文件--> <script src="js/modern/tile-slider.js"></script> <title>Modern UI CSS 学习笔记</title> </head> <body class="modern-ui" style="background: #f1f1f1"> <div class="page"> <div class="page-header"> <div class="page-header-content"> <h3>Metro UI CSS样式文件之 Tiles组件</h3> </div> </div> <div class="page-region"> <div class="page-region-content"> <p>Tiles 基本样式</p> <div class="clearfix"> <div class="tile"></div> <div class="tile double"></div> <div class="tile selected"></div> <div class="tile bg-color-orange"></div> </div> <p>Tiles 内容</p> <div class="clearfix"> <div class="tile double bg-color-green"> <div class="tile-content"> <h2>mattberg@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Congratulations! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="brand"> <div class="badge">12</div> <img src="images/Mail128.png" class="icon"> </div> </div> <div class="tile bg-color-red icon"> <b class="check"></b> <div class="tile-content"> <img src="images/Market128.png"> </div> <div class="brand"> <span class="name">Store</span> <span class="badge">6</span> </div> </div> <div class="tile double bg-color-blueDark"> <div class="tile-content"> <img class="place-right" src="images/michael.jpg"> <h4 style="margin-bottom: 5px;">michael_angiulo</h4> <p> I just saw Thor last night. It was awesome! I think you'd love it. </p><h5>RT @julie_green</h5> <p></p> </div> <div class="brand"> <span class="name">Tweet@rama</span> </div> </div> </div> <p>Tiles内容内置的子类</p> <div class="grid"> <div class="row"> <div class="span2"> <h5>字类名<code>.icon</code></h5> <div class="tile icon"> <div class="tile-content"> <img src="images/armor.png"> </div> </div> </div> <div class="span4"> <h5>子类名<code>.image</code></h5> <div class="tile double image"> <div class="tile-content"> <img alt="" src="images/5.jpg"> </div> </div> </div> <div class="span4"> <h5>子类名<code>.image-set</code></h5> <div class="tile double image-set"> <div class="tile-content"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content"> <img alt="" src="images/5.jpg"> </div> </div> </div> </div> </div> <p>Tile滑块插件</p> <div data-role="tile-slider" class="tile double image-slider"> <div class="tile-content" style="position: absolute; left: 0px; top: -57.7693px;"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 92.2307px;"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> <img alt="" src="images/5.jpg"> </div> </div> <div data-param-period="3000" data-param-direction="left" data-role="tile-slider" class="tile double image-slider"> <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content" style="position: absolute; left: -113.548px; top: 0px;"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content" style="position: absolute; left: 196.452px; top: 0px;"> <img alt="" src="images/5.jpg"> </div> </div> <div data-param-period="3000" data-param-direction="down" data-role="tile-slider" class="tile double image-slider"> <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 47.4342px;"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: -102.566px;"> <img alt="" src="images/5.jpg"> </div> </div> <div data-param-duration="3000" data-param-period="3000" data-param-direction="right" data-role="tile-slider" class="tile double image-slider"> <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 0px;"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> <img alt="" src="images/5.jpg"> </div> </div> <div data-param-period="3000" data-role="tile-slider" class="tile double bg-color-green"> <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> <h2>mattberg@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Congratulations! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 0px;"> <h2>tina@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="brand"> <div class="badge">12</div> <img src="images/Mail128.png" class="icon"> </div> </div> </div> </div> </div> </body> </html>
默认参数值:
- Duration – 1000ms
- Period – 2000ms
- Direction – “up”
效果展示:
Tile 状态:
Tile 状态(品牌信息)可以使用类名.brand
or .tile-status
放在子容器之中。 Tile 状态也可以修改背景颜色,例如使用类名.bg-color-*
Metro UI CSS 案例Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!--metro UI css 样式文件(组件基础)--> <link href="css/metro-bootstrap.css" rel="stylesheet"> <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> <!--metro UI css 样式文件(组件基础)--> <link href="css/modern.css" rel="stylesheet"> <link href="css/modern-responsive.css" rel="stylesheet"> <!--加载jquery js 文件--> <script src="js/jquery/jquery.min.js"></script> <script src="js/jquery/jquery.widget.min.js"></script> <!--加载metro js 文件--> <script src="js/metro/metro.min.js"></script> <!--加载第三方js 文件--> <script src="js/modern/tile-slider.js"></script> <title>Modern UI CSS 学习笔记</title> </head> <body class="modern-ui" style="background: #f1f1f1"> <div class="page"> <div class="page-header"> <div class="page-header-content"> <h3>Metro UI CSS样式文件之 Tiles组件</h3> </div> </div> <div class="page-region"> <div class="page-region-content"> <p>Tile状态</p> <div class="grid"> <div class="row"> <div class="span4"> <div class="tile double"> <div class="brand"> <div class="badge">10</div> <div class="name">Mail</div> </div> </div> </div> <div class="span4"> <div class="tile double bg-color-green"> <div class="brand"> <div class="badge">12</div> <img src="./images/Mail128.png" class="icon"> </div> </div> </div> <div class="span4"> <div class="tile double bg-color-pink"> <div class="brand"> <div class="name">Photos</div> </div> </div> </div> </div> </div> <p>Tiles 基本样式</p> <div class="clearfix"> <div class="tile"></div> <div class="tile double"></div> <div class="tile selected"></div> <div class="tile bg-color-orange"></div> </div> <p>Tiles 内容</p> <div class="clearfix"> <div class="tile double bg-color-green"> <div class="tile-content"> <h2>mattberg@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Congratulations! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="brand"> <div class="badge">12</div> <img src="images/Mail128.png" class="icon"> </div> </div> <div class="tile bg-color-red icon"> <b class="check"></b> <div class="tile-content"> <img src="images/Market128.png"> </div> <div class="brand"> <span class="name">Store</span> <span class="badge">6</span> </div> </div> <div class="tile double bg-color-blueDark"> <div class="tile-content"> <img class="place-right" src="images/michael.jpg"> <h4 style="margin-bottom: 5px;">michael_angiulo</h4> <p> I just saw Thor last night. It was awesome! I think you'd love it. </p><h5>RT @julie_green</h5> <p></p> </div> <div class="brand"> <span class="name">Tweet@rama</span> </div> </div> </div> <p>Tiles内容内置的子类</p> <div class="grid"> <div class="row"> <div class="span2"> <h5>字类名<code>.icon</code></h5> <div class="tile icon"> <div class="tile-content"> <img src="images/armor.png"> </div> </div> </div> <div class="span4"> <h5>子类名<code>.image</code></h5> <div class="tile double image"> <div class="tile-content"> <img alt="" src="images/5.jpg"> </div> </div> </div> <div class="span4"> <h5>子类名<code>.image-set</code></h5> <div class="tile double image-set"> <div class="tile-content"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content"> <img alt="" src="images/5.jpg"> </div> </div> </div> </div> </div> <p>Tile滑块插件</p> <div data-role="tile-slider" class="tile double image-slider"> <div class="tile-content" style="position: absolute; left: 0px; top: -57.7693px;"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 92.2307px;"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> <img alt="" src="images/5.jpg"> </div> </div> <div data-param-period="3000" data-param-direction="left" data-role="tile-slider" class="tile double image-slider"> <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content" style="position: absolute; left: -113.548px; top: 0px;"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content" style="position: absolute; left: 196.452px; top: 0px;"> <img alt="" src="images/5.jpg"> </div> </div> <div data-param-period="3000" data-param-direction="down" data-role="tile-slider" class="tile double image-slider"> <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 47.4342px;"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: -102.566px;"> <img alt="" src="images/5.jpg"> </div> </div> <div data-param-duration="3000" data-param-period="3000" data-param-direction="right" data-role="tile-slider" class="tile double image-slider"> <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 0px;"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> <img alt="" src="images/5.jpg"> </div> </div> <div data-param-period="3000" data-role="tile-slider" class="tile double bg-color-green"> <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> <h2>mattberg@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Congratulations! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 0px;"> <h2>tina@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="brand"> <div class="badge">12</div> <img src="images/Mail128.png" class="icon"> </div> </div> </div> </div> </div> </body> </html>
效果展示:
Tile 状态之徽章:
一个徽章可以显示的是1-99的数字也可以是图形。徽章都是定位在Tile区块的右下角位置。 Metro UI CSS 支持Windows 8内置的主要徽章: activity, alert, available, away, busy, newMessage, paused, playing, unavailable, error and attention。默认徽章的背景色是蓝色,但我们也可以修改的。
Metro UI CSS 案例Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!--metro UI css 样式文件(组件基础)--> <link href="css/metro-bootstrap.css" rel="stylesheet"> <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> <!--metro UI css 样式文件(组件基础)--> <link href="css/modern.css" rel="stylesheet"> <link href="css/modern-responsive.css" rel="stylesheet"> <!--加载jquery js 文件--> <script src="js/jquery/jquery.min.js"></script> <script src="js/jquery/jquery.widget.min.js"></script> <!--加载metro js 文件--> <script src="js/metro/metro.min.js"></script> <!--加载第三方js 文件--> <script src="js/modern/tile-slider.js"></script> <title>Modern UI CSS 学习笔记</title> </head> <body class="modern-ui" style="background: #f1f1f1"> <div class="page"> <div class="page-header"> <div class="page-header-content"> <h3>Metro UI CSS样式文件之 Tiles组件</h3> </div> </div> <div class="page-region"> <div class="page-region-content"> <p>Tile 徽章</p> <div class="clearfix"> <div class="tile"> <div class="tile-status"> <div class="badge bg-color-blue">99</div> </div> </div> <div class="tile"> <div class="tile-status"> <div class="badge activity"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge alert"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge available"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge away"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge busy"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge newMessage"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge paused"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge playing"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge unavailable"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge error"></div> </div> </div> <div class="tile"> <div class="brand"> <div class="badge attention"></div> </div> </div> </div> <p>Tile状态</p> <div class="grid"> <div class="row"> <div class="span4"> <div class="tile double"> <div class="brand"> <div class="badge">10</div> <div class="name">Mail</div> </div> </div> </div> <div class="span4"> <div class="tile double bg-color-green"> <div class="brand"> <div class="badge">12</div> <img src="./images/Mail128.png" class="icon"> </div> </div> </div> <div class="span4"> <div class="tile double bg-color-pink"> <div class="brand"> <div class="name">Photos</div> </div> </div> </div> </div> </div> <p>Tiles 基本样式</p> <div class="clearfix"> <div class="tile"></div> <div class="tile double"></div> <div class="tile selected"></div> <div class="tile bg-color-orange"></div> </div> <p>Tiles 内容</p> <div class="clearfix"> <div class="tile double bg-color-green"> <div class="tile-content"> <h2>mattberg@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Congratulations! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="brand"> <div class="badge">12</div> <img src="images/Mail128.png" class="icon"> </div> </div> <div class="tile bg-color-red icon"> <b class="check"></b> <div class="tile-content"> <img src="images/Market128.png"> </div> <div class="brand"> <span class="name">Store</span> <span class="badge">6</span> </div> </div> <div class="tile double bg-color-blueDark"> <div class="tile-content"> <img class="place-right" src="images/michael.jpg"> <h4 style="margin-bottom: 5px;">michael_angiulo</h4> <p> I just saw Thor last night. It was awesome! I think you'd love it. </p><h5>RT @julie_green</h5> <p></p> </div> <div class="brand"> <span class="name">Tweet@rama</span> </div> </div> </div> <p>Tiles内容内置的子类</p> <div class="grid"> <div class="row"> <div class="span2"> <h5>字类名<code>.icon</code></h5> <div class="tile icon"> <div class="tile-content"> <img src="images/armor.png"> </div> </div> </div> <div class="span4"> <h5>子类名<code>.image</code></h5> <div class="tile double image"> <div class="tile-content"> <img alt="" src="images/5.jpg"> </div> </div> </div> <div class="span4"> <h5>子类名<code>.image-set</code></h5> <div class="tile double image-set"> <div class="tile-content"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content"> <img alt="" src="images/5.jpg"> </div> </div> </div> </div> </div> <p>Tile滑块插件</p> <div data-role="tile-slider" class="tile double image-slider"> <div class="tile-content" style="position: absolute; left: 0px; top: -57.7693px;"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 92.2307px;"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> <img alt="" src="images/5.jpg"> </div> </div> <div data-param-period="3000" data-param-direction="left" data-role="tile-slider" class="tile double image-slider"> <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content" style="position: absolute; left: -113.548px; top: 0px;"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content" style="position: absolute; left: 196.452px; top: 0px;"> <img alt="" src="images/5.jpg"> </div> </div> <div data-param-period="3000" data-param-direction="down" data-role="tile-slider" class="tile double image-slider"> <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 47.4342px;"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: -102.566px;"> <img alt="" src="images/5.jpg"> </div> </div> <div data-param-duration="3000" data-param-period="3000" data-param-direction="right" data-role="tile-slider" class="tile double image-slider"> <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> <img alt="" src="images/1.jpg"> </div> <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> <img alt="" src="images/2.jpg"> </div> <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> <img alt="" src="images/3.jpg"> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 0px;"> <img alt="" src="images/4.jpg"> </div> <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> <img alt="" src="images/5.jpg"> </div> </div> <div data-param-period="3000" data-role="tile-slider" class="tile double bg-color-green"> <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> <h2>mattberg@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Congratulations! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="tile-content" style="position: absolute; left: 0px; top: 0px;"> <h2>tina@live.com</h2> <h5>Re: Wedding Annoucement!</h5> <p> Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for... </p> </div> <div class="brand"> <div class="badge">12</div> <img src="images/Mail128.png" class="icon"> </div> </div> </div> </div> </div> </body> </html>
效果展示: