js版iphone通讯录分组列表效果

时间：2014-09-25 23:36:08 阅读：262 评论：0 收藏：0 [点我收藏+]

标签：style blog http color io os java ar for

<!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://cdn.staticfile.org/jquery/1.11.1/jquery.js‘></script>
  
  <style type=‘text/css‘>
    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通讯录分组列表效果

标签：style blog http color io os java ar for

原文地址：http://www.cnblogs.com/zlycode/p/3993811.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行