滑动索引条实现

<!DOCTYPE html>
<html lang="en">
<head>
<style type ="text/css">
    
.org-picker{
       border:1px;
       border-radius:4px;
       padding:5px;
       height:24px;
       line-height:24pxx;
       width:300px;
}    
.org-picker:focus{
     outline:0 none;
     border:1px solid #1abc9c
    
}
       
      

.ui-orgpicker-wrapper   {
     position:absolute; /* 绝对定位不占文档流 ,不影响其他元素的布局*/
     top:50px;
     left:10px;       /*需要根据提供的容器进行更改*/
     width:300px;
     height:400px;
     font-size:12px;
     color:#666;
     box-shadow:2px 2px 8px 2px rgb(128,128,128,.3);
}    
       
       
.ui-orgpicker-wrapper  .ui-orgpicker-search-input{
       border:1px solid;
       border-radius:4px;
       padding:5px;
       height:24px;
       line-height:24pxx;
       width:90% ;
}    
.ui-orgpicker-wrapper .ui-orgpicker-search-input:focus{
     outline:0 none;
     border:1px solid #1abc9c
    
}
.ui-orgpicker-wrapper .ui-orgpicker-center-letter{
   
    position: absolute;
    left: 40%;
    top: 40%;
    border-radius: 5px;
    font-size: 35px;
    color: #555;
    text-align: center;
    line-height: 50px;
    background: rgba(145,145,145,0.6);
    width: 50px;
    height:50px;
    z-index:3;
    display: none;
}

.ui-orgpicker-wrapper .ui-orgpicker-sort-box{
    position:absolute;
    
    width: 90%;
    height:360px;
    margin-top:1px;
    overflow: scroll;
}
.ui-orgpicker-wrapper .ui-orgpicker-sort-list{
    padding:1px 10px 1px 50px;
    position: relative;
    height: 30px;
    line-height: 40px;
    border-bottom:1px solid #ddd;
}


.ui-orgpicker-wrapper .ui-orgpicker-sort-letter{
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    color:#787878;
    font-size: 14px;
    border-bottom:1px solid #ddd;
}
.ui-orgpicker-wrapper .ui-orgpicker-initials{
    position: absolute;
    top: 30px;
    right: 10px;
    height: 100%;
      text-align: center;
    font-size: 12px;
    z-index: 99;
    background: rgba(145,145,145,0);
}
.ui-orgpicker-wrapper .ui-orgpicker-initials li img{
    width: 14px;
}

.ui-orgpicker-wrapper .ui-orgpicker-initials ul li {
    margin:0;padding:0;    
    list-style: none;
}
</style>
</head>
<body>
    
    
<input  type="text" class="org-picker"/>

<!---

window.orgpicker.init($('.org-picker'))
->


<script type="text/javascript" src="zepto.js"></script>
<script type="text/javascript" src="sort.js"></script>

</body>

</html>






(function(){

        var orgpicker = {};
        var letterlist = [];
        var data = [
                                        {spp:'LGP_CMB',letter_tag:'*',letter_frs:'Y',py_frs:'YXFR',py_full:'YINXINGFAREN',spp_txt:'银行法人'},
                                            {spp:'BOD_BOD',letter_tag:'*',letter_frs:'J',py_frs:'JNHZ',py_full:'JINGNEIHUIZONG',spp_txt:'境内汇总'},
                                             {spp:'BOF_BOF',letter_tag:'*',letter_frs:'J',py_frs:'JWHZ',py_full:'JINGWAIHUIZONG',spp_txt:'境外汇总'},
                                            {spp:'BK1_110',letter_tag:'B',letter_frs:'B',py_frs:'BJFX',py_full:'BEIJINGFENXING',spp_txt:'北京分行'},
                                            {spp:'BK1_125',letter_tag:'N',letter_frs:'N',py_frs:'NJFX',py_full:'NANJINGFENXING',spp_txt:'南京分行'},
                                            {spp:'BK1_121',letter_tag:'S',letter_frs:'S',py_frs:'SHFX',py_full:'SHANGHAIFENXING',spp_txt:'上海分行'},
                                            {spp:'BK1_755',letter_tag:'S',letter_frs:'S',py_frs:'SZFX',py_full:'SHENZHENFENXING',spp_txt:'深圳分行'},
                                            {spp:'BK1_127',letter_tag:'W',letter_frs:'W',py_frs:'WHFX',py_full:'WUHANFENXING',spp_txt:'武汉分行'},
                                            {spp:'BK1_991',letter_tag:'W',letter_frs:'W',py_frs:'WLMQ',py_full:'WULUMUQI',spp_txt:'乌鲁木齐分行'},
                                            {spp:'BK1_123',letter_tag:'Z',letter_frs:'Z',py_frs:'ZQFX',py_full:'ZHONGQINGFENXING',spp_txt:'重庆分行'},
                                            {spp:'BK1_124',letter_tag:'S',letter_frs:'S',py_frs:'SYFX',py_full:'SHENYANGFENXING',spp_txt:'沈阳分行'},
                                            {spp:'BK1_122',letter_tag:'T',letter_frs:'T',py_frs:'TJFX',py_full:'TIANJINFENXING',spp_txt:'天津分行'},
                                            {spp:'BK1_371',letter_tag:'Z',letter_frs:'Z',py_frs:'ZZFX',py_full:'ZHENGZHOUFENXING',spp_txt:'郑州分行'},
                                            {spp:'BK1_713',letter_tag:'C',letter_frs:'C',py_frs:'CSFX',py_full:'CHANGSHAFENXING',spp_txt:'长沙分行'},
                                            {spp:'BK1_791',letter_tag:'N',letter_frs:'N',py_frs:'NCFX',py_full:'NANCHANGFENXING',spp_txt:'南昌分行'},
                                            {spp:'BK1_129',letter_tag:'X',letter_frs:'X',py_frs:'XAFX',py_full:'XIANFENXING',spp_txt:'西安分行'},
                                            {spp:'BK1_351',letter_tag:'T',letter_frs:'T',py_frs:'TYFX',py_full:'TAIYUANFENXING',spp_txt:'太原分行'},
                                            {spp:'BK1_531',letter_tag:'J',letter_frs:'J',py_frs:'JNFX',py_full:'JINANFENXING',spp_txt:'济南分行'},
                                            {spp:'BK1_128',letter_tag:'C',letter_frs:'C',py_frs:'CDFX',py_full:'CHENGDONGFENXING',spp_txt:'成都分行'},
                                            {spp:'BK1_971',letter_tag:'X',letter_frs:'X',py_frs:'XNFX',py_full:'XININGFENXING',spp_txt:'西宁分行'},
                                            {spp:'BK1_551',letter_tag:'H',letter_frs:'H',py_frs:'HFFX',py_full:'HEFEIFENXING',spp_txt:'合肥分行'},
                                            {spp:'BK1_898',letter_tag:'H',letter_frs:'H',py_frs:'HKFX',py_full:'HAIKOUFENXING',spp_txt:'海口分行'},
                                            {spp:'BK1_120',letter_tag:'G',letter_frs:'G',py_frs:'GZFX',py_full:'GUANGZHOUFENXING',spp_txt:'广州分行'},
                                            {spp:'BK1_851',letter_tag:'G',letter_frs:'G',py_frs:'GYFX',py_full:'GUIYANGFENXING',spp_txt:'贵阳分行'},
                                            {spp:'BK1_571',letter_tag:'H',letter_frs:'H',py_frs:'HZFX',py_full:'HANGZHOUFENXING',spp_txt:'杭州分行'},
                                            {spp:'BK1_591',letter_tag:'F',letter_frs:'F',py_frs:'FZFX',py_full:'FUZHOUFENXING',spp_txt:'福州分行'},
                                            {spp:'BK1_931',letter_tag:'L',letter_frs:'L',py_frs:'LZFX',py_full:'LANZHOUFENXING',spp_txt:'兰州分行'},
                                            {spp:'BK1_871',letter_tag:'K',letter_frs:'K',py_frs:'KMFX',py_full:'KUNMINGFENXING',spp_txt:'昆明分行'},
                                            {spp:'HD1_200',letter_tag:'Z',letter_frs:'Z',py_frs:'ZXYY',py_full:'ZONGXINGYINGYE',spp_txt:'总行营业部'},
                                            {spp:'BK1_311',letter_tag:'S',letter_frs:'S',py_frs:'SJZ',py_full:'SHIJIAZHUANG',spp_txt:'石家庄'},
                                            {spp:'BK1_451',letter_tag:'H',letter_frs:'H',py_frs:'HEB',py_full:'HAERBIN',spp_txt:'哈尔滨'},
                                            {spp:'BK1_891',letter_tag:'L',letter_frs:'L',py_frs:'LSFX',py_full:'LASAFENXING',spp_txt:'拉萨分行'},
                                            {spp:'BK1_898',letter_tag:'H',letter_frs:'H',py_frs:'HKFX',py_full:'HAIKOUFENXING',spp_txt:'海口分行'},
                                            {spp:'BK1_771',letter_tag:'N',letter_frs:'N',py_frs:'NNFX',py_full:'NANNINGFENXING',spp_txt:'南宁分行'},
                                            {spp:'OTH_999',letter_tag:'#',letter_frs:'Q',py_frs:'QT',py_full:'QITA',spp_txt:'其他'}

                          ] ;
    //  var orgpicker = window.orgpicker;

      // 初始化机构 数据
      orgpicker.initData = function(){


           console.log("init data");

           // 判断数组是否存在元素
            function contains(arr, obj) {
                    var i = arr.length;
                    while (i--) {
                        if (arr[i] === obj) {
                            return true;
                        }
                    }
                    return false;
             }
             var existDefault =false;  // 标记是否存在缺省非中文项
           for(var i=0;i < data.length;i++)
           {
                if(data[i].letter_tag !== '*' && !contains(letterlist,data[i].letter_tag)){
                    if(data[i].letter_tag==='#' ){
                        existDefault =true;
                    }else{
                    letterlist.push(data[i].letter_tag);}
                }
           }

           letterlist = letterlist.sort();
           if(existDefault === true){
               letterlist.push('#');
           }
           console.log(letterlist);


      };


      // 初始化页面 html 元素
      orgpicker.buildUI = function(){

                var html = '';

               console.log("buildUi");

               html =
                '<div class ="ui-orgpicker-search" >'+
                '<input  class ="ui-orgpicker-search-input" value ="分行搜索" />'+
                '</div>'+
                '<div class="ui-orgpicker-center-letter" >'+
                '</div>'+
                '<div class="ui-orgpicker-sort-box">'+
                '<div class="ui-orgpicker-sort-letter" style="display:none" id="fix">fix</div>';
                for (var i=0;i<letterlist.length;i++){
                    var letterid =  letterlist[i] ;
                if (letterlist[i] === '#'){
                        letterid = 'default'
                }

                    html +=    '<div class="ui-orgpicker-sort-letter" id="' + letterid + '">' + letterlist[i] + '</div>';
                } ;
                html +=
                '</div>'+
                '<div class="ui-orgpicker-initials">'+
                    '<ul>'+
                        '<li class="ui-orgpicker-initials-letter"><img src="img/068.png"></li>';

                for (var i=0;i<letterlist.length;i++){
                    html +=    '<li class="ui-orgpicker-initials-letter" >' + letterlist[i] +  '</li>'
                } ;
                html +=
                    '</ul>'+
                '</div>';


        $wrapper = document.createElement("div");
        $wrapper.className="ui-orgpicker-wrapper";
                 $wrapper.innerHTML = html;
        document.body.appendChild($wrapper);
      };


      // 数据渲染

      orgpicker.render = function(orgdata, defaultorg){

           console.log("render");
           // 插入机构数据

        for (var i=0;i<data.length;i++){

           var sort_letter_tag  = data[i].letter_tag;
           var sort_id = sort_letter_tag;

           if(sort_letter_tag === '#') {
                   sort_id = 'default';
           }else if(sort_letter_tag === '*') {
                 sort_id = 'fix';
           }

                var sort_data_html = '<div class="ui-orgpicker-sort-list"><div class="ui-orgpicker-sort-data" '+
                'id="' +data[i].spp + ' "py_frs ="' +  data[i].py_frs + ' "py_full = "' + data[i].py_full + '"  >' +
                data[i].spp_txt  + '</div></div>';
       
         console.log ($('#' + sort_id));
         
             $('#' + sort_id).after(sort_data_html);

        }

      };
      
      orgpicker.bindEvent = function(){
          
                  
           $(".ui-orgpicker-wrapper .ui-orgpicker-initials  ul li").click(function(){
                 
                  console.log("bindEvent");
                   
                   var LetterBox = $('.ui-orgpicker-wrapper .ui-orgpicker-center-letter');
                   var Initials  = $('.ui-orgpicker-wrapper .ui-orgpicker-initials');
            var _this=$(this);
            var LetterHtml=_this.html();
            LetterBox.html(LetterHtml);
            LetterBox.css('display','block');


            setTimeout(function(){
                Initials.css('background','rgba(145,145,145,0)');
                LetterBox.css('display','none');
            },1000);
            
            
            var SortBox =$('.ui-orgpicker-wrapper .ui-orgpicker-sort-box');
            
            /**
                    SortBox.scrollTop() ; 获取向下滚动的距离 。
                    
                    SortBox.scrollTop(100) ; 设置向下滚动的离 ;
            
            */
            
            

           /* var _index = _this.index()
            if(_index==0){
                $('html,body').animate({scrollTop: '0px'}, 300);//点击第一个滚到顶部
            }else if(_index==27){
                var DefaultTop=$('#default').position().top;
                $('html,body').animate({scrollTop: DefaultTop+'px'}, 300);//点击最后一个滚到#号
            }else{
                var letter = _this.text();
                if($('#'+letter).length>0){
                    var LetterTop = $('#'+letter).position().top;
                    $('html,body').animate({scrollTop: LetterTop-45+'px'}, 300);
                }
            }*/
        });

      };

      orgpicker.init = function(input){


          orgpicker.initData();
          orgpicker.buildUI();
          orgpicker.render();
          orgpicker.bindEvent();

          //window.orgpicker.init($('.org-picker'))



          /* var $input = document.querySelector(input);
       var isOpen = false;

           $input.addEventListener('click',function () {
          if(isOpen){
              $wrapper.classList.remove('ui-datepicker-wrapper-show');
              isOpen =false;
          }else {
              $wrapper.classList.add('ui-datepicker-wrapper-show');
              var left = $input.offsetLeft;
              var top  = $input.offsetTop;
              var height = $input.offsetHeight;
              $wrapper.style.top = top + height + 2 + 'px';
              $wrapper.style.left = left + 'px';
              isOpen = true;
          }
        },false);

          */
      };

    window.orgpicker = orgpicker;
})();











评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值