当前位置：移动技术网 > IT编程>开发语言>JavaScript > jQuery实现带右侧索引功能的通讯录示例【附源码下载】

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

2018年04月25日 | 移动技术网IT编程 | 我要评论

win8如何升级win10,热奇网,龙版合击pk009

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

最终效果：

ps：这里再为大家推荐一款关于排序的演示工具供大家参考：

在线动画演示插入/选择/冒泡/归并/希尔/快速排序算法过程工具：

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery表格(table)操作技巧汇总》、《jquery操作json数据技巧汇总》、《jquery form操作技巧汇总》、《jquery常用插件及用法总结》、《jquery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jquery程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

微信小程序开发打开另一个小程序的实现方法

微信小程序打开另一个小程序，有两种方法：1.超链接；2.点击按钮。全局配置：跳转到其他小程序，需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下：ap... [阅读全文]
Javascript实现简易天数计算器

本文实例为大家分享了javascript实现简易天数计算器的具体代码，供大家参考，具体内容如下效果图：功能：1. 支持选择日期； 2. 自动计算闰年； 3. ... [阅读全文]
怎么理解wx.navigateTo的events参数使用详情

遇到一个这样的业务需求, 用户点击提现按钮, 跳转到提现处理结果页面, 为了避免提现请求被重复提交, 所以需要在用户点击了提交按钮以后就把按钮锁起来不给用户提交... [阅读全文]
微信小程序手动添加收货地址省市区联动

本文实例为大家分享了微信小程序手动添加收货地址省市区联动的具体代码，供大家参考，具体内容如下先看效果图html部分用小程序的piceker-view 嵌入页面的... [阅读全文]
微信jssdk踩坑之签名错误invalid signature

最近做公众号网页开发，使用微信 jssdk 页面签名时 ios 中一直报错，这才刚开始就被这只拦路虎拦住了，报错如下：然而 android 和开发者工具中好得很... [阅读全文]
基于js实现数组相邻元素上移下移

实现效果：即需要实现当前元素与相邻元素交换位置，当上移时，则是当前元素与上一元素调换位置；当下移时，则是当前元素与下一元素调换位置。实现代码：js://点击上移... [阅读全文]
JS使用for in有序获取对象数据

需要遍历对象，将key value分为两个数组，可以使用forin，但是获取到的对象中的属性及属性值排列是无序的，目的是要按顺序取出对象中的key和value值... [阅读全文]
单线程JavaScript实现异步过程详解

前两天硬着头皮在部门内部做了一次技术分享，主题如题。索性整理成文章留个纪念！要了解异步实现，首先我们得先了解：同步 & 异步同步：会逐行执行代码，会对后... [阅读全文]
JS加载解析Markdown文档过程详解

网上有很多网站会通过.md文档来做页面内容，很好奇，这是怎么做的？出于好奇，建了一个test.md文件：# hello world! asdfa asd *斜体... [阅读全文]
基于JS实现table导出Excel并保留样式

浏览器环境：谷歌浏览器1.在导出excel的时候，保存table的样式，有2种方法，①是在table的行内写style样式，②是在模板里面添加样式2.第一种方式... [阅读全文]

网友评论


验证码：

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

2018年04月25日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论