Metro-UI系统-1-tile标签

一 效果图

 

二 各个效果的详解

 1，简单磁贴

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #ff0000">  data-role</span><span style="color: #0000ff">="title"</span><span style="color: #0000ff">></span>  <span style="color: #008000"><!--</span><span style="color: #008000">定义一个磁贴</span><span style="color: #008000">--></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content iconic"</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000">设置磁贴的内容</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><span style="color: #800000">icon </span><span style="color: #0000ff">/></span> 
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span>

2，带有标题和边角的磁贴

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">span </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-label"</span><span style="color: #0000ff">></span>Label<span style="color: #0000ff"></span><span style="color: #800000">span</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">设置磁贴的标题</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><span style="color: #800000">span </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-badge"</span><span style="color: #0000ff">></span>5<span style="color: #0000ff"></span><span style="color: #800000">span</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">设置磁贴下方的字数</span><span style="color: #008000">--></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span>

3，一组图片的磁贴

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content image-set"</span><span style="color: #0000ff">></span>  <span style="color: #008000"><!--</span><span style="color: #008000">定义一组图片</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span>

 

 

3,一张图片的磁贴

 

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #ff0000"> data-role</span><span style="color: #0000ff">="fitImage"</span><span style="color: #ff0000"> data-format</span><span style="color: #0000ff">="square"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">正常图片大小，自动裁剪</span><span style="color: #008000">--></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span>

 

 

4，带有翻页动态效果的磁贴

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="carousel"</span><span style="color: #ff0000"> data-role</span><span style="color: #0000ff">="carousel"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">带有旋转的样式的磁贴</span><span style="color: #008000">--></span>
                <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="http:www.baidu.com"</span><span style="color: #0000ff">><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span><span style="color: #800000">a</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span>

 

 

5，选择样式的磁贴

 

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile element-selected"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">选中样式的磁贴</span><span style="color: #008000">--></span><span style="color: #000000">
        12321321
    </span><span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span>

 

 

 6，内容由下向上滑动磁贴

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content slide-up"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容是向上滑动的</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">触发焦点时向上滑动</span><span style="color: #008000">--></span><span style="color: #000000">
                ... Main slide content ...
            </span><span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide-over"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">触发焦点时由下向上滑动覆盖内容</span><span style="color: #008000">--></span><span style="color: #000000">
                ... Over slide content here ...
            </span><span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span>

 

 

7,内容由上向下滑动

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content slide-down"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容是向下滑动的</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000">触发焦点时向上滑动</span><span style="color: #008000">--></span><span style="color: #000000">
                ... Main slide content ...
            </span><span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide-over"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">触发焦点时由上向下滑动覆盖内容</span><span style="color: #008000">--></span><span style="color: #000000">
                ... Over slide content here ...
            </span><span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span>

8，内容由左向右滑动

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content slide-left"</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000">定义内容是由左向右滑动的</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #000000">
                ... Main slide content ...
            </span><span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide-over"</span><span style="color: #0000ff">></span><span style="color: #000000">
                ... Over slide content here ...
            </span><span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span>

 

 

9，定义内容是由右向左滑动

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content slide-right"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容是由右向左滑动的</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #000000">
                ... Main slide content ...
            </span><span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide-over"</span><span style="color: #0000ff">></span><span style="color: #000000">
                ... Over slide content here ...
            </span><span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span>

 

10，放大效果

    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content zooming"</span><span style="color: #0000ff">></span>  <span style="color: #008000"><!--</span><span style="color: #008000">定义内容放大的</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #000000">
                ... Slide content here ...
            </span><span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span>

 

  

11，缩小效果

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content zooming-out"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容缩小的</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #000000">
                ... Slide content here ...
            </span><span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span>

 

12，上下滑动的效果

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-wide"</span><span style="color: #ff0000"> data-role</span><span style="color: #0000ff">="tile"</span><span style="color: #ff0000"> data-effect</span><span style="color: #0000ff">="slideUpDown"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容是滑动的 上下滑动 类似滚动效果</span><span style="color: #008000">--></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="live-slide"</span><span style="color: #0000ff">></span>...slide content...<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span><span style="color: #000000">
            ...
            </span><span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="live-slide"</span><span style="color: #0000ff">></span>...slide content2...<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span>

 

 

13，使用ICon的效果

三 源码地址

 https://git.oschina.net/yudaming/metro

四 个人小站(提供各种技术类网站分享)

 http://dmsite.chinacloudsites.cn/