jquery带右侧索引的通讯录

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

具体实例下载地址：

没有C币的可以访问链接: https://pan.baidu.com/s/1o8n6Svo 密码: tv4r

有C币的土豪可以访问带右侧索引通讯录下载使用。

主要代码如下：

<!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">
</head>
<body><header class="fixed"><div class="header">通讯录</div></header><div id="letter" ></div><div class="sort_box"><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">张三</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">李四</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">王五</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">刘六</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">马七</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">黄八</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">莫九</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">陈十</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">a九</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">1十</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">黄八</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">今天</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">突然</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">梵蒂冈</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">快乐的</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">撒地方</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">官方</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">哦</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">分割</div></div><div class="sort_list"><div class="num_logo"><img src="./img/img.png" alt=""></div><div class="num_name">票</div></div></div><div class="initials"><ul><li><img src="./img/068.png"></li></ul></div><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,div,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,div{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('<div class="sort_letter" id="'+ value +'">' + value + '</div>');});if(num!=0){SortBox.append('<div class="sort_letter" id="default">#</div>');}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;}};
}

最终效果：

jquery带右侧索引的通讯录相关推荐

【Android 仿微信通讯录导航分组列表-下】自定义View为RecyclerView打造右侧索引导航栏IndexBar
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布转载请标明出处: http://blog.csdn.net/zxt0601/article/details/52420706 本文出 ...
android之带右侧字母（拼音）索引的列表
在开发app的过程中,如果用到通讯录或者类似的列表,需要快速在其中定位,可以根据列表项的拼音首字母来定位,这时候就需要用到右侧字母索引了.必如现在的微信通讯录界面就是如此.在实现这种功能的过程中,还是 ...
带中文索引的ListView 仿微信联系人列表
因为各种原因,项目经理和产品经理把我做的东西给否定了,所以决定分享出去. 主要功能: 1 .带中文索引的ListView 2.自己定义顶部搜索视图,能够对返回button,搜索button加入事件监听 ...
jquery带缩略图轮播_带有jQuery和PHP的新鲜滑动缩略图库
jquery带缩略图轮播 View demo 查看演示Download Source 下载源 In this tutorial we are going to create another full ...
微信小程序手把手教你实现带字母索引的城市选择列表
微信小程序手把手教你实现带字母索引的城市选择列表前言需求分析左边可滑动列表滑动列表UI实现 item点击事件右边带字母的索引条索引条从上到下分别是定位和26个大写字母索引条响应触摸和点击 ...
仿小米相册列表实现自定义带快速索引功能的RecyclerView
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录篇章目标要点一.实现效果二.设计布局原理三.关键代码实现 1.浮标随手势移动 2.浮标随列表移动 3.列表随浮标移动而 ...
HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法在页面中引入jquery和TweenMax.js的 ...
一款基于jquery带百分比的响应式进度加载条
今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...
MVC 无法将带 [] 的索引应用于“System.Dynamic.DynamicObject”类型的表达式
无法将带 [] 的索引应用于"System.Dynamic.DynamicObject"类型的表达式说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以 ...

jquery带右侧索引的通讯录

jquery带右侧索引的通讯录相关推荐

最新文章

热门文章