【深圳】DJI 大疆创新 互联网团队 前端及大量职位招聘中 (内推 15-50k + 丰厚年终 + 股份)简历请发至 evan.zhou@dji.com, 合适的话当天回复,当天内推。 更多福利

2015年,emoji里的Face with Tears of Joy被选进了年度,那么,我们就用这个表情来做一个按钮切换样例,拒绝枯燥无聊的checkbox。

我们知道使用<label>的for属性可以绑定checkbox的选择框,可以来回切换选择和不选择。现在,结合css中的选择器:checked和它的兄弟Checkbox Hack,让我们做点好玩的事情。

先放样例

html:

1
2
3
4
5
<div class="emoji-toggle emoji-cry">
<input type="checkbox" id="toggle" class="toggle">
<div class="emoji"></div>
<label for="toggle" class="well"></label>
</div>

基本的css (scss):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.emoji-toggle {
position: relative;
.well { // the label
cursor: pointer;
}
.toggle { // the checkbox
appearance: none;
background: transparent;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 100;

// "off"
~.emoji:before {
content: "emoji unicode here";
position: absolute;
left: 0;
top: -15px;
font-size: 40px;
z-index: 1;
transition: 0.2s;
}

// "on"
&:checked {
~.emoji:before {
content: "different emoji unicode here";
left: 100%;
margin-left: -1em;
}
}

}
}

其中,input选择框表面上看是隐藏起来的,实际上他覆盖了整个div层,所以我们可以完美的点击这块地方去进行选择的切换,并且改变emoji表情和它的位置。

使用sass来书写不同样式

为了更方便的使用该样式,我们想让它可以定义四个不同的伪元素内容(两个表情和两个label)
,这听起来令人兴奋,所以我决定用sass的@mixin来实现。这是我喜欢用的一个预处理器,不会太复杂但可以把一些冗余的东西抽取起来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@mixin emojiType($leftEmoji, $rightEmoji, $leftLabel, $rightLabel) {
.toggle {
~.emoji:before {
content: $leftEmoji;
}
&:checked {
~.emoji:before {
content: $rightEmoji;
}
}
~label {
&:before {
content: $leftLabel;
}
&:after {
content: $rightLabel;
}
}
}
}

// Usage
.emoji-happy {
@include emojiType(
"\01F604", "\01F620", "Happy", "Mad"
);
}

获取emojis的unicode

你可能已经在css里面注意到emojis的unicode像“\01F604”,很幸运,Tim Whitlock做了一个关于这些信息的可靠的参考页

emoji

ps:“grinning face“的unicode码为“U+1F601”,因此在css中的content就应该为”01F601“具体原因戳这里(英文版)

最后

emoji是一个奇怪的东西,不同的浏览器不同的平台有不同的emoji样式,嗯相信大家已经习惯了….


本文根据 @ CHRIS COYIER 的文章所译,整篇译文带有我们自己的理解和意思,如果有译得不好的地方或者不对之处,还请大家指点。英文出处: emoji-toggles

如需转载,请注明出处: http://w3ctrain.com / 2015/12/29/use-emoji-toggles/