7.4　状态设置

普通的组件在定义状态的时候主要是定义高亮和禁用，但是在Tile组件里，只需要定义一个选中状态就可以了，效果如图7-4所示。

图7-4　选中状态的磁贴效果

由于选中效果是在右上角显示一个对号，该对号又是真实的内容，所以实现的时候要么叠加新的元素，比如在标签里定义一个小图标；要么使用CSS的before和after特性。叠加新元素太麻烦了，所以，在这里利用CSS特性来实现。

先定义方块在选中状态时的边框（默认为蓝色）。代码如下：

.tile.selected {
   border: 4px #4390df solid;
}

再定义右上角的蓝色三角形（不包括对号图标）。注意一下三角形是如何通过boder-top和border-left来实现的。

.tile.selected:after {
    position: absolute;                 /* 绝对定位 */
    display: block;                     /* 块级显示 */
    border-top: 28px solid #4390df;     /* 三角形定义 */
    border-left: 28px solid transparent;
    right: 0;                           /* 三角形靠右上角 */
    top: 0;
    content: "";   
    z-index: 101;
}

最后才是对小图标的设置。关于小图标，由于Bootstrap已经提供了很多样式，符合该图标的样式为glyphicon-ok样式，尽量不要叠加新的样式进来，所以这里重用了glyphicon-ok样式里的content内容来定义图标。具体代码如下：

.tile.selected:before {
    position: absolute;                 /* 绝对定位 */
    display: block;                     /* 块级显示 */
    content: "\e013";                   /* 小图标内容 */
    color: #fff;                                /* 颜色为白色 */
    right: 0;                           /* 右上角显示 */
    top: 0;
    font-family: Glyphicons Halflings;  /* 设置图标字体*/
    font-size: 10pt;
    font-weight: normal;
    z-index: 102;       
}

至此，我们仅通过一个selected样式就可以表示磁贴片的选中状态了。示例如下：

<div class="tile selected"></div>