jQuery實現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】
更新時間：2018年04月17日 10:53:12 作者：包子源
這篇文章主要介紹了jQuery實現(xiàn)帶右側(cè)索引功能的通訊錄,結(jié)合實例形式分析了jQuery針對頁面元素動態(tài)遍歷、排序等相關(guān)操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)帶右側(cè)索引功能的通訊錄。分享給大家供大家參考，具體如下：
通過jquery.charfirst.pinyin.js實現(xiàn)點擊字母自動定位。實現(xiàn)動態(tài)加載通訊錄數(shù)據(jù)。
完整實例代碼點擊此處本站下載。
主要代碼如下：
<!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) {//添加首字母標(biāo)簽
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++) {//插入到對應(yīng)的首字母后面
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：這里再為大家推薦一款關(guān)于排序的演示工具供大家參考：
在線動畫演示插入/選擇/冒泡/歸并/希爾/快速排序算法過程工具：
http://tools.jb51.net/aideddesign/paixu_ys
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery實現(xiàn)的產(chǎn)品自動360度旋轉(zhuǎn)展示特效源碼分享
這篇文章主要展示了jQuery實現(xiàn)的產(chǎn)品自動360度旋轉(zhuǎn)展示特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
getJSON調(diào)用后臺json數(shù)據(jù)時函數(shù)被調(diào)用兩次的原因猜想
近期在做前端開發(fā)時候使用到getJSON調(diào)用后臺json數(shù)據(jù)，發(fā)現(xiàn)后臺的函數(shù)被調(diào)用兩次，函數(shù)名稱為getMessages，下面是本人的一些猜想，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)消息彈出框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
對直接的DOM操作進(jìn)行限制2009-05-05
這個是上次在博客園看到的一篇文章，經(jīng)測試，確實比jquery的$(document).ready(function(){....})更快，并且在ie和火狐等主流瀏覽器上都沒問題2010-04-04
jquery 設(shè)置元素相對于另一個元素的top值(實例代碼)
在jquery中offset().top是相對于body來說的，另外在設(shè)置top值的時候要找到與該元素最近的有相對值的元素2013-11-11
這篇文章主要為大家詳細(xì)介紹了基于jQuery ligerUI實現(xiàn)分頁樣式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
jquery實現(xiàn)ajax提交表單信息的簡單方法(推薦)
下面小編就為大家?guī)硪黄猨query實現(xiàn)ajax提交表單信息的簡單方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了Jquery中Event對象屬性的操作方法的總結(jié)，非常的詳細(xì)，是篇十分不錯的文章，這里推薦給大家。2015-02-02
通過 jQuery，您可以在元素上創(chuàng)建滑動效果，jQuery slideDown() 方法用于向下滑動元素，下為大家介紹下其參數(shù)含義2014-01-01