本文实例讲述了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" > </div> <div class="num_name">张三</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">李四</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">王五</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">刘六</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">马七</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">黄八</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">莫九</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">陈十</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">a九</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">1十</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">黄八</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">今天</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">突然</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">梵蒂冈</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">快乐的</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">撒地方</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">官方</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">哦</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </div> <div class="num_name">分割</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="./img/img.png" > </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>
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文名称:jQuery实现带右侧索引功能的通讯录示例【附源码下载】-创新互联
本文地址:https://www.cdcxhl.com/article0/ceeioo.html
成都网站建设公司_创新互联,为您提供虚拟主机、电子商务、小程序开发、用户体验、企业建站、网站设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联