jQuery实现带右侧索引功能的通讯录示例【附源码下载】
程序员文章站
2022-04-20 13:42:09
本文实例讲述了jquery实现带右侧索引功能的通讯录。分享给大家供大家参考，具体如下：
通过jquery.charfirst.pinyin.js实现点击字母自动定位。实现...
本文实例讲述了jquery实现带右侧索引功能的通讯录。分享给大家供大家参考，具体如下：
通过jquery.charfirst.pinyin.js实现点击字母自动定位。实现动态加载通讯录数据。
完整实例代码点击此处。
主要代码如下：
<!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">
<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;
}
};
}
最终效果：
ps：这里再为大家推荐一款关于排序的演示工具供大家参考：
在线动画演示插入/选择/冒泡/归并/希尔/快速排序算法过程工具：
更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery表格(table)操作技巧汇总》、《jquery操作json数据技巧汇总》、《jquery form操作技巧汇总》、《jquery常用插件及用法总结》、《jquery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
推荐阅读
-
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
-
jQuery插件实现的日历功能示例【附源码下载】
-
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
-
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
-
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
-
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
-
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
-
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】