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

简介: 目前前端技术发展非常快,各大厂都开源和分享了自家的前端框架,非常多成熟的UI组件供大家选择,很实用也很方便,给开发上节省了不少时间成本,当然少不了学习成本,不过也不会占用太多时间,只要有前端基础的话,原理基本都是通用的,只是写法不一样。因此,除了学习现有的优秀前端之外,最好能自己根据原理封装一套自己的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,达到圆形形状

  • 效果

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)从上面效果看,很明显,单选框稍微大了一点,同时框和文本不在同一水平上,体验效果不佳 <br/>
5)重现调整框,设置14px高宽度以及边框值,同时设置垂直居中样式 <br/>

  • 效果

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

  • 选中效果

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>
相关文章
|
10天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
10 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
1月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
44 0
|
1月前
|
搜索推荐 BI 开发者
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
22 0
|
3月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
|
2月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
55 0
|
2月前
|
资源调度 JavaScript
Vue + Element-ui组件上传图片报错问题解决方案
Vue + Element-ui组件上传图片报错问题解决方案
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
38 0
|
3月前
|
前端开发
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
|
3月前
|
前端开发
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
59 0
|
3月前
|
前端开发 JavaScript 测试技术
掌握函数式组件:迈向现代化前端开发的关键步骤(下)
掌握函数式组件:迈向现代化前端开发的关键步骤(下)
掌握函数式组件:迈向现代化前端开发的关键步骤(下)

热门文章

最新文章