首页
所有分类
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 extend()详解及简单实例
May 06 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery Validate格式验证功能实例代码（包括重名验证）
Jul 18 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 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
游标(1) ref(1) mixin(1) ECharts(3) ip连接(1) 临时表(1) props(1) GTID(1) 表变量(1) timestamp(1)
You might like
php数组去重的函数代码
2013/02/03 PHP
两个php日期控制类实例
2014/12/09 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
js实现随机点名
2021/01/19 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
python实现web方式logview的方法
2015/08/10 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
大数据分析用java还是Python
2020/07/06 Python
学生会竞选自荐信
2013/10/12 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
维修工先进事迹
2014/05/29 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis