JQuery仿IPhone通讯录源码

最新推荐文章于 2021-06-04 01:02:33 发布

weixin_33709364

最新推荐文章于 2021-06-04 01:02:33 发布

阅读量261

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/lktec/archive/2013/05/29/3106443.html

版权

JQuery仿IPhone通讯录源码，效果如图
下面是页面代码，全选后保存为网页
  1 <html xmlns="http://www.w3.org/1999/xhtml">
  2 <head>
  3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
  5     <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
  6     <style type="text/css">
  7         html { height: 100%; }
  8         body { padding: 0; margin: 0; height: 100%; }
  9         .contactList { height: 100%; overflow: scroll; }
 10         .contactCategory { right: 0; top: 0; position: fixed; z-index: 2; }
 11         .contactCategory ul { border: 1px solid blue; }
 12         .contactCategory ul li { padding: 1px 9px; background: white; }
 13         .contactCategory ul li.cur { background: blue; }
 14         .contactCategory ul li.cur a { color: white; }
 15         article { position: relative; padding-top: 30px; }
 16         article header { line-height: 30px; height: 30px; top: 0; z-index: 1; position: absolute; background: blue; width: 100%; }
 17         article.fixed header { position: fixed; }
 18         ul, li, p { padding: 0; margin: 0; list-style: none; font-size: 1em; }
 19         a { text-decoration: none; }
 20     </style>
 21     <title>JQuery仿IPhone通讯录源码</title>
 22 </head>
 23 <body>
 24     <div class="contactList">
 25         <article>
 26             <header>C</header>
 27             <ul>
 28                 <li>
 29                     <h3><a href="#">页面</a></h3>
 30                     <p>Lorem ipsum</p>
 31                 </li>
 32                 <li>
 33                     <h3><a href="#">页面</a></h3>
 34                     <p>Lorem ipsum</p>
 35                 </li>
 36                 <li>
 37                     <h3><a href="#">页面</a></h3>
 38                     <p>Lorem ipsum</p>
 39                 </li>
 40                 <li>
 41                     <h3><a href="#">页面</a></h3>
 42                     <p>Lorem ipsum</p>
 43                 </li>
 44                 <li>
 45                     <h3><a href="#">页面</a></h3>
 46                     <p>Lorem ipsum</p>
 47                 </li>
 48             </ul>
 49         </article>
 50         <article>
 51             <header>D</header>
 52             <ul>
 53                 <li>
 54                     <h3><a href="#">页面</a></h3>
 55                     <p>Lorem ipsum</p>
 56                 </li>
 57                 <li>
 58                     <h3><a href="#">页面</a></h3>
 59                     <p>Lorem ipsum</p>
 60                 </li>
 61                 <li>
 62                     <h3><a href="#">页面</a></h3>
 63                     <p>Lorem ipsum</p>
 64                 </li>
 65                 <li>
 66                     <h3><a href="#">页面</a></h3>
 67                     <p>Lorem ipsum</p>
 68                 </li>
 69                 <li>
 70                     <h3><a href="#">页面</a></h3>
 71                     <p>Lorem ipsum</p>
 72                 </li>
 73             </ul>
 74         </article>
 75         <article>
 76             <header>F</header>
 77             <ul>
 78                 <li>
 79                     <h3><a href="#">页面</a></h3>
 80                     <p>Lorem ipsum</p>
 81                 </li>
 82                 <li>
 83                     <h3><a href="#">页面</a></h3>
 84                     <p>Lorem ipsum</p>
 85                 </li>
 86                 <li>
 87                     <h3><a href="#">页面</a></h3>
 88                     <p>Lorem ipsum</p>
 89                 </li>
 90                 <li>
 91                     <h3><a href="#">页面</a></h3>
 92                     <p>Lorem ipsum</p>
 93                 </li>
 94                 <li>
 95                     <h3><a href="#">页面</a></h3>
 96                     <p>Lorem ipsum</p>
 97                 </li>
 98             </ul>
 99         </article>
100     </div>
101     <div class="contactCategory"></div>
102     <script>
103         $(".contactList").bind("touchmove scroll resize", function () {
104             var ttop = $(window).scrollTop();
105             $("article").each(function (i, e) {
106                 var _top = $(e).offset().top;
107                 var _height = $(e).outerHeight();
108                 $(e).toggleClass("fixed", _top <= ttop && _top + _height - 1 > ttop);
109                 if (_top <= ttop && _top + _height - 1 > ttop) {
110                     var $chr = $("header", this).text();
111                     $(".contactCategory li").removeClass("cur");
112                     $(".contactCategory li:contains(" + $chr + ")").addClass("cur");
113                 }
114             });
115         })
116         var ul = $("<ul></ul>").appendTo(".contactCategory");
117         var codes = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
118         for (var x in codes) {
119             var li = $("<li></li>").appendTo(ul).bind("click mouseenter", function () {
120                 $t = $(this).text();
121                 var $tt = -1;
122                 $(".contactList header").each(function () {
123                     if ($(this).text() <= $t) $tt = $(this).offset().top + $('.contactList').scrollTop();
124                 });
125                 $tt > -1 && $('.contactList').stop().animate({ scrollTop: $tt }, 'show');
126             });
127             $('<a href="javascript:void(0)"></a>').text(codes[x]).appendTo(li);
128         }
129     </script>
130 </body>
131 </html>
132

转载于:https://www.cnblogs.com/lktec/archive/2013/05/29/3106443.html

weixin_33709364

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery仿IPhone通讯录源码

JQuery仿IPhone通讯录源码，效果如图下面是页面代码，全选后保存为网页 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...
复制链接

扫一扫