Metro-UI系统-1-tile标签
一 效果图
二 各个效果的详解
1,简单磁贴
<div class="tile" data-role="title"> <!--定义一个磁贴-->
<div class="tile-content iconic"><!--设置磁贴的内容-->
<icon />
</div>
</div>
2,带有标题和边角的磁贴
<div class="tile">
<div class="tile-content">
<span class="tile-label">Label</span> <!--设置磁贴的标题-->
<span class="tile-badge">5</span> <!--设置磁贴下方的字数-->
</div>
</div>
3,一组图片的磁贴
<div class="tile">
<div class="tile-content image-set"> <!--定义一组图片-->
<img src="data:images/1.jpg">
<img src="data:images/1.jpg">
<img src="data:images/1.jpg">
<img src="data:images/1.jpg">
<img src="data:images/1.jpg">
</div>
</div>
3,一张图片的磁贴
<div class="tile">
<div class="tile-content">
<img src="data:images/1.jpg" data-role="fitImage" data-format="square"> <!--正常图片大小,自动裁剪-->
</div>
</div>
4,带有翻页动态效果的磁贴
<div class="tile">
<div class="tile-content">
<div class="carousel" data-role="carousel"> <!--带有旋转的样式的磁贴-->
<div class="slide"><a href="http:www.baidu.com"><img src="data:images/1.jpg"></a></div>
<div class="slide"><img src="data:images/1.jpg"></div>
</div>
</div>
</div>
5,选择样式的磁贴
<div class="tile element-selected"> <!--选中样式的磁贴-->
12321321
</div>
6,内容由下向上滑动磁贴
<div class="tile">
<div class="tile-content slide-up"> <!--定义内容是向上滑动的-->
<div class="slide"> <!--触发焦点时向上滑动-->
... Main slide content ...
</div>
<div class="slide-over"> <!--触发焦点时由下向上滑动覆盖内容-->
... Over slide content here ...
</div>
</div>
</div>
7,内容由上向下滑动
<div class="tile">
<div class="tile-content slide-down"> <!--定义内容是向下滑动的-->
<div class="slide"><!--触发焦点时向上滑动-->
... Main slide content ...
</div>
<div class="slide-over"> <!--触发焦点时由上向下滑动覆盖内容-->
... Over slide content here ...
</div>
</div>
</div>
8,内容由左向右滑动
<div class="tile">
<div class="tile-content slide-left"><!--定义内容是由左向右滑动的-->
<div class="slide">
... Main slide content ...
</div>
<div class="slide-over">
... Over slide content here ...
</div>
</div>
</div>
9,定义内容是由右向左滑动
<div class="tile">
<div class="tile-content slide-right"> <!--定义内容是由右向左滑动的-->
<div class="slide">
... Main slide content ...
</div>
<div class="slide-over">
... Over slide content here ...
</div>
</div>
</div>
10,放大效果
<div class="tile">
<div class="tile-content zooming"> <!--定义内容放大的-->
<div class="slide">
... Slide content here ...
</div>
</div>
</div>
11,缩小效果
<div class="tile">
<div class="tile-content zooming-out"> <!--定义内容缩小的-->
<div class="slide">
... Slide content here ...
</div>
</div>
</div>
12,上下滑动的效果
<div class="tile-wide" data-role="tile" data-effect="slideUpDown"> <!--定义内容是滑动的 上下滑动 类似滚动效果-->
<div class="tile-content">
<div class="live-slide">...slide content...</div>
...
<div class="live-slide">...slide content2...</div>
</div>
</div>
13,使用ICon的效果
三 源码地址
https://git.oschina.net/yudaming/metro
四 个人小站(提供各种技术类网站分享)
http://dmsite.chinacloudsites.cn/
Metro-UI系统-1-tile标签的更多相关文章
- UGUI的优点新UI系统
UGUI的优点新UI系统 第1章 新UI系统概述 UGUI的优点新UI系统,新的UI系统相较于旧的UI系统而言,是一个巨大的飞跃!有过旧UI系统使用体验的开发者,大部分都对它没有任何好感,以至于在过 ...
- Bootstrap看厌了?试试Metro UI CSS吧
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Bootstrap作为一款超级流行的前端框架,已经成为很多人的首选,不过有时未免有点审 ...
- ”Metro UI之磁贴(二)
也来“玩”Metro UI之磁贴(二) 继昨天的“也来“玩”Metro UI之磁贴(一)”之后,还不过瘾,今天继续“玩”吧——今天把单选的功能加进来,还有磁贴的内容,还加了发光效果(CSS3,IE9+ ...
- 也来“玩”Metro UI之磁贴
也来“玩”Metro UI之磁贴 Win8出来已有一段时间了,个人是比较喜欢Metro UI的.一直以来想用Metro UI来做个自己的博客,只是都没有空闲~~今天心血来潮,突然想自己弄一个磁贴玩玩, ...
- 微软BI SSRS 2012 Metro UI Win 8 风格的报表课程案例全展示
开篇介绍 微软BI SSRS 2012 Metro UI 高端报表视频教程 (http://www.hellobi.com/course/15)课程从2014年6月开始准备,于2014年9月在 天善B ...
- WIN8 Metro UI 风格下的微软报表开发与设计 Metro UI SSRS - BIWORK
开篇介绍 作为 BI 系统前端展现的报表,其重要性不言而喻,我们对于一个好的报表的要求也无非主要包含以下几点: 1. 数据完整和正确,数据质量没有问题 2. 友好的清晰的界面,整洁美观,有得体的格式 ...
- 也来“玩”Metro UI之磁贴(二)
继昨天的“也来“玩”Metro UI之磁贴(一)”之后,还不过瘾,今天继续“玩”吧——今天把单选的功能加进来,还有磁贴的内容,还加了发光效果(CSS3,IE9+浏览器),当然,还是纯CSS,真的要感谢 ...
- 【今日推荐】10大流行的 Metro UI 风格的 Bootstrap 主题和模板
1. BootMetro 基于 Twitter Bootstrap 的简单灵活的 HTML.CSS 和 Javascript 框架,Win8 风格,大爱啊! 立即下载 效果演示 2. Boot ...
- Metro UI 界面完全解析 (转载)
Metro在微软的内部开发名称为“ typography-based design language”(基于排版的设计语言).它最早出现在微软电子百科全书95,此后微软又有许多知名产品使用了Metro ...
- 也来“玩”Metro UI之磁贴(一)
Win8出来已有一段时间了,个人是比较喜欢Metro UI的.一直以来想用Metro UI来做个自己的博客,只是都没有空闲~~今天心血来潮,突然想自己弄一个磁贴玩玩,动手……然后就有了本篇. Win8 ...
随机推荐
- Ros学习注意点
编译问题 回调函数不能有返回类型,严格按照实例程序编写 第三方库的问题,packet.xml里面必须加上自己的依赖文件 之前文档里面介绍的有点问题. 主要表现在:当你建立包的时候就写入了依赖,那就不需 ...
- 让你彻底理解 “==”与 Equals
相信很多朋友在面对,对象判等时经常会犹豫是用“==”还是Equals呢?有时候发现两者得到的结果相同,但有时候有不同, 究竟在什么情况下"==" 会相等,什么情况下Equals会不 ...
- [HDOJ5445]Food Problem(优先队列优化多重背包)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5445 题意:多重背包 分析:f[i][j]=max(f[i-1][j-k*w[i]]+k*v[i]) 将j ...
- JPEG格式
Jpg文件格式[参考] 微处理机中的存放顺序有正序(big endian)和逆序(little endian)之分.正序存放就是高字节存放在前低字节在后,而逆序存放就是低字节在前高字节在后.例如,十六 ...
- json数据转换失败json_last_error int(4)
最近在程序中使用json_decode($data,true);转换失败, 并且使用 json_last_error();方法返回最后一次转换的错误,json_last_error();返回int(4 ...
- STL数组处理常用函数
reverse(a,a+n)反转 sort(a,a+n,cmp)排序 unique(a,a+n,cmp)对于有序集合进行去重,返回新数组最后一个元素的指针 next_permutatoin(a,a+n ...
- xshell4|5远程连接工具
志同道合,方能谈天说地! 对比其他的工具,对于功能来说xshell是比较厉害的.有能力的可以支持正版! Xshell4 链接: http://pan.baidu.com/s/1jHAgboa 密码: ...
- iOS 'The sandbox is not sync with the Podfile.lock'问题解决
问题描述: github下载的Demo,很多时候使用到CocoaPods,有的时候因为依赖关系或者版本问题不能编译运行.出现例如The sandbox is not sync with the Pod ...
- 5-touch 命令总结
- 安卓 Context 和 Application的关系
1. 我开始一直不理解显式Intent中传一个this(当前的activity)是为什么.因为Intent里面的构造方法对应的只有 Context, Class.后面查资料才发现 Intent i = ...