右侧带索引通讯录实现（附代码）

这次给大家带来右侧带索引通讯录实现（附代码），右侧带索引通讯录实现的注意事项有哪些，下面就是实战案例，一起来看一下。

通过jquery.charfirst.pinyin.js实现点击字母自动定位。实现动态加载通讯录数据。

主要代码如下：

                  
    
      通讯录    
  
  
  
    
      
              
      
张三
    
    
      
              
      
李四
    
    
      
              
      
王五
    
    
      
              
      
刘六
    
    
      
              
      
马七
    
    
      
              
      
黄八
    
    
      
              
      
莫九
    
    
      
              
      
陈十
    
    
      
              
      
a九
    
    
      
              
      
1十
    
    
      
              
      
黄八
    
    
      
              
      
今天
    
    
      
              
      
突然
    
    
      
              
      
梵蒂冈
    
    
      
              
      
快乐的
    
    
      
              
      
撒地方
    
    
      
              
      
官方
    
    
      
              
      
哦
    
    
      
              
      
分割
    
    
      
              
      
票
    
  
  
    
      
    
  
      

登录后复制

style.css

html,body,p,ul,li,ol,a,input,textarea,p,dl,dt,dd{margin:0;padding:0;}ul li{list-style: none;}a{text-decoration: none;cursor: pointer;}html{height: 100%;}body{height: 100%;background: #f5f5f5;position: relative;font-family: '微软雅黑';max-width: 640px;margin:auto;}a,input,img,textarea,span,p{outline: 0;-webkit-tap-highlight-color:rgba(255,0,0,0);}header{  width:100%;  height: 45px;  background: #ececea;  border-bottom: 1px solid #ddd;}header.fixed{  position: fixed;  left: 0;  top: 0;  z-index: 99;}.header{  margin:0 20px;  text-align: center;  color: #4e4a49;  font-size: 1em;  height: 45px;  line-height: 45px;  position: relative;}#letter{  width: 100px;  height: 100px;  border-radius: 5px;  font-size: 75px;  color: #555;  text-align: center;  line-height: 100px;  background: rgba(145,145,145,0.6);  position: fixed;  left: 50%;  top: 50%;  margin:-50px 0px 0px -50px;  z-index: 99;  display: none;}#letter img{  width: 50px;  height: 50px;  float: left;  margin:25px 0px 0px 25px;}.sort_box{  width: 100%;  padding-top: 45px;  overflow: hidden;}.sort_list{  padding:10px 60px 10px 80px;  position: relative;  height: 40px;  line-height: 40px;  border-bottom:1px solid #ddd;}.sort_list .num_logo{  width: 50px;  height: 50px;  border-radius: 10px;  overflow: hidden;  position: absolute;  top: 5px;  left: 20px;}.sort_list .num_logo img{  width: 50px;  height: 50px;}.sort_list .num_name{  color: #000;}.sort_letter{  background-color: white;  height: 30px;  line-height: 30px;  padding-left: 20px;  color:#787878;  font-size: 14px;  border-bottom:1px solid #ddd;}.initials{  position: fixed;  top: 47px;  right: 0px;  height: 100%;  width: 15px;  padding-right: 10px;  text-align: center;  font-size: 12px;  z-index: 99;  background: rgba(145,145,145,0);}.initials li img{  width: 14px;}

登录后复制

sort.js

$(function(){    var Initials=$('.initials');    var LetterBox=$('#letter');    Initials.find('ul').append('
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
#
');    initials();    $(".initials ul li").click(function(){      var _this=$(this);      var LetterHtml=_this.html();      LetterBox.html(LetterHtml).fadeIn();      Initials.css('background','rgba(145,145,145,0.6)');      setTimeout(function(){        Initials.css('background','rgba(145,145,145,0)');        LetterBox.fadeOut();      },1000);      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);        }      }    })    var windowHeight=$(window).height();    var InitHeight=windowHeight-45;    Initials.height(InitHeight);    var LiHeight=InitHeight/28;    Initials.find('li').height(LiHeight);})function initials() {//排序  var SortList=$(".sort_list");  var SortBox=$(".sort_box");  SortList.sort(asc_sort).appendTo('.sort_box');//按首字母排序  function asc_sort(a, b) {    return makePy($(b).find('.num_name').text().charAt(0))[0].toUpperCase() ='A'&&initial<='Z'){      if (initials.indexOf(initial) === -1)        initials.push(initial);    }else{      num++;    }  });  $.each(initials, function(index, value) {//添加首字母标签    SortBox.append('
' + value + '
');  });  if(num!=0){SortBox.append('
#
');}  for (var i =0;i<SortList.length;i++) {//插入到对应的首字母后面    var letter=makePy(SortList.eq(i).find('.num_name').text().charAt(0))[0].toUpperCase();    switch(letter){      case "A":        $('#A').after(SortList.eq(i));        break;      case "B":        $('#B').after(SortList.eq(i));        break;      case "C":        $('#C').after(SortList.eq(i));        break;      case "D":        $('#D').after(SortList.eq(i));        break;      case "E":        $('#E').after(SortList.eq(i));        break;      case "F":        $('#F').after(SortList.eq(i));        break;      case "G":        $('#G').after(SortList.eq(i));        break;      case "H":        $('#H').after(SortList.eq(i));        break;      case "I":        $('#I').after(SortList.eq(i));        break;      case "J":        $('#J').after(SortList.eq(i));        break;      case "K":        $('#K').after(SortList.eq(i));        break;      case "L":        $('#L').after(SortList.eq(i));        break;      case "M":        $('#M').after(SortList.eq(i));        break;      case "N":        $('#N').after(SortList.eq(i));        break;      case "O":        $('#O').after(SortList.eq(i));        break;      case "P":        $('#P').after(SortList.eq(i));        break;      case "Q":        $('#Q').after(SortList.eq(i));        break;      case "R":        $('#R').after(SortList.eq(i));        break;      case "S":        $('#S').after(SortList.eq(i));        break;      case "T":        $('#T').after(SortList.eq(i));        break;      case "U":        $('#U').after(SortList.eq(i));        break;      case "V":        $('#V').after(SortList.eq(i));        break;      case "W":        $('#W').after(SortList.eq(i));        break;      case "X":        $('#X').after(SortList.eq(i));        break;      case "Y":        $('#Y').after(SortList.eq(i));        break;      case "Z":        $('#Z').after(SortList.eq(i));        break;      default:        $('#default').after(SortList.eq(i));        break;    }  };}

登录后复制

最终效果：

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

分享页面后跳转回首页

Vue自定义动态组件使用详解

以上就是右侧带索引通讯录实现（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！