最近有一個需求，要寫一個通訊錄效果的聯絡人列表效果，相信這個大家都不陌生，當然當我寫到一半的時候，同事告訴我這個是android和IOS的需求，，，十分鬱悶，但是本人求知慾甚是強烈，就用jq實現了這個功能。
現在我們先來看一下這個功能演示，這個實現了基本的功能，不過一些過渡的動畫沒有寫上，後期會補上，大家想用的話，自行不上這個過渡效果：
首先我們來看一下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.列表顯示的資料展示
相關連結請跳轉此處
http://www.jianshu.com/p/fe5f32f5acfb
複製程式碼
/**
* 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 不足之處大家儘可以指出來，方便交流探討
