最近有一个需求，要写一个通讯录效果的联系人列表效果，相信这个大家都不陌生，当然当我写到一半的时候，同事告诉我这个是android和IOS的需求，，，十分郁闷，但是本人求知欲甚是强烈，就用jq实现了这个功能。
现在我们先来看一下这个功能演示，这个实现了基本的功能，不过一些过渡的动画没有写上，后期会补上，大家想用的话，自行不上这个过渡效果：
通讯录效果演示.gif
首先我们来看一下html的布局，这个布局很简单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Title</title>
<style>
*{padding: 0;margin: 0}
html,body{
width: 100%;height: 100%;box-sizing: border-box;
font-size: 62.5%;
}
a,ul,li{
list-style: none;
text-decoration: none;
}
.slider{width: 100%;height: 100%;position: relative ; padding-top: 1.5rem }
.sliderNav{width: 10%;position: fixed;right: 0;height: 100%;text-align: center;top: 1.5rem;}
.slider>h2{
font-size: 2rem;
line-height: 3.5rem;
padding-left: 1.5rem;
}
.sliderNav>li>a{
font-size: 2rem;
color: #18a2ff;
}
.slider-content{
position: absolute;
left: 1.5rem;
width: 85%;
}
.slider-content>div{
font-size: 30px;
padding-left: 1.5rem;
height: 50px;
line-height: 50px;
background-color: #7f8393;
}
.slider-content>div:nth-child(2n+1){
background-color: #bff3de;
}
.slider-content>div:nth-child(2n){
background-color: #7f8393;
}
.slider-content>ul{
padding-top: 0.5rem;
}
.slider-content>ul>li{
line-height:3rem;
}
</style>
<script src="jquery.min.js"></script>
<script src="codeList.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="slider" id="slider">
<h2 >邀请的好友列表</h2>
<div class="slider-content" id="sliderContent"></div>
<ul class="sliderNav" id="sliderNav"></ul>
</div>
</body>
<script>
</script>
</html>
鉴于文件的太多，引入的文件部分我会以链接的形式，大家可以跳转页面，下载相应的部分
- 引入一个jquery文件
- 变量 的引入，其中需要引入一个 字符的Unicode编码范围为19968至40869
- 对应的汉字转码
4.列表显示的数据展示
111111111111111111111.png
相关链接请跳转此处
http://www.jianshu.com/p/fe5f32f5acfb
2016121411540catFish.jpg
有了以上的条件，我们来看js实现部分
/**
* Created by Administrator on 2017/1/5.
*/
$(function () {
var obj = getInviterFirst(inviter);
getSliderNav(obj.inviterFirst);
console.log(obj.sortInviter);
getSliderContent(obj.sortInviter);
});
function getSliderContent(object) {
var html = '';
var _li_html = '';
for(var i in object){
console.log(i);
for (var j = 0 ; j < object[i].length; j++){
_li_html+='<li>'+object[i][j]+'</li>';
}
html += '<div id='+i+'><span>'+i+'</span></div><ul >'+_li_html+'</ul>';
_li_html = '';
}
$('#sliderContent').html(html);
}
/**
* 字母排序
* @param a
* @param b
* @returns {number}
*/
function mySorter(a, b){
if (/^\d/.test(a)^/^\D/.test(b)) return a>b?1:(a==b?0:-1);
return a>b?-1:(a==b?0:1);
}
/**
* 获取通讯录右侧的索引
* @param array
*/
function getSliderNav(array) {
var html = '';
for (var i = 0; i < array.length ; i ++){
html+='<li ><a href=#'+array[i]+'>'+array[i]+'</a></li>';
}
$('#sliderNav').append(html);
$('.sliderNav li').css('height',($('.sliderNav').height()-35)/array.length);
$('.sliderNav li').css('line-height',($('.sliderNav').height()-35)/array.length+'px');
}
/**
* 获取所有数据包含的首字母，并且去重，按照字母顺序进行排序,并将数据按照首字母进行分类
* @param arr
* @returns {*|Array.<T>}
*/
function getInviterFirst(arr){
var objObj = {};
var array = [];
var objArr = [];
for (var i = 0 ; i < arr.length ; i ++){
array.push(query(arr[i]));
console.log(query(arr[i]));
if (!objObj.hasOwnProperty(query(arr[i]))){
objArr = [];
objArr.push(arr[i]);
objObj[query(arr[i])] = objArr;
}else{
objArr.push(arr[i]);
}
}
return obj = {
sortInviter:objObj,
inviterFirst:(Array.from(new Set(array))).sort(mySorter)
};
}
/**
*查看拼音首字母缩写
*/
function query(str){
if(str == "") return;
var arrRslt = makePy(str);
return arrRslt[0].toLowerCase().substr(0,1);
}
/**
* 参数,中文字符串
* 返回值:拼音首字母串数组
* @param str
* @returns {*}
*/
function makePy(str){
if(typeof(str) != "string")
throw new Error(-1,"函数makePy需要字符串类型参数!");
var arrResult = new Array(); //保存中间结果的数组
for(var i=0,len=str.length;i<len;i++){
//获得unicode码
var ch = str.charAt(i);
//检查该unicode码是否在处理范围之内,在则返回该码对映汉字的拼音首字母,不在则调用其它函数处理
arrResult.push(checkCh(ch));
}
//处理arrResult,返回所有可能的拼音首字母串数组
return mkRslt(arrResult);
}
function checkCh(ch){
var uni = ch.charCodeAt(0);
//如果不在汉字处理范围之内,返回原字符,也可以调用自己的处理函数
if(uni > 40869 || uni < 19968)
return ch; //dealWithOthers(ch);
//检查是否是多音字,是按多音字处理,不是就直接在strChineseFirstPY字符串中找对应的首字母
return (oMultiDiff[uni]?oMultiDiff[uni]:(strChineseFirstPY.charAt(uni-19968)));
}
function mkRslt(arr){
var arrRslt = [""];
for(var i=0,len=arr.length;i<len;i++){
var str = arr[i];
var strlen = str.length;
if(strlen == 1){
for(var k=0;k<arrRslt.length;k++){
arrRslt[k] += str;
}
}else{
var tmpArr = arrRslt.slice(0);
arrRslt = [];
for(k=0;k<strlen;k++){
//复制一个相同的arrRslt
var tmp = tmpArr.slice(0);
//把当前字符str[k]添加到每个元素末尾
for(var j=0;j<tmp.length;j++){
tmp[j] += str.charAt(k);
}
//把复制并修改后的数组连接到arrRslt上
arrRslt = arrRslt.concat(tmp);
}
}
}
return arrRslt;
}
哈哈，看着这个通讯录效果虽然比较简陋但是基本效果还是实现了，大家可以引用在此基础上进行修改以满足你们的需求欲，如有疑问请留言或者发送我的邮箱2372734044@qq.com
不足之处大家尽可以指出来，方便交流探讨
今晚加个鸡腿.jpg
网友评论