×

QQ登录

只需要一步,快速开始

html5仿手机通讯录 按字母排序及搜索功能

标签: 暂无标签

1.实现联系人字母排序,点击字母跳转显示联系人组目录;

2.实现联系搜索,动态显示符合查询的联系人;


2018032311584192.png 20180323120109797.png 源码如下
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4.   <TITLE> New Document </TITLE>
  5.   <META NAME="Generator" CONTENT="EditPlus">
  6.   <META NAME="Author" CONTENT="">
  7.   <META NAME="Keywords" CONTENT="">
  8.   <META NAME="Description" CONTENT="">
  9.   <META name="viewport"
  10.         content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  11.           <style>
  12.           * {
  13.     margin: 0;
  14.     padding: 0;
  15. }
  16.   body{
  17.           font-size:16px;
  18.   }
  19.   .header{
  20.   
  21.     position: fixed;
  22.     left: 0;
  23.     top: 0;
  24.     z-index: 99;
  25.     width: 100%;
  26.     height: 45px;
  27.     background: #21a4f4;
  28.    
  29.    
  30.   }
  31.   .header p{
  32.           margin-left:20px;
  33.           height: 45px;
  34.     line-height: 45px;
  35.     color: #fff;
  36.     font-size: 18px;
  37.     display:inline-block;
  38.   }
  39.   .header span{
  40.           color:#fff;
  41.           margin-right: 20px;
  42.     float: right;
  43.     line-height: 45px;
  44.   }
  45.   .content{
  46.           margin-top:45px;
  47.   }
  48.   .nav{
  49.   background-color: #fff;
  50.   }
  51.   .header-two{
  52.   
  53.     position: fixed;
  54.     left: 0;
  55.     top: 0;
  56.     z-index: 99;
  57.     width: 100%;
  58.     height: 45px;
  59.     background: #21a4f4;
  60.    
  61.    
  62.   }
  63.   .header-two p{
  64.           margin-left:20px;
  65.           height: 45px;
  66.     line-height: 45px;
  67.     color: #fff;
  68.     font-size: 18px;
  69.     display:inline-block;
  70.   }
  71.   .header-two span{
  72.           color:#fff;
  73.           margin-left:6px;
  74.     line-height: 45px;
  75.   }
  76.   .header-two i{
  77.           color:#fff;
  78.           margin-left: 20px;
  79.     line-height: 45px;
  80.   }
  81.   .header-two input{
  82.           border:none;
  83.          
  84.           width:80%;
  85.           background-color:transparent;
  86.   }
  87.   .sort_box-two{
  88.           display:block;
  89.   }
  90.   .input{
  91.           border-bottom: 2px #fff solid;
  92.     display: inline-block;
  93.     height: 42px;
  94.     width: calc(100% - 50px);
  95.   }
  96.   ul li{list-style: none;}
  97. a{text-decoration: none;cursor: pointer;}
  98. html{height: 100%;}
  99. a,input,img,textarea,span,div{outline: 0;-webkit-tap-highlight-color:rgba(255,0,0,0);}

  100. #letter{
  101.     width: 100px;
  102.     height: 100px;
  103.     border-radius: 5px;
  104.     font-size: 75px;
  105.     color: #555;
  106.     text-align: center;
  107.     line-height: 100px;
  108.     background: rgba(145,145,145,0.6);
  109.     position: fixed;
  110.     left: 50%;
  111.     top: 50%;
  112.     margin:-50px 0px 0px -50px;
  113.     z-index: 99;
  114.     display: none;
  115. }
  116. #letter img{
  117.     width: 50px;
  118.     height: 50px;
  119.     float: left;
  120.     margin:25px 0px 0px 25px;
  121. }
  122. [class^="sort_box"]{
  123.     width: 100%;
  124.     padding-top: 45px;
  125.     overflow: hidden;
  126.    
  127. }
  128. [class^="sort_list"]{
  129.     padding:10px 60px 10px 80px;
  130.     position: relative;
  131.     line-height: 50px;
  132.     border-bottom:1px solid #ddd;
  133. }

  134. [class^="sort_list"] .num_logo{
  135.     width: 50px;
  136.     height: 50px;
  137.     border-radius: 10px;
  138.     overflow: hidden;
  139.     position: absolute;
  140.     left: 20px;
  141. }
  142. [class^="sort_list"] .num_logo img{
  143.     width: 50px;
  144.     height: 50px;
  145. }
  146. [class^="sort_list"] .num_name{
  147.     color: #000;
  148. }

  149. .sort_letter{
  150.     height: 30px;
  151.     line-height: 30px;
  152.     padding-left: 20px;
  153.     color:#787878;
  154.     font-size: 14px;
  155.     border-bottom:1px solid #ddd;
  156. }
  157. .initials{
  158.     position: fixed;
  159.     top: 47px;
  160.     right: 0px;
  161.     height: 100%;
  162.     width: 15px;
  163.     padding-right: 10px;
  164.     text-align: center;
  165.     font-size: 12px;
  166.     z-index: 99;
  167.     background: rgba(145,145,145,0);
  168. }
  169. .initials li img{
  170.     width: 14px;
  171. }
  172.   </style>
  173.   <!-- Fonts -->
  174. <link
  175.         href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400'
  176.         rel='stylesheet' type='text/css'>
  177. <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900'
  178.         rel='stylesheet' type='text/css'>
  179. <!-- CSS Libs -->
  180. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  181. <link rel="stylesheet" type="text/css"
  182.         href="css/bootstrap-switch.min.css">

  183.         <script src="js/jquery.1.9.1.min.js"></script>
  184.         <script type="text/javascript" src="js/jquery.charfirst.pinyin.js"></script>
  185.         <script type="text/javascript" src="js/circle.js"></script>

  186. </HEAD>

  187. <BODY>
  188.         <div class="header-two">
  189.            <div>
  190.                   <i class="glyphicon glyphicon-chevron-left" οnclick="back()"><a href="javascript:back()"></a> </i>
  191.                         <div class="input">
  192.                                 <span class="glyphicon glyphicon-search"></span>
  193.                                 <input id="search" type="text" />
  194.                         </div>
  195.                 </div>
  196.           </div>
  197.          
  198.           <div class="header">
  199.            <div>
  200.                   <p>通讯录</p>
  201.                   <span class="glyphicon glyphicon-plus"></span>
  202.                   <span id="gosearch" class="glyphicon glyphicon-search"></span>
  203.           </div>
  204.           </div>
  205.           <div id="letter" ></div>
  206.           <div class="sort_box-two">
  207.                
  208.         </div>
  209.         <div class="sort_box">
  210.                 <div class="sort_list">
  211.                         <div class="num_logo">
  212.                                 <img src="images/avator.png" alt="">
  213.                         </div>
  214.                         <div class="num_name">张三</div>
  215.                 </div>
  216.                 <div class="sort_list">
  217.                         <div class="num_logo">
  218.                                 <img src="images/avator.png" alt="">
  219.                         </div>
  220.                         <div class="num_name">李四</div>
  221.                 </div>
  222.                 <div class="sort_list">
  223.                         <div class="num_logo">
  224.                                 <img src="images/avator.png" alt="">
  225.                         </div>
  226.                         <div class="num_name">王五</div>
  227.                 </div>
  228.                 <div class="sort_list">
  229.                         <div class="num_logo">
  230.                                 <img src="images/avator.png" alt="">
  231.                         </div>
  232.                         <div class="num_name">刘六</div>
  233.                 </div>
  234.                 <div class="sort_list">
  235.                         <div class="num_logo">
  236.                                 <img src="images/avator.png" alt="">
  237.                         </div>
  238.                         <div class="num_name">马七</div>
  239.                 </div>
  240.                 <div class="sort_list">
  241.                         <div class="num_logo">
  242.                                 <img src="images/avator.png" alt="">
  243.                         </div>
  244.                         <div class="num_name">黄八</div>
  245.                 </div>
  246.                 <div class="sort_list">
  247.                         <div class="num_logo">
  248.                                 <img src="images/avator.png" alt="">
  249.                         </div>
  250.                         <div class="num_name">莫九</div>
  251.                 </div>
  252.                 <div class="sort_list">
  253.                         <div class="num_logo">
  254.                                 <img src="images/avator.png" alt="">
  255.                         </div>
  256.                         <div class="num_name">陈十</div>
  257.                 </div>
  258.                 <div class="sort_list">
  259.                         <div class="num_logo">
  260.                                 <img src="images/avator.png" alt="">
  261.                         </div>
  262.                         <div class="num_name">陈十</div>
  263.                 </div><div class="sort_list">
  264.                         <div class="num_logo">
  265.                                 <img src="images/avator.png" alt="">
  266.                         </div>
  267.                         <div class="num_name">陈十</div>
  268.                 </div>
  269.                 <div class="sort_list">
  270.                         <div class="num_logo">
  271.                                 <img src="images/avator.png" alt="">
  272.                         </div>
  273.                         <div class="num_name">a九</div>
  274.                 </div>
  275.                 <div class="sort_list">
  276.                         <div class="num_logo">
  277.                                 <img src="images/avator.png" alt="">
  278.                         </div>
  279.                         <div class="num_name">1十</div>
  280.                 </div>
  281.         </div>
  282.         <div class="initials">
  283.                 <ul>
  284.                 </ul>
  285.         </div>
  286. </BODY>
  287. </HTML>
复制代码



彭总

写了 3 篇文章,拥有财富 1939,被 0 人关注

转播转播 踩
回复 送花

使用道具

您需要登录后才可以回帖 登录 | 立即注册
B Color Link Quote Code Smilies

成为第一个吐槽的人

返回顶部