html+csss3+jQuery实现单选框和复选框美化

1、新建html文档。

2、书写hmtl代码。

<div class="demo-box">

 <table class="demo-table">

  <caption>

  jQuery ui-choose Plugin Examples

  </caption>

  <tr>

   <td style="width:120px;"><label>UL</label></td>

   <td><ul class="ui-choose" id="uc_01">

     <li>html</li>

     <li>css</li>

     <li>javascript</li>

     <li>php</li>

     <li>nodejs</li>

    </ul></td>

  </tr>

  <tr>

   <td><label>SELECT</label></td>

   <td><select class="ui-choose" id="uc_02">

     <option value="a">html</option>

     <option value="b">php</option>

     <option value="c">css</option>

     <option value="d">javascript</option>

     <option value="e">nodejs</option>

    </select></td>

  </tr>

  <tr>

   <td><label>MULTIPLE UL</label></td>

   <td><ul class="ui-choose" multiple="multiple" id="uc_03">

     <li>html</li>

     <li>css</li>

     <li>javascript</li>

     <li>php</li>

     <li>nodejs</li>

    </ul></td>

  </tr>

  <tr>

   <td><label>MULTIPLE SELECT</label></td>

   <td><select class="ui-choose" multiple="multiple" id="uc_04">

     <option value="a">html</option>

     <option value="b">php</option>

     <option value="c">css</option>

     <option value="d">javascript</option>

     <option value="e">nodejs</option>

    </select></td>

  </tr>

 </table>

</div>

3、书写css代码。

<style>

.demo-box { margin: 150px auto; width: 600px; padding: 20px; border: 5px solid #ccc; background: #fafafa; }

.demo-table { border-collapse: collapse; width: 100%; }

.demo-table caption { border-bottom: 1px dashed #ccc; height: 40px; margin-bottom: 20px; font: 18px/1.2 normal 'microsoft yahei'; }

.demo-table tr td { padding: 8px 10px; font: 16px/1.8 normal 'microsoft yahei'; vertical-align: top; }

.ui-input { vertical-align: top; height: 18px; font-size: 16px; line-height: 20px; border: 1px solid #aaa; padding: 6px 8px; border-radius: 3px; }

select.ui-choose { display: none; }

ul.ui-choose { box-sizing: border-box; display: inline-block; border: 1px solid transparent; font: 100 16px/30px; border-right: none; border-bottom: none; font-size: 16px; margin: 0; padding: 0; list-style: none; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

ul.ui-choose:after { content: ""; display: table; clear: both; }

ul.ui-choose>li { box-sizing: border-box; border: 1px solid #ccc; float: left; height: 34px; line-height: 32px; margin: -1px 0 0 -1px; padding: 0 16px; cursor: pointer; position: relative; z-index: 1; min-width: 20px; text-align: center; }

ul.ui-choose>li:first-child { border-radius: 3px 0 0 3px; }

ul.ui-choose>li:last-child { border-radius: 0 3px 3px 0; }

ul.ui-choose>li:hover { z-index: 4; border-color: #0080ff; color: #0080ff; }

ul.ui-choose>li.selected { z-index: 3; border-color: #0080ff; background-color: #0080ff; color: #fff; }

ul.ui-choose>li.disabled { z-index: 2; background-color: #f2f2f2; color: #aaa; cursor: not-allowed; }

ul.ui-choose>li.disabled:hover { border-color: #aaa; }

ul.ui-choose>li.selected.disabled { z-index: 2; background-color: #8FC7FF; color: #fff; cursor: not-allowed; border-color: #8FC7FF; }

ul.choose-type-right>li.selected { color: #0080ff; background: transparent url("./icon-selected.png") no-repeat right bottom; }

ul.ui-choose.choose-flex { display: flex; }

ul.ui-choose.choose-flex>li { flex: 1; padding: 0 8px; }

</style>

4、书写并添加js代码。<script src="src/ui-choose.js"></script> 

+function($){var defaults={itemWidth:null,skin:"",multi:false,active:"selected",full:false,colNum:null,dataKey:"ui-choose",change:null,click:null};$.fn.ui_choose=function(options){var _this=$(this),_num=_this.length;if(_num===1){return new UI_choose(_this,options)}if(_num>1){_this.each(function(index,el){new UI_choose($(el),options)})}};function UI_choose(el,opt){this.el=el;this._tag=this.el.prop("tagName").toLowerCase();this._opt=$.extend({},defaults,opt);return this._init()}UI_choose.prototype={_init:function(){var _data=this.el.data(this._opt.dataKey);if(_data){return _data}else{this.el.data(this._opt.dataKey,this)}if(this._tag=="select"){this.multi=this.el.prop("multiple")}else{this.multi=this.el.attr("multiple")?!!this.el.attr("multiple"):this._opt.multi}var _setFunc=this["_setHtml_"+this._tag];if(_setFunc){_setFunc.call(this)}if(this._opt.full){this._wrap.addClass("choose-flex")}this._wrap.addClass(this._opt.skin);if(this.multi&&!this._opt.skin){this._wrap.addClass("choose-type-right")}this._bindEvent()},_setHtml_ul:function(){this._wrap=this.el;this._items=this.el.children("li");if(this._opt.itemWidth){this._items.css("width",this._opt.itemWidth)}},_setHtml_select:function(){var _ohtml='<ul class="ui-choose">';this.el.find("option").each(function(index,el){var _this=$(el),_text=_this.text(),_value=_this.prop("value"),_selected=_this.prop("selected")?"selected":"",_disabled=_this.prop("disabled")?" disabled":"";_ohtml+='<li title="'+_text+'" data-value="'+_value+'" class="'+_selected+_disabled+'">'+_text+"</li> "});_ohtml+="</ul>";this.el.after(_ohtml);this._wrap=this.el.next("ul.ui-choose");this._items=this._wrap.children("li");if(this._opt.itemWidth){this._items.css("width",this._opt.itemWidth)}this.el.hide()},_bindEvent:function(){var _this=this;_this._wrap.on("click","li",function(){var _self=$(this);if(_self.hasClass("disabled")){return}if(!_this.multi){var _val=_self.attr("data-value")||_self.index();_this.val(_val);_this._triggerClick(_val,_self)}else{_self.toggleClass(_this._opt.active);var _val=[];_this._items.each(function(index,el){var _el=$(this);if(_el.hasClass(_this._opt.active)){var _valOrIndex=_this._tag=="select"?_el.attr("data-value"):_el.index();_val.push(_valOrIndex)}});_this.val(_val);_this._triggerClick(_val,_self)}});return _this},_triggerChange:function(value,item){item=item||this._wrap;this.change(value,item);if(typeof this._opt.change=="function"){this._opt.change.call(this,value,item)}},_triggerClick:function(value,item){this.click(value,item);if(typeof this._opt.click=="function"){this._opt.click.call(this,value,item)}},_val_select:function(value){if(arguments.length===0){return this.el.val()}var _oValue=this.el.val();if(!this.multi){var _selectedItem=this._wrap.children('li[data-value="'+value+'"]');if(!_selectedItem.length){return this}this.el.val(value);_selectedItem.addClass(this._opt.active).siblings("li").removeClass(this._opt.active);if(value!==_oValue){this._triggerChange(value)}}else{if(value==null||value==""||value==[]){this.el.val(null);this._items.removeClass(this._opt.active)}else{value=typeof value=="object"?value:[value];this.el.val(value);this._items.removeClass(this._opt.active);for(var i in value){var _v=value[i];this._wrap.children('li[data-value="'+_v+'"]').addClass(this._opt.active)}}if(value!==_oValue){this._triggerChange(value)}}return this},_val_ul:function(index){if(arguments.length===0){var _oActive=this._wrap.children("li."+this._opt.active);if(!this.multi){return _oActive.index()==-1?null:_oActive.index()}else{if(_oActive.length==0){return null}var _this=this,_val=[];_oActive.each(function(index,el){var _el=$(el);if(_el.hasClass(_this._opt.active)){_val.push(_el.index())}});return _val}}var _oIndex=this._val_ul();if(!this.multi){var _selectedItem=this._wrap.children("li").eq(index);if(!_selectedItem.length){return this}_selectedItem.addClass(this._opt.active).siblings("li").removeClass(this._opt.active);if(index!==_oIndex){this._triggerChange(index,_selectedItem)}}else{if(index==null||index==""||index==[]){this._items.removeClass(this._opt.active)}else{index=typeof index=="object"?index:[index];this._items.removeClass(this._opt.active);for(var i in index){var _no=index[i];this._wrap.children("li").eq(_no).addClass(this._opt.active)}}if(index!==_oIndex){this._triggerChange(index)}}return this},val:function(){return this["_val_"+this._tag].apply(this,arguments)},change:function(value,item){},click:function(value,item){},hide:function(){this._wrap.hide();return this},show:function(){this._wrap.show();return this}}}(jQuery);

5、书写并添加js代码。

<script src="src/jquery.js"></script> 

<script src="src/ui-choose.js"></script> 

<script>

// 将所有.ui-choose实例化

$('.ui-choose').ui_choose();

// uc_01 ul 单选

var uc_01 = $('#uc_01').data('ui-choose'); 

uc_01.click = function(index, item) {

    console.log('click', index, item.text())

}

uc_01.change = function(index, item) {

    console.log('change', index, item.text())

}

// uc_02 select 单选

var uc_02 = $('#uc_02').data('ui-choose');

uc_02.click = function(value, item) {

    console.log('click', value);

};

uc_02.change = function(value, item) {

    console.log('change', value);

};

// uc_03 ul 多选

var uc_03 = $('#uc_03').data('ui-choose');

uc_03.click = function(index, item) {

    console.log('click', index);

};

uc_03.change = function(index, item) {

    console.log('change', index);

};

// uc_04 select 多选

var uc_04 = $('#uc_04').ui_choose();

uc_04.click = function(value, item) {

    console.log('click', value);

};

uc_04.change = function(value, item) {

    console.log('change', value);

};

</script>

6、代码整体结构。

7、查看效果。