我的第一个纯手写jQuery插件

摘要: OpenSNS独有的os-icon jQuery插件



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