老项目要升级改版,对于分散在各页面的样式不好处理,怕有遗漏,尤其是优化input表单,修改其默认样式,接下来,我将给大家分享一下,我在项目中的总结。

效果

上代码:

1.简单搞一搞 CSS,此处代码有折叠,Click Me~

.custom-radio {
float: left;
}
.custom-radio input {
position: absolute;
left: -9999px;
vertical-align: middle;
}
.custom-radio label {
cursor: pointer;
padding-right: 20px;
line-height: 30px;
padding-left: 25px;
position: relative;
display: inline-block;
}
.custom-radio label:hover {
color: #FF6200;
}
.custom-radio label::after {
content: '';
display: block;
position: absolute;
top: 6px;
left: 0;
width: 16px;
height: 16px;
outline: 0;
border: 1px solid #D5D5D5;
border-radius: 50%;
}
.custom-radio label.checked::after {
border: 6px solid #FF6200;
width: 6px;
height: 6px;
}
.custom-radio label,
.custom-radio label.checked {
border: none;
background: none;
}

2.简单搞一搞 HTML, 男男女女

 <input type="radio" name="yesOrNo" id="yes" checked />
<label for="yes">是</label>
<input type="radio" name="yesOrNo" id="no" />
<label for="no">否</label>

3.开整 ~~~~

首先分析一下实现思路:

  • 定义一个JQuery的扩展方法,页面加载完毕,input radio循环调用

  • 创建一个新的Div,并设置类名,用于定义css

  • 使用输入的ID得到相关的标签,将input radio及对应的id的label,放进上述Div中

  • 绑定自定义事件,触发它,绑定点击,焦点等事件

<script src="./jquery-1.11.1.min.js"></script>
<script>
$.fn.customInput = function () {
return $(this).each(function () {
if ($(this).is('[type=radio]')) {
var input = $(this); var label = $('label[for=' + input.attr('id') + ']');
label.add(input).wrapAll('<div class="custom-' + input.attr('type') + '"></div>');
label.hover = function () {
$(this).addClass('hover');
};
input.bind('updateState', function () {
input.is(':checked') ? label.addClass('checked') : label.removeClass('checked');
})
.click(function () {
$('input[name=' + $(this).attr('name') + ']').trigger('updateState');
})
.focus(function () {
// 自定义处理逻辑
label.addClass('focus');
if (input.is(':checked')) $(this).addClass('checkedFocus');
})
.blur(function () {
// 自定义处理逻辑
label.removeClass('focus checkedFocus');
});
}
});
};
$('input:radio').each(function () {
var $this = $(this);
$this.customInput(); //初始化单选框
});
</script>

JQuery统一复写美化项目中所有radio单选按钮样式的更多相关文章

  1. ASP.NET MVC jQuery 树插件在项目中使用方法(一)

    jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...

  2. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  3. Jquery和Javascript 实际项目中写法基础 (1)

    一.JS 是什么,jquery 是什么  就不说明了,直接说一般使用是怎么样的 <!DOCTYPE html> <html> <head> <meta cha ...

  4. react项目中对dom元素样式修改的另一种方法以及将组件插入到node节点中

    在项目中,以前如果遇到对dom元素的操作都是直接获取dom元素,比如说: 但是如果修改的样式比较多的话,不如直接"切换"dom元素,如下例子: 这样会节省一些性能.因为操作dom的 ...

  5. Jquery和Javascript 实际项目中写法基础-闭包 (2)

    一.什么是闭包? 概念性的我就不去百度了,感兴趣的可以自己去搜下,我自己的理解,闭包就是一个封装的包,相当于类的概念,把乱七八糟的的东西封装到一起,然后统一使用一个对象来调用,实现代码部分对外开放,部 ...

  6. jQuery Validate验证(项目中使用的)

    大致结构是: <script type="text/javascript" src="<%=path %>/js/jquery-1.9.1.min.js ...

  7. Jquery和Javascript 实际项目中写法基础-ajax和json (3)

    一.什么是JSON数据? 一种轻量级的数据交换格式.实际中知道如何使用即可. 软件开发我认为就是一个会用,然后知其原理的过程. 例子如下: <!DOCTYPE html> <html ...

  8. jQuery动态的给页面中添加一条样式表的链接

    HTML部分: <input type="button" value="单击" onclick="getbody()" /> & ...

  9. jquery循环遍历radio单选按钮,并设置选中状态

    背景:自己在做项目过程中遇到的问题,现在记录一下. 需求:在ajax获取后台数据的之后,需要根据获取的数据对页面中的radio单选按钮进行选中状态设置 因为自身js功底欠佳,所以耽误了点时间,现在把方 ...

随机推荐

  1. Mysql数据安全备份

    数据安全备份的意义 在出现意外的时候(硬盘损坏.断点.黑客攻击),以便数据的恢复 导出生产的数据以便研发人员或者测试人员测试学习 高权限的人员那操作失误导致数据丢失,以便恢复 备份类型 完全备份:对整 ...

  2. Folx专业版任务计划功能详解

    Folx专业版的任务计划功能允许用户以时间表的方式,制定下载计划.按照预先设定的时间计划,Folx会在指定的时间段内,自动开启或停止下载任务. 另外,用户还可以设置自动关机功能.当计划下载任务停止时, ...

  3. 337. 打家劫舍 III(树上dp)

    在上次打劫完一条街道之后和一圈房屋后,小偷又发现了一个新的可行窃的地区.这个地区只有一个入口,我们称之为"根". 除了"根"之外,每栋房子有且只有一个" ...

  4. python字节自适应转化单位KB、MB、GB

    文件存储或者传输的过程中,经常需要展示传输文件的大小,或者传输量的大小,为了方便给人展示和阅读,编写一个简单的单位转换器. 1 def hum_convert(value): 2 units = [& ...

  5. appium每次运行不初始化

    最近测试公司软件遇到一个问题,每次运行Appium测试代码,打开软件都是初始化,每次的新手教程以及无法记住密码一堆问题,导致效率很低,而且定位有时候出问题. 先看初始化的代码 1 from appiu ...

  6. Vim常用按键

  7. Thrift接口简介

    参考地址:http://roclinux.cn/?p=3316 [thrift是什么] 计算机技术里一款著名的通信框架 – thrift框架 thrift的全名叫做Apache thrift,是一款软 ...

  8. P5851 [USACO19DEC]Greedy Pie Eaters P

    如果只考虑选哪些奶牛吃派和奶牛吃派的顺序,就会陷入僵局,那么我们可以考虑派的情况. 套路地令 \(f_{i,j}\) 表示 \(i\sim j\) 这一段派,能满足一些奶牛,它们的最大可能体重. \[ ...

  9. 断点调试 breakpoints(修改request)

    目录 1.抓取信息 2.点击breakpoints勾选断点 3.复制抓取的信息 4.点击proxy再点断点设置 5.点击勾选然后add添加其下如图 6.点击确定 7.刷新百度,charles出现的页面 ...

  10. Spark SQL解析查询parquet格式Hive表获取分区字段和查询条件

    首先说一下,这里解决的问题应用场景: sparksql处理Hive表数据时,判断加载的是否是分区表,以及分区表的字段有哪些?再进一步限制查询分区表必须指定分区? 这里涉及到两种情况:select SQ ...