这次给大家带来通讯录首字母检索功能实现，通讯录首字母检索功能实现的注意事项有哪些，下面就是实战案例，一起来看一下。
主要代码如下：
通讯录首字母检索 通讯录
@@##@@
张三
@@##@@
李四
@@##@@
王五
@@##@@
刘六
@@##@@
马七
@@##@@
黄八
@@##@@
莫九
@@##@@
陈十
@@##@@
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('' + 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; } };}登录后复制
最终效果：
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
如何使用webpack设置反向代理
如何使用webpack设置反向代理
以上就是通讯录首字母检索功能实现的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3187059.html
