【前端】使用jQuery封装一套UI组件 - 单选框

作者：小5聊基础
简介：一只喜欢全栈方向的程序员，欢迎咨询，尽绵薄之力答疑解惑
编程原则：Write Less Do More

【单选框特点】

1）单选框，一般为小圆圈 <br/>
2）左边的单选框，右边是文本 <br/>
3）单选框和文本为水平居中 <br/>
4）多个选项，则一般只可选中一个 <br/>
5）选中和不选中状态样式 <br/>

【静态布局】

1）先设置一个父标签div，设置div标签为即是块元素也是行内元素，display:inline-block，以及按钮样式cursor:pointer，高宽度由子标签决定 <br/>
2）然后再设置两个子标签span，左边span标签可设置高宽度inline-block，右边span直接设置文本 <br/>
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）从上面效果看，很明显，单选框稍微大了一点，同时框和文本不在同一水平上，体验效果不佳 <br/>
5）重现调整框，设置14px高宽度以及边框值，同时设置垂直居中样式 <br/>

• 效果

• 代码

<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值，然后绑定框点击事件 <br/>
2）将style样式放到class里，同时设置多一个选中class <br/>
3）选中class样式，图标和文本均变为蓝色 <br/>
4）选中class样式下的图标class样式添加一个:after选择器 <br/>
5）在选择器中，设置一个空格内容，父级设置绝对定位，选择器里设置相对父级定位，高宽度和边框设置为8px，以及top和left值，以及蓝色背景 <br/>

• 选中效果

<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>