jQuery CSS3自定义美化Checkbox实现代码


Posted in Javascript onMay 12, 2016

效果图:

jQuery CSS3自定义美化Checkbox实现代码

是不是比默认的好看多了,个人的审美观应该还是可以的。

接下来我们一起来看看实现这款美化版Checkbox的源代码,主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果。

先来看看HTML代码:

<div class="wrapper">
  <ul>
   <li>
    <p>Gender:</p>
   </li>
   <li>
    <input type="radio" name="radio-btn" />Male
   </li>
   <li>
    <input type="radio" name="radio-btn" />Female
   </li>
  </ul>
  <ul>
   <li>
    <p>推荐网站:</p>
   </li>
   <li>
    <input type="checkbox" name="check-box" /> <span>何问起</span>

   </li>
   <li>
    <input type="checkbox" name="check-box" /> <span>柯乐义</span>

   </li>
   <li>
    <input type="checkbox" name="check-box" /> <span>hwq2.com</span>

   </li>
   <li>
    <input type="checkbox" name="check-box" /> <span>hovertree.net</span>

   </li>
  </ul>
 </div>

然后我们用jQuery代码来为每一个checkbox和radiobox创建一个div,这个div的classname为check-box和radio-btn。

$("input[name="radio-btn"]").wrap("<div class="radio-btn"><i></i></div>");
$("input[name="check-box"]").wrap("<div class="check-box"><i></i></div>");

那么我们接下来要让原来的checkbox隐藏,同时设置模拟div的样式:

.radio-btn input[type="radio"], .check-box input[type="checkbox"] {
 visibility: hidden;
}


.check-box {
 width: 22px;
 height: 22px;
 cursor: pointer;
 display: inline-block;
 margin: 2px 7px 0 0;
 position: relative;
 overflow: hidden;
 box-shadow: 0 0 1px #ccc;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 background: rgb(255, 255, 255);
 background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ededed", GradientType=0);
 border: 1px solid #ccc;
}
.check-box i {
 background: url("http://hovertree.com/texiao/html5/32/css/check_mark.png") no-repeat center center;
 position: absolute;
 left: 3px;
 bottom: -15px;
 width: 16px;
 height: 16px;
 opacity: .5;
 -webkit-transition: all 400ms ease-in-out;
 -moz-transition: all 400ms ease-in-out;
 -o-transition: all 400ms ease-in-out;
 transition: all 400ms ease-in-out;
 -webkit-transform:rotateZ(-180deg);
 -moz-transform:rotateZ(-180deg);
 -o-transform:rotateZ(-180deg);
 transform:rotateZ(-180deg);
}
.checkedBox {
 -moz-box-shadow: inset 0 0 5px 1px #ccc;
 -webkit-box-shadow: inset 0 0 5px 1px #ccc;
 box-shadow: inset 0 0 5px 1px #ccc;
 border-bottom-color: #fff;
}
.checkedBox i {
 bottom: 2px;
 -webkit-transform:rotateZ(0deg);
 -moz-transform:rotateZ(0deg);
 -o-transform:rotateZ(0deg);
 transform:rotateZ(0deg);
}
/*Custom radio button*/
 .radio-btn {
 width: 20px;
 height: 20px;
 display: inline-block;
 float: left;
 margin: 3px 7px 0 0;
 cursor: pointer;
 position: relative;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 border-radius: 100%;
 border: 1px solid #ccc;
 box-shadow: 0 0 1px #ccc;
 background: rgb(255, 255, 255);
 background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ededed", GradientType=0);
}
.checkedRadio {
 -moz-box-shadow: inset 0 0 5px 1px #ccc;
 -webkit-box-shadow: inset 0 0 5px 1px #ccc;
 box-shadow: inset 0 0 5px 1px #ccc;
}
.radio-btn i {
 border: 1px solid #E1E2E4;
 width: 10px;
 height: 10px;
 position: absolute;
 left: 4px;
 top: 4px;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 border-radius: 100%;
}
.checkedRadio i {
 background-color: #898A8C;
}/* 何问起 hovertree.com */

上面这段CSS3代码就是用样式来自定义div,让div的样式和checkbox和radiobox一样。

最后我们来模拟点击选中和取消选中,这部分也是用jQuery来实现:

$(".radio-btn").on("click", function () {
 var _this = $(this),
  block = _this.parent().parent();
 block.find("input:radio").attr("checked", false);
 block.find(".radio-btn").removeClass("checkedRadio");
 _this.addClass("checkedRadio");
 _this.find("input:radio").attr("checked", true);
});



$.fn.toggleCheckbox = function () {
 this.attr("checked", !this.attr("checked"));
}
$(".check-box").on("click", function () {
 $(this).find(":checkbox").toggleCheckbox();
 $(this).toggleClass("checkedBox");
});/* 何问起 hovertree.com */

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
Angular2之二级路由详解
Aug 31 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
深入浅析JavaScript中with语句的理解
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 #Javascript
You might like
PHP调用三种数据库的方法(1)
2006/10/09 PHP
数据库的日期格式转换
2006/10/09 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
Python requests模块session代码实例
2020/04/14 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
教师评优事迹材料
2014/01/10 职场文书
请假条范文大全
2014/04/10 职场文书
小学生操行评语大全
2014/04/22 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书