网站建设资讯

NEWS

网站建设资讯

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

本文实例讲述了jQuery实现带右侧索引功能的通讯录。分享给大家供大家参考,具体如下:

创新互联是一家专注于网站制作、成都网站建设与策划设计,天全网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:天全等地区。天全做网站价格咨询:18980820575

通过jquery.charfirst.pinyin.js实现点击字母自动定位。实现动态加载通讯录数据。

完整实例代码点击此处本站下载

主要代码如下:




  
  
  
  
  
  
  通讯录首字母检索
  


  
通讯录
张三
李四
王五
刘六
马七
黄八
莫九
陈十
a九
1十
黄八
今天
突然
梵蒂冈
快乐的
撒地方
官方
分割

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('
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • #
  • '); 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('
    ' + value + '
    '); }); if(num!=0){SortBox.append('
    #
    ');} for (var i =0;i

    最终效果:

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

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

    在线动画演示插入/选择/冒泡/归并/希尔/快速排序算法过程工具:
    http://tools.jb51.net/aideddesign/paixu_ys

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

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


    网站名称:jQuery实现带右侧索引功能的通讯录示例【附源码下载】
    文章起源:http://cdweb.net/article/jiccji.html