首页
所有分类
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.form.js异步提交表单详解
Apr 25 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jquery插件懒加载的示例
Oct 24 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) 代理(2) 小喇叭(1) IC-R9500(1) S-2000(1) 增删查改(1) 脏读(2) SQL注入(2) 外键(1) #{}(1)
You might like
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
建立文件交换功能的脚本（一）
2006/10/09 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
使用php计算排列组合的方法
2013/11/13 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
JavaScript 布尔操作符解析  &amp;&amp; || ！
2012/08/10 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
微信小程序（订阅消息）功能
2019/10/25 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
Python实现Linux下守护进程的编写方法
2014/08/22 Python
PyMongo安装使用笔记
2015/04/27 Python
Python实现定时任务
2017/02/08 Python
聊聊Python中的pypy
2018/01/12 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
Python中正反斜杠（‘/’和‘\’）的意义与用法
2019/08/12 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
日本运动品牌美津浓官方购物网站：MIZUNO SHOP
2016/08/21 全球购物
SQL Server 2000数据库的文件有哪些，分别进行描述。
2015/11/09 面试题
公司员工的自我评价范例
2013/11/01 职场文书
三八节主持词
2014/03/17 职场文书
文秘求职信范文
2014/04/10 职场文书
学习雷锋活动总结
2014/04/29 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
2015年维修工作总结
2015/04/25 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python
星际争霸：毕姥爷vs解冻01
2022/04/01 星际争霸