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