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

730 阅读2分钟

我正在参加「掘金·启航计划」

目前前端技术发展非常快,各大厂都开源和分享了自家的前端框架,非常多成熟的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,达到圆形形状

  • 效果 image.png

  • 代码

<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高宽度以及边框值,同时设置垂直居中样式

  • 效果 image.png

  • 代码

<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值,以及蓝色背景

  • 选中效果 image.png
<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选中的值

  • 效果 image.png
  • 代码
<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>