首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery实现带右侧索引功能的通讯录示例【附源码下载】

Posted in jQuery onApril 17, 2018

本文实例讲述了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;
    }
  };
}

最终效果：

jQuery实现带右侧索引功能的通讯录示例【附源码下载】

jQuery实现带右侧索引功能的通讯录示例【附源码下载】

- Author -

包子源

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 #jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 #jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 #jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 #jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 #jQuery
jQuery中复合选择器简单用法示例
Mar 31 #jQuery
jQuery中内容过滤器简单用法示例
Mar 31 #jQuery
ICF-903L(1) 原神(1) frg-100(1) 74HC4066(1) FS1016(1) BCLer(1) YB-230(1) AN-LP1(1) YAESU(1) AGC(1)
You might like
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
js 浏览器事件介绍
2012/03/30 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
Python引用传值概念与用法实例小结
2017/10/07 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
python3实现单目标粒子群算法
2019/11/14 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
区分python中的进程与线程
2020/08/13 Python
Python用户自定义异常的实现
2020/12/25 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
伦敦眼门票在线预订：London Eye
2018/05/31 全球购物
电大自我鉴定
2013/10/27 职场文书
毕业学生推荐信
2013/12/01 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js