首页 / JAVASCRIPT / 通讯录首字母检索功能实现

通讯录首字母检索功能实现

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了通讯录首字母检索功能实现，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8428字，纯文字阅读大概需要13分钟。

内容图文

这次给大家带来通讯录首字母检索功能实现，通讯录首字母检索功能实现的注意事项有哪些，下面就是实战案例，一起来看一下。

主要代码如下：

<!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">
    <p class="header">
      通讯录
    </p>
  </header>
  <p id="letter" ></p>
  <p class="sort_box">
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">张三</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">李四</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">王五</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">刘六</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">马七</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">黄八</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">莫九</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">陈十</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">a九</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">1十</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">黄八</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">今天</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">突然</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">梵蒂冈</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">快乐的</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">撒地方</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">官方</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">哦</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">分割</p>
    </p>
    <p class="sort_list">
      <p class="num_logo">
        <img src="./img/img.png" alt="">
      </p>
      <p class="num_name">票</p>
    </p>
  </p>
  <p class="initials">
    <ul>
      <li><img src="./img/068.png"></li>
    </ul>
  </p>
  <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,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('<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('<p class="sort_letter" id="'+ value +'">' + value + '</p>');
  });
  if(num!=0){SortBox.append('<p class="sort_letter" id="default">#</p>');}
  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;
    }
  };
}

最终效果：

通讯录首字母检索功能实现 - 文章图片

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的通讯录首字母检索功能实现全部内容，希望文章能够帮你解决通讯录首字母检索功能实现所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/287657.html

来源：【匿名】

【上一篇】怎样操作日历范围选择插件【下一篇】javascript 怎么调用php方法

更多 ►

【通讯录首字母检索功能实现】教程文章相关的互联网学习教程文章

jQuery数据缓存功能的实现思路及简单模拟【图】

前言对于jQuery的数据缓存，相信大家都不会陌生，jQuery缓存系统不仅运用于DOM元素，动画、事件等都有用到这个缓存系统。所以在平时实际应用中, 我们经常需要给元素缓存一些数据，并且这些数据往往和DOM元素紧密相关。由于DOM元素(节点)也是对象, 所以我们可以直接扩展DOM元素的属性，但是如果给DOM元素添加自定义的属性和过多的数据可能会引起内存泄漏，所以应该要尽量避免这样做。因此更好的解决方法是使用一种低耦合的方式让D...

示例vue 的keep-alive缓存功能的实现【图】

本篇文章主要介绍了vue 的keep-alive缓存功能的实现，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组...

vue的keep-alive缓存功能的实现

本篇文章主要介绍了vue 的keep-alive缓存功能的实现，现在分享给大家，也给大家做个参考。Vue 实现组件信息的缓存当我们在开发vue的项目过程中，避免不了在路由切换到其他的component再返回后该组件数据会重新加载，处理这种情况我们就需要用到keep-alive来缓存vue的组件信息，使其不再重新加载。一、在app.vue里<keep-alive><router-view></router-view> </keep-alive>但是这种情况会对所有的组件进行缓存，不能达到单个组件缓存的...

jQuery数据缓存功能的实现思路及简单模拟_jquery【图】

vue 的keep-alive缓存功能的实现

Vue 实现组件信息的缓存当我们在开发vue的项目过程中，避免不了在路由切换到其他的component再返回后该组件数据会重新加载，处理这种情况我们就需要用到keep-alive来缓存vue的组件信息，使其不再重新加载。一、在app.vue里 <keep-alive><router-view></router-view> </keep-alive>但是这种情况会对所有的组件进行缓存，不能达到单个组件缓存的效果。那么我们给部分组件加上，实现方法如下：在app.vue <!--这里是需要keepalive的...

vue+vue-validator 表单验证功能的实现代码

官方文档：http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址：https://github.com/vuejs/vue-validator 下面给大家介绍vue+vue-validator 表单验证功能，具体代码如下所示： 1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> Zip: <input type="text" v-validate:zip="[required]"...

vue路由跳转时判断用户是否登录功能的实现

通过判断该用户是否登录过，如果没有登录则跳转到login登录路由，如果登录则正常跳转。一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录（建议用vuex）；简单用vuex表示一下，不会可以自己去官网多看看； import Vue from ‘vue‘ import Vuex from ‘vuex‘Vue.use(Vuex);var state = {isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 };const mutations = {changeLogin(state,data){state.isLogin = da...

javascript html5摇一摇功能的实现

通过网上的资料，加上自己的整理，写了一份html摇一摇功能的简介，用做技术备份。知识要点 1、DeviceMotionEvent 这是html5支持的重力感应事件，关于文档请看：http://w3c.github.io/deviceorientation/spec-source-orientation.html 事件介绍： deviceorientation 提供设备的物理方向信息，表示为一系列本地坐标系的旋角。 devicemotion 提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐...

javascript-想做一个类似于QQ的网页版聊天功能，如何实现？？【图】

制作网页版聊天工具的时候，大家通常是用什么方式来进行实时消息传递的？？我所知道的：ajax轮询（都说浪费资源，不好...） EventSource（支持不好，IE压根不支持..） WebSoket（不是很了解...）而且，百度搜索后了解到在浏览器不支持 WebSocket 的情况下，居然还有第三方库能够实现 WebSocket ，是否所谓的 WebSocket 也是如同 EventSource 一样，核心原理都是用 ajax 的轮询方式实现即时通信？？目前普遍在用的网页实时通信技...

javascript-web网站中添加百度地图导航功能，怎么实现？？【图】

现在要实现：这个功能。不知道该如何实现：导航功能。我看过百度地图的api demo 。感觉没有一个完整的解决方案的，都是零散的。有没有人能提供一个完整的实现了：自动定位当前位置（起始点）允许设置目的地（终止点）自动导航不知道该如何实现？？回复内容：现在要实现：这个功能。不知道该如何实现：导航功能。我看过百度地图的api demo 。感觉没有一个完整的解决方案的，都是零散的。有没有人能提供一个完整的实现了：...

javascript-关于新用户注册送购物券（三个月有效期）功能如何实现？

公司现在打算推出新用户新购物券的功能，现在要求是1。现在的网站购物券是没有有效期的，可以一直使用。2。购物券可以与原购物券一起使用，在顾客眼里是一样的名字。3。在有效期内，顾客看到购物券的总数（假设顾客充值100，加上送的100，那顾客帐户上看到自己的购物券是200）4。注册送的购物券三个月后过期，未使用完的清零。5。顾客其他方式得到的购物券也是无限期可用的。回复内容：公司现在打算推出新用户新购物券的功能，现在...

javascript-网易云阅读电子书翻页功能实现【图】

链接地址：http://yuedu.163.com/book_reader/bd_f442a7d259fd457c9d2a086fecb119e0_4/ledu_6000_101288_4图片显示链接的页面设计的所有功能包括阅读的百分比和翻页显示选择、字体大小设置等功能这个功能有那位大侠做过吗？有什么好到实现方案吗？回复内容：链接地址：http://yuedu.163.com/book_reader/bd_f442a7d259fd457c9d2a086fecb119e0_4/ledu_6000_101288_4图片显示链接的页面设计的所有功能包括阅读的百分比和翻页显示选...

javascript-分类信息查询的功能实现【图】

类似这类的分类信息查询的有没有一个思路推荐或者一个案例借鉴下，很急，在线等大神回复内容：类似这类的分类信息查询的有没有一个思路推荐或者一个案例借鉴下，很急，在线等大神我推荐使用4个关联表来达到最灵活有效的实现。type 表 id, nametype_attribute 表 id, type_id(关联type表的id),name,...(可以定义一些属性，比如多选，必选之类)type_attribute_option 表 id, attribute_id(关联type_attribute表的id),namere...

javascript-网页批注功能实现（要在服务端保存

如题，关于网站网页批注功能应该如何实现？（说明，不是类似对网页进行截图编辑，如果网站里的文字可以添加批注，用户批注后下次可以看到，也可以分享批注）。给个参考示例或相关内容的链接也行。网页批注的例子可以看http://collamark.com/回复内容：如题，关于网站网页批注功能应该如何实现？（说明，不是类似对网页进行截图编辑，如果网站里的文字可以添加批注，用户批注后下次可以看到，也可以分享批注）。给个参考示例或相关内...

javascript-网站文章历史版本功能实现

关于文章的历史版本，很常见的一个功能，如知乎，简书，segmentfault，都有相关的历史版本存储，这个怎么实现的，给个参考或url都行。回复内容：关于文章的历史版本，很常见的一个功能，如知乎，简书，segmentfault，都有相关的历史版本存储，这个怎么实现的，给个参考或url都行。数据库储存内容时，多一个版本号字段即可。每次更新就插入一条新记录这个东西最简单的实现方法就和楼上说的差不多，添加一个版本号。更新的时候就新建...

首页 / JAVASCRIPT / 通讯录首字母检索功能实现

通讯录首字母检索功能实现

内容导读

内容图文

内容总结

内容备注

内容手机端

【通讯录首字母检索功能实现】教程文章相关的互联网学习教程文章

功能 - 相关标签

通讯 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程