優化checkbox和radio，相似Bootstrap中的iCheck

時間 2019-11-10

標籤優化 checkbox radio 相似 bootstrap icheck 欄目 HTML 简体版

原文原文鏈接

checkbox和radio瀏覽器默認的已經知足不了大衆的審美需求，更不用說瀏覽器之間的差別化，取而代之，優化checkbox和radio的方法也隨之誕生了。

html結構：
單選框爲例，簡單說明：
其中必需項包括：class="radio" 和 name="名稱" javascript

<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介紹：元素從一種樣式逐漸改變爲另外一種的效果。
css

transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。默認是 0。
transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"。
transition-delay 規定過渡效果什麼時候開始。默認是 0。html

.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(){...})java

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：jquery

<!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: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;} .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:1;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>android

web