通讯录首字母检索功能实现

这次给大家带来通讯录首字母检索功能实现，通讯录首字母检索功能实现的注意事项有哪些，下面就是实战案例，一起来看一下。
主要代码如下：
<!doctype html><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>通讯录首字母检索</title> <link rel="stylesheet" href="css/style.css" rel="external nofollow" ></head><body> <header class="fixed"> 通讯录 </header> <img src="./img/img.png" alt=""> 张三 <img src="./img/img.png" alt=""> 李四 <img src="./img/img.png" alt=""> 王五 <img src="./img/img.png" alt=""> 刘六 <img src="./img/img.png" alt=""> 马七 <img src="./img/img.png" alt=""> 黄八 <img src="./img/img.png" alt=""> 莫九 <img src="./img/img.png" alt=""> 陈十 <img src="./img/img.png" alt=""> a九 <img src="./img/img.png" alt=""> 1十 <img src="./img/img.png" alt=""> 黄八 <img src="./img/img.png" alt=""> 今天 <img src="./img/img.png" alt=""> 突然 <img src="./img/img.png" alt=""> 梵蒂冈 <img src="./img/img.png" alt=""> 快乐的 <img src="./img/img.png" alt=""> 撒地方 <img src="./img/img.png" alt=""> 官方 <img src="./img/img.png" alt=""> 哦 <img src="./img/img.png" alt=""> 分割 <img src="./img/img.png" alt=""> 票 <ul> <li><img src="./img/068.png"></li> </ul> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.charfirst.pinyin.js"></script> <script type="text/javascript" src="js/sort.js"></script></body></html>
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('<li>a</li><li>b</li><li>c</li><li>d</li><li>e</li><li>f</li><li>g</li><li>h</li><li>i</li><li>j</li><li>k</li><li>l</li><li>m</li><li>n</li><li>o</li><li>p</li><li>q</li><li>r</li><li>s</li><li>t</li><li>u</li><li>v</li><li>w</li><li>x</li><li>y</li><li>z</li><li>#</li>'); 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() < makepy($(a).find('.num_name').text().charat(0))[0].touppercase() ? 1 : -1; } var initials = []; var num=0; sortlist.each(function(i) { var initial = makepy($(this).find('.num_name').text().charat(0))[0].touppercase(); if(initial>='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 最终效果：
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何使用webpack设置反向代理
操作angularjs跨域设置白名单
以上就是通讯录首字母检索功能实现的详细内容。

通讯录首字母检索功能实现

VIP推荐