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

2023-08-10 02:04:24 分類：公司信息 閱讀(8)

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：

作者：前端咖
來源鏈接：https://www.cnblogs.com/kuikui/p/3506365.html