select-os-icon.js

/*** Created by Administrator on 16-7-8.* @author 郑钟良<zzl@ourstu.com>*/
(function($){var os_icon_list=['home','cloud','weibo','question','money','th-large','talk','news','ask','shopping-cart','group-white','class','find-people','issue','event','role','shop-white','comments','group','panel','flag','shop','question-group','txt','th-large-white','love'];var OS_ICON=function(element,options){this.select=element;this.options=$.extend({},$.fn.select_os_icon.defaults,options);this.init();}OS_ICON.prototype={init:function(){var $tag=this.select;this._append_options_html($tag)._append_select_html($tag.parent());$tag.hide();return this;},_append_options_html:function($tag){var html='<option value="-">无</option>';for(var key in os_icon_list){html+='<option value="'+os_icon_list[key]+'">os-icon-'+os_icon_list[key]+'</option>';}$tag.append(html);return this;},_append_select_html:function($tag){var html='<div class="select-os-icon-block"><a class="select-single" data-role="select-single" tabindex="-1"><span title="[没有图标]">[没有图标]</span><div><b></b></div></a><div class="option-list"><ul class="select-results">';html+='<li class="active-result" title="" data-option-array-index="0"><em></em>[没有图标]</li>';for(var key in os_icon_list){html+='<li class="active-result icon" title="" data-option-array-index="'+(parseInt(key)+1)+'"><i class="os-icon-'+os_icon_list[key]+'" title="'+os_icon_list[key]+'"></i></li>';}html+='</ul></div></div>';$tag.append(html);$tag.each(function(){var icon_name=$(this).find('.select-os-icon').attr('data-value');if(icon_name!='-'){$(this).find('.select-single span').attr('title',icon_name).html('<i class="os-icon-'+icon_name+'"></i>'+icon_name);}});return this;},bind_select:function(){$('[data-role="select-single"]').unbind();$('[data-role="select-single"]').click(function(){var $tag=$(this).parents('.select-os-icon-block');if($tag.hasClass('active')){$tag.removeClass('active');}else{$('.select-os-icon-block').removeClass('active');$tag.addClass('active');}return true;});$('.active-result').unbind();$('.active-result').click(function(){var $tag=$(this).parents('.select-os-icon-block');var num=parseInt($(this).attr('data-option-array-index'));$tag.removeClass('active');if(num===0){$tag.find('.select-single span').attr('title','[没有图标]').html('[没有图标]');$tag.siblings('.select-os-icon').val('-');}else{num--;$tag.find('.select-single span').attr('title',os_icon_list[num]).html('<i class="os-icon-'+os_icon_list[num]+'"></i>'+os_icon_list[num]);$tag.siblings('.select-os-icon').val(os_icon_list[num]);}});return this;}}$.fn.select_os_icon=function(opts){var os_icon=new OS_ICON(this,opts);os_icon.bind_select();return this;}$.fn.select_os_icon.defaults={}
})(jQuery);

os-icon.less --》os-icon.css (phpStorm的less插件会完成转换)

.os-icon{background: url('os-icon.png') top left no-repeat;width: 19.5px;height: 19.5px;display: inline-block;
}
@left-start:-158px;
@left-between:-71px;
@top-start:-34px;
@top-between:-52px;
.os-icon-home,.os-icon-1{.os-icon;background-position: @left-start @top-start;
}
.os-icon-cloud,.os-icon-2{.os-icon;background-position:@left-start+@left-between @top-start;
}.os-icon-weibo,.os-icon-3{.os-icon;background-position: @left-start+2*@left-between @top-start;
}.os-icon-question,.os-icon-4{.os-icon;background-position: @left-start+3*@left-between @top-start;
}.os-icon-money,.os-icon-5{.os-icon;background-position: @left-start+4*@left-between @top-start;
}
.os-icon-th-large,.os-icon-6{.os-icon;background-position: @left-start+5*@left-between @top-start;
}.os-icon-talk,.os-icon-7{.os-icon;background-position: @left-start @top-start+@top-between;
}
.os-icon-news,.os-icon-8{.os-icon;background-position: @left-start+@left-between @top-start+@top-between;
}.os-icon-ask,.os-icon-9{.os-icon;background-position: @left-start+2*@left-between @top-start+@top-between;
}.os-icon-shopping-cart,.os-icon-10{.os-icon;background-position: @left-start+3*@left-between @top-start+@top-between;
}.os-icon-group-white,.os-icon-11{.os-icon;background-position: @left-start+4*@left-between @top-start+@top-between;
}.os-icon-class,.os-icon-12{.os-icon;background-position: @left-start+5*@left-between @top-start+@top-between;
}
.os-icon-find-people,.os-icon-13{.os-icon;background-position: @left-start @top-start+2*@top-between;}
.os-icon-issue,.os-icon-14{.os-icon;background-position: @left-start+@left-between @top-start+2*@top-between;
}.os-icon-event,.os-icon-15{.os-icon;background-position: @left-start+2*@left-between @top-start+2*@top-between;
}.os-icon-role,.os-icon-16{.os-icon;background-position: @left-start+3*@left-between @top-start+2*@top-between;
}.os-icon-shop-white,.os-icon-17{.os-icon;background-position: @left-start+4*@left-between @top-start+2*@top-between;
}.os-icon-comments,.os-icon-18{.os-icon;background-position: @left-start+5*@left-between @top-start+2*@top-between;
}
.os-icon-group,.os-icon-19{.os-icon;background-position: @left-start @top-start+3*@top-between;
}
.os-icon-panel,.os-icon-20{.os-icon;background-position: @left-start+@left-between @top-start+3*@top-between;
}.os-icon-flag,.os-icon-21{.os-icon;background-position: @left-start+2*@left-between @top-start+3*@top-between;
}.os-icon-shop,.os-icon-22{.os-icon;background-position: @left-start+3*@left-between @top-start+3*@top-between;
}.os-icon-question-group,.os-icon-23{.os-icon;background-position: @left-start+4*@left-between @top-start+3*@top-between;
}.os-icon-txt,.os-icon-24{.os-icon;background-position: @left-start+5*@left-between @top-start+3*@top-between;
}
.os-icon-th-large-white,.os-icon-25{.os-icon;background-position: @left-start @top-start+4*@top-between;
}
.os-icon-love,.os-icon-26{.os-icon;background-position: @left-start+@left-between @top-start+4*@top-between;
}//icon-select
.select-os-icon-block{margin-left: 10px;width: 150px;position: relative;display: inline-block;font-size: 13px;vertical-align: middle;zoom: 1;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;.select-single{display: block;width: 100%;height: 32px;padding: 5px 8px;overflow: hidden;line-height: 1.53846154;color: #222;text-decoration: none;white-space: nowrap;vertical-align: middle;background-color: #fff;-webkit-background-clip: padding-box;background-clip: padding-box;border: 1px solid #ccc;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;span{display: block;margin-right: 26px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;.text-muted{}}div{position: absolute;top: 0;right: 0;display: block;height: 100%;padding: 5px 8px;b{display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 4px solid #353535;border-right: 4px solid transparent;border-bottom: 0 dotted;border-left: 4px solid transparent;}}}.option-list{position: absolute;top: 100%;left: -9999px;z-index: 1010;width: 300px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;background: #fff;border: 1px solid #cbcbcb;border: 1px solid rgba(0, 0, 0, .15);border-top: 1px solid #F2F2F2;-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);box-shadow: 0 4px 5px rgba(0, 0, 0, .15);margin-top: -1px;-webkit-background-clip: padding-box;background-clip: padding-box;border-radius: 0 0 4px 4px;ul{position: relative;max-height: 240px;padding: 0;margin: 0;overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;li{&:hover{background: #DADADA;}&.icon{display: inline-block;width: 42px;padding: 8px;font-size: 14px;line-height: 14px;text-align: center;border-radius: 4px;}}}}&.active{.select-single{div{b{content: "";border-top: 0 dotted;border-bottom: 4px solid #353535;}}}.option-list{left:0px;}}
}

os-icon.png