html5仿手機通訊錄按字母排序及搜尋功能
阿新 • • 發佈：2019-01-04
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
