效果图:是不是比默认的好看多了,个人的审美观应该还是可以的。当然我们可以在这里查看DEMO演示。接下来我们一起来看看实现这款美化版Checkbox的源代码。主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQ ...
效果图:
是不是比默认的好看多了,个人的审美观应该还是可以的。
当然我们可以在这里查看DEMO演示。
接下来我们一起来看看实现这款美化版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>
$("input[name="radio-btn"]").wrap("<div ><i></i></div>");那么我们接下来要让原来的checkbox隐藏,同时设置模拟div的样式:.radio-btn input[type="radio"], .check-box input[type="checkbox"] {最后我们来模拟点击选中和取消选中,这部分也是用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 */
原标题:CSS3和jQuery实现的自定义美化Checkbox
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。