首页 > 代码库 > js版iphone通讯录分组列表效果
js版iphone通讯录分组列表效果
<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>groupList demo</title> <script type=‘text/javascript‘ src=http://www.mamicode.com/‘http://cdn.staticfile.org/jquery/1.11.1/jquery.js‘></script>"color: #000000;"> dl dt{background:#ccc;padding:5px;} dl li{padding:5px;list-style: none;} p{height:100px;} html,body{margin:0;padding:0;} </style> <script type=‘text/javascript‘>//<![CDATA[ $(function(){ //$(‘dl‘).groupList(); //相对窗口顶部 $(‘dl‘).groupList(true);});$.fn.groupList = function(selfScroll){ var list = this; var listTopOffset = list.offset().top; var titleHeight = $(list).find(‘dt:first‘).height(); var currentContext = selfScroll ? list : window; if(selfScroll){ list.css({ ‘height‘:$(window).height() - listTopOffset, ‘overflow‘:‘auto‘ }); } $(currentContext).on(‘scroll‘,function(){ if($(currentContext).scrollTop()-(selfScroll ? 0 : listTopOffset) < titleHeight){ clearFixed(); }else{ var lis = list.find(‘li‘); for(var i = 0, len = lis.length ; i < len ; i++){ if(isOnSight(lis[i])){ clearFixed().filter(‘.clone‘).remove(); lis.eq(i).parent().parent().prev().clone(true).addClass(‘clone‘).css({ ‘top‘: selfScroll ? listTopOffset : 0, ‘position‘:‘fixed‘, ‘width‘:‘100%‘ }).appendTo(list); break; } } } }); var isOnSight = function(item){ return selfScroll ? listTopOffset < $(item).offset().top + $(item).outerHeight() : $(currentContext).scrollTop() < $(item).offset().top + $(item).outerHeight(); } var clearFixed = function(){ return $(list).find(‘dt‘).css({ ‘position‘:‘‘ }); }}//]]> </script></head><body> <p>ale</p> <dl> <dt>A</dt> <dd> <ul> <li>abandon</li> <li>abnormal</li> <li>abstinence</li> <li>abort</li> <li>abortive</li> <li>abeyance</li> <li>abscond</li> <li>absolve</li> <li>abrogate</li> <li>about</li> <li>abandon</li> <li>abnormal</li> <li>abstinence</li> <li>abort</li> <li>abortive</li> <li>abeyance</li> <li>abscond</li> <li>absolve</li> <li>abrogate</li> <li id=‘check‘>about</li> <li>abandon</li> <li>abnormal</li> <li>abstinence</li> <li>abort</li> <li>abortive</li> <li>abeyance</li> <li>abscond</li> <li>absolve</li> <li>abrogate</li> </ul> </dd> <dt>B</dt> <dd> <ul> <li>banana</li> <li>blue</li> <li>background</li> <li>backward</li> <li>bacon</li> <li>bacteria</li> <li>baggage</li> <li>balance</li> <li>banana</li> <li>blue</li> <li>background</li> <li>backward</li> <li>bacon</li> <li>bacteria</li> <li>baggage</li> <li>balance</li> <li>banana</li> <li>blue</li> <li>background</li> <li>backward</li> <li>bacon</li> <li>bacteria</li> <li>baggage</li> <li>balance</li> </ul> </dd> <dt>C</dt> <dd> <ul> <li>banana</li> <li>blue</li> <li>background</li> <li>backward</li> <li>bacon</li> <li>bacteria</li> <li>baggage</li> <li>balance</li> <li>banana</li> <li>blue</li> <li>background</li> <li>backward</li> <li>bacon</li> <li>bacteria</li> <li>baggage</li> <li>balance</li> <li>banana</li> <li>blue</li> <li>background</li> <li>backward</li> <li>bacon</li> <li>bacteria</li> <li>baggage</li> <li>balance</li> <li>blue</li> <li>background</li> <li>backward</li> <li>bacon</li> <li>bacteria</li> <li>baggage</li> <li>balance</li> </ul> </dd></dl> </body></html>
js版iphone通讯录分组列表效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。