我的第一个纯手写jQuery插件

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/zzlzheng/blog/710888