优化checkbox和radio，类似Bootstrap中的iCheck
checkbox和radio浏览器默认的已经满足不了大众的审美需求，更不用说浏览器之间的差异化，取而代之，优化checkbox和radio的方法也随之诞生了。
html结构：
单选框为例，简单说明：
其中必需项包括：class="radio" 和 name="名称"
<div class="radio" name="sex" value="boy"><ins></ins><span>帅哥</span></div>
<div class="radio" name="sex" value="girl"><ins></ins><span>靓妹</span></div>
<div class="radio" name="sex" value="unsex"><ins class="disabled"></ins><span>未选中不可点击</span></div>
<div class="radio" name="sex" value="sexed"><ins class="enable"></ins><span>选中不可点击</span></div>
css表现：
transition介绍：元素从一种样式逐渐改变为另一种的效果。
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
.checkbox,.radio{display: inline-block;*display: inline;*zoom:1;height: 24px; line-height: 24px; margin-right: 20px;}
.checkbox ins,.radio ins{display: inline-block;*display: inline;*zoom:1; width: 23px; height: 22px; vertical-align: middle; background: url(http://www.bootcss.com/p/icheck/skins/square/blue.png) no-repeat; margin-right: 8px; -webkit-transition:all 0.1s linear; -moz-transition:all 0.1s linear; -o-transition:all 0.1s linear; -ms-transition:all 0.1s linear; transition:all 0.1s linear;vertical-align: middle;}
.radio ins{background-position: -120px 0px; }
.radio .hover{background-position: -144px 0px;}
.radio .checked{background-position: -168px 0px;}
.radio .enable{background-position: -214px 0px;}
.radio .disabled{background-position: -191px 0px;}
.checkbox span,.radio span{display: inline-block;*display: inline;*zoom:1;vertical-align: middle; }
js代码：
点击事件，鼠标移入移出事件，备注：移动端仅支持点击即可。
点击事件为例：document.on("click",".radio",function(){...})
click: function(elem) {
var _this = this;
elem = "." + elem;
$(document).on("click", elem, function() {
var $this = $(this),
_ins = $this.find("ins");
if (!(_ins.hasClass(_this._disabled) || _ins.hasClass(_this._enable))) {
if ( !! _ins.hasClass(_this._checked)) {
_ins.removeClass(_this._checked).addClass(_this._hover);
} else {
if (/radio/ig.test(elem)) {
var _name = $this.attr("name");
$(elem + "[name=" + _name + "]").find("ins").removeClass(_this._checked);
}
$(elem).find("ins").removeClass(_this._hover);
_ins.addClass(_this._checked);
}
}
});
}
DEMO：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿checkbox和radio类似Bootstrap中的iCheck</title>
<style>
*{margin:0px;padding:0px;}
.checkbox,.radio{display: inline-block;*display: inline;*zoom:;height: 24px; line-height: 24px; margin-right: 20px;}
.checkbox ins,.radio ins{display: inline-block;*display: inline;*zoom:; width: 23px; height: 22px; vertical-align: middle; background: url(http://www.bootcss.com/p/icheck/skins/square/blue.png) no-repeat; margin-right: 8px; -webkit-transition:all 0.1s linear; -moz-transition:all 0.1s linear; -o-transition:all 0.1s linear; -ms-transition:all 0.1s linear; transition:all 0.1s linear;vertical-align: middle;}
.checkbox ins{background-position: 0px 0px; }
.radio ins{background-position: -120px 0px; }
.checkbox .hover{background-position: -24px 0px; }
.checkbox .checked{background-position: -48px 0px; }
.checkbox .enable{background-position: -96px 0px;}
.checkbox .disabled{background-position: -72px 0px;}
.radio .hover{background-position: -144px 0px;}
.radio .checked{background-position: -168px 0px;}
.radio .enable{background-position: -214px 0px;}
.radio .disabled{background-position: -191px 0px;}
.checkbox span,.radio span{display: inline-block;*display: inline;*zoom:;vertical-align: middle; } .sport,.sex{width: 950px; margin: 100px auto;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="sport">
<div class="checkbox" name="sport" value="basketball"><ins></ins><span>篮球</span></div>
<div class="checkbox" name="sport" value="football"><ins></ins><span>足球</span></div>
<div class="checkbox" name="sport" value="volleyball"><ins></ins><span>排球</span></div>
<div class="checkbox" name="sport" value="unsport"><ins class="disabled"></ins><span>未选中不可点击</span></div>
<div class="checkbox" name="sport" value="sported"><ins class="enable"></ins><span>选中不可点击</span></div>
</div>
<div class="sex">
<div class="radio" name="sex" value="boy"><ins></ins><span>帅哥</span></div>
<div class="radio" name="sex" value="girl"><ins></ins><span>靓妹</span></div>
<div class="radio" name="sex" value="unsex"><ins class="disabled"></ins><span>未选中不可点击</span></div>
<div class="radio" name="sex" value="sexed"><ins class="enable"></ins><span>选中不可点击</span></div>
</div>
<script>
(function($) {
$.icheck = {
init: function() {
var _this = this;
_this._checkbox = "checkbox";
_this._radio = "radio";
_this._disabled = "disabled";
_this._enable = "enable";
_this._checked = "checked";
_this._hover = "hover";
_this._arrtype = [_this._checkbox, _this._radio];
_this._mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);
$.each(_this._arrtype, function(k, v) {
_this.click(v);
if(!_this._mobile){
_this.mouseover(v);
_this.mouseout(v);
}
});
},
click: function(elem) {
var _this = this;
elem = "." + elem;
$(document).on("click", elem, function() {
var $this = $(this),
_ins = $this.find("ins");
if (!(_ins.hasClass(_this._disabled) || _ins.hasClass(_this._enable))) {
if ( !! _ins.hasClass(_this._checked)) {
_ins.removeClass(_this._checked).addClass(_this._hover);
} else {
if (/radio/ig.test(elem)) {
var _name = $this.attr("name");
$(elem + "[name=" + _name + "]").find("ins").removeClass(_this._checked);
}
$(elem).find("ins").removeClass(_this._hover);
_ins.addClass(_this._checked);
}
}
});
},
mouseover: function(elem) {
var _this = this;
elem = "." + elem;
$(document).on("mouseover", elem, function() {
var $this = $(this);
var _ins = $this.find("ins");
if (!(_ins.hasClass(_this._disabled) || _ins.hasClass(_this._enable) || _ins.hasClass(_this._checked))) {
_ins.addClass(_this._hover);
$this.css("cursor","pointer");
} else{
$this.css("cursor","default");
}
});
},
mouseout: function(elem) {
var _this = this;
elem = "." + elem;
$(document).on("mouseout", elem, function() {
$(elem).find("ins").removeClass(_this._hover);
});
}
}; $.icheck.init(); })(jQuery);
</script>
</body>
</html>
运行代码
优化checkbox和radio，类似Bootstrap中的iCheck的更多相关文章
- bootstrap 中的 iCheck 全选反选功能的实现
喜欢bootstrap 风格的同学应该知道,iCheck的样式还是很好看的. 官网: http://www.bootcss.com/p/icheck/ 进入正题,iCheck提供了一些方法,可以进行全 ...
- Jquery中的checkbox 及radio的问题
在web开发中,我们经常会对checkbox和radio进行读写操作,下面我来分享一下我的项目中的相关案例: 一.checkbox <input id="check1" cl ...
- 24Flutter中常见的表单有TextField单行文本框，TextField多行文本框、CheckBox、Radio、Switch
一.Flutter常用表单介绍: CheckboxListTile.RadioListTile.SwitchListTile.Slide. 二.TextField:表单常见属性: maxLines:设 ...
- 二十四、小程序中改变checkbox和radio的样式
来源:https://blog.csdn.net/qq_39364032/article/details/79742415 在微信小程序里面,有时候为了配合整个项目的风格,checkbox和radio ...
- html自定义checkbox、radio、select —— select篇
上一篇<html自定义checkbox.radio.select —— checkbox.radio篇>介绍了我们是怎么将 html 自带的 checkbox.radio 改成我们自定义的 ...
- html自定义checkbox、radio、select —— checkbox、radio篇
前些日子,所在公司项目的UI做了大改,前端全部改用 Bootstrap 框架,Bootstrap的优缺点在此就不详述了,网上一大堆相关资料. 前端的设计就交给我和另一个同事[LV,大学同班同学,毕业后 ...
- Css实现checkbox及radio样式自定义
前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...
- bootstrap课程5 bootstrap中的组件使用的注意事项是什么
bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
随机推荐
- android 自定义控件中获取属性的三种方式(转)
第一种方法,直接设置属性值,通过attrs.getAttributeResourceValue拿到这个属性值. (1)在xml文件中设置属性值 <com.example.activity.Ico ...
- 递归神经网络（Recurrent Neural Networks，RNN）
在深度学习领域,传统的多层感知机(MLP)具有出色的表现,取得了许多成功,它曾在许多不同的任务上——包括手写数字识别和目标分类上创造了记录.甚至到了今天,MLP在解决分类任务上始终都比其他方法要略胜一 ...
- poj2387 Til the Cows Come Home
解题思路:最短路的模板题,注意一个细节处理即可. 见代码: #include<cstdio> #include<cstring> #include<algorithm&g ...
- 【英语】Bingo口语笔记(8) - 爆破音的发音技巧
轻读,有时候甚至是听不到的,就嘴巴碰一下而已.
- 【英语】Bingo口语笔记(27) - 如何培养口语语感
- OpenGL学习之路（二）
1 引子 在上一篇读书笔记中,我们对书本中给出的例子进行详细的分析.首先是搭出一个框架:然后填充初始化函数,在初始化函数中向OpenGL提供顶点信息(缓冲区对象)和顶点属性信息(顶点数组对象),并启用 ...
- android中的所谓观察者模式
生活中我们常认定某些人很有才,但什么是有才呢?明朝的王守仁曾这样解释:才,是所谓天理,应用到物上,便成了才.凡事凡物,只要掌握了所谓科学的方法,并能灵活运用,那么你也可以成为一个有才的人. 观察者模式 ...
- jQuery - 实时统计输入框输入个数（中文输入法适用）
经常在实时统计文本框输入多少字的时候,有时会出现不及时统计,特别是在中文输入法下. 为了实时准确统计,可以修改代码如下: $(function() { $("#txtT ...
- Bootstrap初级用户谈谈网页在手机上的显示效果优化
本人之前已经使用Bootstrap有一段时间了,但是之前做出的网站都只是在电脑端使用,没有注意过手机端的显示效果.这两天自己使用Bootstrap做了一个简单的Web个人日志系统,想在手机端也使用,桌 ...
- WebAPI初探
由于即将要接手的新项目计划用ASP.NET MVC3来开发,所以最近一段时间一直在看相关的书或文章.因为之前在大学里也曾学习过MVC2开发,也做过几个简单的MVC2的小型测试项目,不过在后来工作以后主 ...