两种方法制作单选按钮

Posted by Nutlee on 2016-07-27

最近由于工作需要,进行了大量的页面制作(主要是移动端),参考学习了滴滴等页面。下面介绍两种 radio 按钮的制作。

纯 HTML + CSS

核心方法就是用到了伪对象(兼容性?),用 ::before 画出来 radio 的边框,用 ::after 换出来内填充,然后再 CSS 控制一下 checked 时的样式就好,话不多说看代码和预览。

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style>
.radio {
position: relative;
height: 50px;
width: 50px;
vertical-align: middle;
border: none;
background: 0 0;
-webkit-appearance: none;
outline: none;
}
.radio::before {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 30px;
width: 30px;
margin: auto;
border: 1px solid #ccc;
border-radius: 15px;
}
.radio::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display:none;
height: 18px;
width: 18px;
margin: auto;
border-radius: 9px;
background: blue;
}
.radio:checked::after {
display:block;
}
.label {
vertical-align: middle;
}
</style>
<input id="radio1" class="radio" name="radio" type="radio"/>
<label class="label" for="radio1">单选按钮1</label>
<input id="radio2" class="radio" name="radio" type="radio"/>
<label class="label" for="radio2">单选按钮2</label>

预览
JS Bin on jsbin.com

改进了原方案,现在使用绝对定位完全居中更灵活,简单。

HTML + CSS + JS

使用多个DIV嵌套,画出来两个同心圆,通过JS操作点击事件触发不同的样式。

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<style>
/*单选按钮*/
.radiogroup {
font-size: 26px;
text-indent: 14px;
}
.radiogroup label {
vertical-align: middle;
}
.radiogroup .radiobtn {
display: inline-block;
margin-right: 20px;
}
.circular {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border: 2px solid #dedfe0;
background: #fff;
vertical-align: middle;
}
.circular-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
margin: auto;
width: 16px;
height: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
background: #009fe8;
}
.active .circular-inner {
display: block;
}
</style>
<div class="radiogroup">
<div class="radiobtn radiobtn-1">
<div class="circular">
<div class="circular-inner"></div>
</div>
<label></label>
</div>
<div class="radiobtn radiobtn-2">
<div class="circular">
<div class="circular-inner"></div>
</div>
<label></label>
</div>
</div>
<script>
// 判断是否已经有className
function elementhasClassName(ele,className) {
var classReg= new RegExp('(^|\\s)'+className+'(\\s|$)');
return classReg.test(ele.className);
};
//dom 增加class
function addClass(ele,className) {
if (elementhasClassName(ele,className)) {
return;
} else if(ele.className === ''){
ele.className += className;
} else {
ele.className += ' '+className;
}
};
//移除className
function removeClass(ele,cls) {
var regTxt='(^|\\s)'+cls+'(\\s|$)';
ele.className = ele.className.replace((new RegExp(regTxt)),"");
};
var radioGroup = document.querySelectorAll('.radiobtn');
for (var i = radioGroup.length - 1; i >= 0; i--) {
function bindEvent(ele){
ele.addEventListener('click',function(event) {
var target = event.currentTarget;
// 点击未选中的radio
if (elementhasClassName(target,'radiobtn') && !elementhasClassName(target,'active')&& !elementhasClassName(target,'active')) {
var radioGroup = target.parentNode;
var radiobtnGroup =radioGroup.querySelectorAll('.radiobtn');
for (var i = radiobtnGroup.length - 1; i >= 0; i--) {
function remove(ele,currentTarget){
if (ele !== currentTarget && elementhasClassName(ele,'active')) {
removeClass(ele,'active');
};
};
remove(radiobtnGroup[i],target);
};
addClass(target,'active');
};
});
};
bindEvent(radioGroup[i]);
};
</script>

预览
JS Bin on jsbin.com

由于JSbin中不能使用立即执行函数,所以可以使用 立即执行函数 优化上述代码循环中的部分操作。


参考资料:
滴滴某页面