アドレス帳頭文字検索機能の実装

今回はアドレス帳の先頭文字検索機能の実装についてお届けします。アドレス帳の先頭文字検索機能を実装する際の注意点は何ですか？

メインのコードは次のとおりです:

nbsp;html>


  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <title>通讯录首字母检索</title>
  <link>


  <header>
    <p>
      通讯录
    </p>
  </header>
  <p></p>
  <p>
    </p><p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>张三</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>李四</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>王五</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>刘六</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>马七</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>黄八</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>莫九</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>陈十</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>a九</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>1十</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>黄八</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>今天</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>突然</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>梵蒂冈</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>快乐的</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>撒地方</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>官方</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>哦</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>分割</p>
    
    <p>
      </p><p>
        <img  src="/static/imghwm/default1.png" data-src="./img/img.png" class="lazy" alt="アドレス帳頭文字検索機能の実装" >
      </p>
      <p>票</p>
    
  
  <p>
    </p>

      
• 
    

     <script></script>   <script></script>   <script></script>

style.css

html,body,p,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,p{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('

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

#

');     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() ='A'&&initial' + value + '');   });   if(num!=0){SortBox.append('

#

');}   for (var i =0;i

最終効果:

この記事の事例を読んだ後は、この方法を習得したと思います。物事については、php 中国語 Web サイトの記事の他の関連トピックに注目してください。

推奨読書:

webpack を使用してリバース プロキシを設定する方法

Operation Angularjs クロスドメイン設定のホワイトリスト

以上がアドレス帳頭文字検索機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。