html5仿手机通讯录按字母排序及搜索功能
程序员文章站
2024-02-27 21:11:15
...
1.实现联系人字母排序，点击字母跳转显示联系人组目录;
2.实现联系搜索，动态显示符合查询的联系人;
详情见资源：https://download.csdn.net/download/huicaipa1943/10304104
效果图如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<META name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<style>
* {
margin: 0;
padding: 0;
}
body{
font-size:16px;
}
.header{
position: fixed;
left: 0;
top: 0;
z-index: 99;
width: 100%;
height: 45px;
background: #21a4f4;
}
.header p{
margin-left:20px;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 18px;
display:inline-block;
}
.header span{
color:#fff;
margin-right: 20px;
float: right;
line-height: 45px;
}
.content{
margin-top:45px;
}
.nav{
background-color: #fff;
}
.header-two{
position: fixed;
left: 0;
top: 0;
z-index: 99;
width: 100%;
height: 45px;
background: #21a4f4;
}
.header-two p{
margin-left:20px;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 18px;
display:inline-block;
}
.header-two span{
color:#fff;
margin-left:6px;
line-height: 45px;
}
.header-two i{
color:#fff;
margin-left: 20px;
line-height: 45px;
}
.header-two input{
border:none;
width:80%;
background-color:transparent;
}
.sort_box-two{
display:block;
}
.input{
border-bottom: 2px #fff solid;
display: inline-block;
height: 42px;
width: calc(100% - 50px);
}
ul li{list-style: none;}
a{text-decoration: none;cursor: pointer;}
html{height: 100%;}
a,input,img,textarea,span,div{outline: 0;-webkit-tap-highlight-color:rgba(255,0,0,0);}
#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;
}
[class^="sort_box"]{
width: 100%;
padding-top: 45px;
overflow: hidden;
}
[class^="sort_list"]{
padding:10px 60px 10px 80px;
position: relative;
line-height: 50px;
border-bottom:1px solid #ddd;
}
[class^="sort_list"] .num_logo{
width: 50px;
height: 50px;
border-radius: 10px;
overflow: hidden;
position: absolute;
left: 20px;
}
[class^="sort_list"] .num_logo img{
width: 50px;
height: 50px;
}
[class^="sort_list"] .num_name{
color: #000;
}
.sort_letter{
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;
}
</style>
<!-- Fonts -->
<link
href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400'
rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900'
rel='stylesheet' type='text/css'>
<!-- CSS Libs -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="css/bootstrap-switch.min.css">
<script src="js/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="js/circle.js"></script>
</HEAD>
<BODY>
<div class="header-two">
<div>
<i class="glyphicon glyphicon-chevron-left" onclick="back()"><a href="javascript:back()"></a> </i>
<div class="input">
<span class="glyphicon glyphicon-search"></span>
<input id="search" type="text" />
</div>
</div>
</div>
<div class="header">
<div>
<p>通讯录</p>
<span class="glyphicon glyphicon-plus"></span>
<span id="gosearch" class="glyphicon glyphicon-search"></span>
</div>
</div>
<div id="letter" ></div>
<div class="sort_box-two">
</div>
<div class="sort_box">
<div class="sort_list">
<div class="num_logo">
<img src="images/avator.png" alt="">
</div>
<div class="num_name">张三</div>
</div>
<div class="sort_list">
<div class="num_logo">
<img src="images/avator.png" alt="">
</div>
<div class="num_name">李四</div>
</div>
<div class="sort_list">
<div class="num_logo">
<img src="images/avator.png" alt="">
</div>
<div class="num_name">王五</div>
</div>
<div class="sort_list">
<div class="num_logo">
<img src="images/avator.png" alt="">
</div>
<div class="num_name">刘六</div>
</div>
<div class="sort_list">
<div class="num_logo">
<img src="images/avator.png" alt="">
</div>
<div class="num_name">马七</div>
</div>
<div class="sort_list">
<div class="num_logo">
<img src="images/avator.png" alt="">
</div>
<div class="num_name">黄八</div>
</div>
<div class="sort_list">
<div class="num_logo">
<img src="images/avator.png" alt="">
</div>
<div class="num_name">莫九</div>
</div>
<div class="sort_list">
<div class="num_logo">
<img src="images/avator.png" alt="">
</div>
<div class="num_name">陈十</div>
</div>
<div class="sort_list">
<div class="num_logo">
<img src="images/avator.png" alt="">
</div>
<div class="num_name">陈十</div>
</div><div class="sort_list">
<div class="num_logo">
<img src="images/avator.png" alt="">
</div>
<div class="num_name">陈十</div>
</div>
<div class="sort_list">
<div class="num_logo">
<img src="images/avator.png" alt="">
</div>
<div class="num_name">a九</div>
</div>
<div class="sort_list">
<div class="num_logo">
<img src="images/avator.png" alt="">
</div>
<div class="num_name">1十</div>
</div>
</div>
<div class="initials">
<ul>
</ul>
</div>
</BODY>
</HTML>circle.js
function back(){
$('[class*="-two"]').css('display','none');
$('.sort_box').css('display','block');
$('.initials').css('display','block');
$('.header').css('display','block');
}
$(function(){
window.onresize=function(){
if($(window).height()<400){
$('.nav').hide();
}else{
$('.nav').show();
}
}
$('[class*="-two"]').css('display','none');
$('#gosearch').click(function(){
$('[class*="-two"]').css('display','block');
$('.sort_box').css('display','none');
$('.header').css('display','none');
$('.initials').css('display','none');
$('#search').focus();
});
$('#search').bind('input propertychange', function() {
$('.sort_box-two').html('');
//进行相关操作
var val=$(this).val();
if(val==""){
return;
}
var str="";
//去查找原字符串及其拼音首字母是否包含此字符，若包含就把它加进去
$(".sort_list").each(function() {
var name=$(this).find('.num_name').text();
if(name.toLowerCase().indexOf(val.toLowerCase()) != -1){//包含
str+="<div class='sort_list-two' id='"+$(this).attr('id')+"'> "+$(this).html()+"</div>";
}else{
var PYarr = makePy(name);
for(var i=0;i<PYarr.length;i++){
if(PYarr[i].toLowerCase().indexOf(val.toLowerCase()) != -1){//包含
str+="<div class='sort_list-two' id='"+$(this).attr('id')+"'> "+$(this).html()+"</div>";
}else{//不包含
}
}
}
});
$('.sort_box-two').html(str);
});
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 "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;
}
};
}其他引的一些包，可以自行百度下载
css
fonts
js