首页
所有分类
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实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery 实现扁平式小清新导航
Jul 07 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
PyAutoGUI(1) XDM(3) 验证表达式(1) 继承(1) AOP(2) 百度地图(1) 构造函数(1) promise(2) redis(3) gRPC(3)
You might like
PHP 批量删除 sql语句
2009/06/05 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Python返回真假值（True or False）小技巧
2015/04/10 Python
使用Python读取大文件的方法
2018/02/11 Python
举例讲解Python常用模块
2019/03/08 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python-for循环的内部机制
2020/06/12 Python
舞会礼服和舞会鞋：PromGirl
2019/04/22 全球购物
师说教学反思
2014/02/07 职场文书
党的生日活动方案
2014/08/15 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
项目验收申请报告
2015/05/15 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
旗帜观后感
2015/06/08 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android