JQuery统一复写美化项目中所有radio单选按钮样式
老项目要升级改版,对于分散在各页面的样式不好处理,怕有遗漏,尤其是优化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单选按钮样式的更多相关文章
- ASP.NET MVC jQuery 树插件在项目中使用方法(一)
jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- Jquery和Javascript 实际项目中写法基础 (1)
一.JS 是什么,jquery 是什么 就不说明了,直接说一般使用是怎么样的 <!DOCTYPE html> <html> <head> <meta cha ...
- react项目中对dom元素样式修改的另一种方法以及将组件插入到node节点中
在项目中,以前如果遇到对dom元素的操作都是直接获取dom元素,比如说: 但是如果修改的样式比较多的话,不如直接"切换"dom元素,如下例子: 这样会节省一些性能.因为操作dom的 ...
- Jquery和Javascript 实际项目中写法基础-闭包 (2)
一.什么是闭包? 概念性的我就不去百度了,感兴趣的可以自己去搜下,我自己的理解,闭包就是一个封装的包,相当于类的概念,把乱七八糟的的东西封装到一起,然后统一使用一个对象来调用,实现代码部分对外开放,部 ...
- jQuery Validate验证(项目中使用的)
大致结构是: <script type="text/javascript" src="<%=path %>/js/jquery-1.9.1.min.js ...
- Jquery和Javascript 实际项目中写法基础-ajax和json (3)
一.什么是JSON数据? 一种轻量级的数据交换格式.实际中知道如何使用即可. 软件开发我认为就是一个会用,然后知其原理的过程. 例子如下: <!DOCTYPE html> <html ...
- jQuery动态的给页面中添加一条样式表的链接
HTML部分: <input type="button" value="单击" onclick="getbody()" /> & ...
- jquery循环遍历radio单选按钮,并设置选中状态
背景:自己在做项目过程中遇到的问题,现在记录一下. 需求:在ajax获取后台数据的之后,需要根据获取的数据对页面中的radio单选按钮进行选中状态设置 因为自身js功底欠佳,所以耽误了点时间,现在把方 ...
随机推荐
- samba配置用户访问方法
配置目的: 为了给指定用户一个独立访问目录 首先在samba服务器安装samba软件 $ apt-get install samba 然后配置独立访问用户 配置samba用户前提需要是linux的用户 ...
- vector删除特定元素
删除vector中小于20的元素,注意要使迭代器失效,不能简单的删除. #include <iostream>#include <vector>using namespace ...
- 如何在IDM中设置代理服务器?
很多时候,大家下载文件都是在国外的一些网站上进行下载,这样不可免会受到自身国内网络的限制,另一方面下载源为避免服务器带宽占用过多而限制下载速率,这就会导致文件下载极慢,甚至几KB每秒. 这种情况是不是 ...
- 【PYTEST】第一章常用命令
pytest入门 安装pytest 运行pytest pytest常用命令 1. 安装pytest pip install pytest 2. 运行pytest 2.1 pytest默认搜索当前目录下 ...
- ubuntu安装php的 mongodb扩展
wget https://pecl.php.net/get/mongodb-1.2.6.tgztar -zxvf mongodb-1.2.6.tgz cd mongodb-1.2.6 /usr/bin ...
- python 几个循环的效率测试
前言:对于我这种追求极致的人来说,效率很重要. 前面看到网上关于python循环的测评,到自己在项目中的应用,发现,并不是这么回事.所以,写下次博文,一次性了解这个问题. 语言版本:python3.6 ...
- 关于C语言编程的高效学习方法,首要任务是掌握高效编程,其次乃代码优化!
在本篇文章中,我收集了很多经验和方法.应用这些经验和方法,可以帮助我们从执行速度和内存使用等方面来优化C语言代码. 简介 在最近的一个项目中,我们需要开发一个运行在移动设备上但不保证图像高质量的轻量级 ...
- redis 客户端
输入缓冲区: 客户端状态的输入缓冲区用于保存客户端发送的命令请求: typedef struct redisClient{ //... sds querybuf; //... }redisClient ...
- 移动端和web端的性能指标
移动端的性能指标: 1.内存:80% 2.CPU 3.流量 4.电量 5.启动速度 6.滑动速度.界面切换速度 7.与服务器交互的网络速度 web端的性能指标: 1.CPU 2.内存 3.网络 4.I ...
- PHP AES加密封装类
简介 PHP AES 加密解密常用封装类 使用方式 $key = 123; $aes = new Aes($key); $data = ['a' => 1]; $aes->decrypt( ...