我正在参加「掘金·启航计划」
目前前端技术发展非常快,各大厂都开源和分享了自家的前端框架,非常多成熟的UI组件供大家选择,很实用也很方便,给开发上节省了不少时间成本,当然少不了学习成本,不过也不会占用太多时间,只要有前端基础的话,原理基本都是通用的,只是写法不一样。
因此,除了学习现有的优秀前端之外,最好能自己根据原理封装一套自己的UI组件,目的是为了更好的理解前端知识点以及锻炼编程逻辑
【单选框特点】
1)单选框,一般为小圆圈
2)左边的单选框,右边是文本
3)单选框和文本为水平居中
4)多个选项,则一般只可选中一个
5)选中和不选中状态样式
【静态布局】
1)先设置一个父标签div,设置div标签为即是块元素也是行内元素,display:inline-block,以及按钮样式cursor:pointer,高宽度由子标签决定
2)然后再设置两个子标签span,左边span标签可设置高宽度inline-block,右边span直接设置文本
3)左边span标签设置20px高宽度,以及边框样式border-radius同样设置20px,达到圆形形状
-
效果
-
代码
<div style="display:inline-block;cursor:pointer;">
<span style="display:inline-block;width:20px;height:20px;border-radius:20px;background:#fff;border:1px solid #ccc;"></span>
<span>男</span>
</div>
4)从上面效果看,很明显,单选框稍微大了一点,同时框和文本不在同一水平上,体验效果不佳
5)重现调整框,设置14px高宽度以及边框值,同时设置垂直居中样式
-
效果
-
代码
<div style="display:inline-block;cursor:pointer;">
<span style="vertical-align:middle;display:inline-block;width:14px;height:14px;border-radius:14px;background:#fff;border:1px solid #ccc;"></span>
<span style="vertical-align:middle;">男</span>
</div>
【交互设置】
1)设置单选框class值,然后绑定框点击事件
2)将style样式放到class里,同时设置多一个选中class
3)选中class样式,图标和文本均变为蓝色
4)选中class样式下的图标class样式添加一个:after选择器
5)在选择器中,设置一个空格内容,父级设置绝对定位,选择器里设置相对父级定位,高宽度和边框设置为8px,以及top和left值,以及蓝色背景
- 选中效果
<style type="text/css">
.radio-div {
display: inline-block;
cursor: pointer;
margin-right: 10px;
}
.radio-div .icon {
vertical-align: middle;
display: inline-block;
width: 14px;
height: 14px;
border-radius: 14px;
background: #fff;
border: 1px solid #ccc;
}
.radio-div .text {
vertical-align: middle;
}
.radio-action-div .icon {
border: 1px solid #099dff;
position: relative;
}
.radio-action-div .icon::after {
content: ' ';
position: absolute;
top: 3px;
left: 3px;
width: 8px;
height: 8px;
border-radius: 8px;
display: inline-block;
background: #099dff;
}
.radio-action-div .text {
color: #099dff;
}
</style>
<!--单选框-->
<div class="radio-div radio-action-div" data-value="1">
<span class="icon"></span>
<span class="text" style="">男</span>
</div>
<!--单选框-->
<div class="radio-div" data-value="0">
<span class="icon"></span>
<span class="text" style="">女</span>
</div>
6)设置js交互,可来回切换,以及data-value选中的值
- 效果
- 代码
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".radio-div").click(function () {
var value = $(this).attr("data-value");
$(".radio-div").removeClass('radio-action-div');
$(this).addClass('radio-action-div');
console.log(value);
});
});
</script>