在jQuery中模拟iPhone联系人列表标题样式

我有一个系统警报列表，其日期和时间与它们相关联。日期仅在日期有变时显示。我想要的是最高的日期是在#shell的顶部，直到另一个替代它。这与联系人应用在iPhone上的工作方式非常相似。在jQuery中模拟iPhone联系人列表标题样式

我有setup a jsFiddle，它有一切在它栏中必要的jQuery代码。如果有人能够帮助我，我会非常感激 - 我目前不知道从哪里开始！

片段HTML的：

<div id="shell"> 
    <div id="alertList"> 
     <div id="alert_0" class="alert"> 
      <span class="date">22 Nov, 2012</span> 
      <span class="time">02:28</span> 
      System alert happened 
     </div> 
    </div> 
</div>

jQuery代码

$("#shell").scroll(function() { 
    //This is where the code would be to lock (or alter the margin-top) of the 
    //date would be in order to keep it locked to the top 
});

来源

2012-11-23 Chris

您需要的代码是用于在插入警报后移动日期？ – Diego

我知道我需要订阅“滚动”功能，但字面上不知道下一步该怎么做 – Chris

我没有关注你。你希望第一个日期保持在shell的顶部，而不是因为滚动而隐藏“上方”？ – Diego

晚，但肯定的是：jsfiddle

$("#shell").scroll(function() { 
    // 21 is because of border and padding. 
    var firstVisible = parseInt($("#shell").scrollTop()/($("#shell .alert:first").height() + 21)), 
     firstVisibleElem = $("#shell .alert:eq(" + firstVisible + ")"), 
     date = firstVisibleElem.data("date"); 

    if (date != undefined && date != null && date > -1) 
     $("#date_" + date).prependTo(firstVisibleElem); 
}); 

// Save the date corresponding to each alert: 
var i = -1; 
$("#shell .alert").each(function() { 
    var date = $(this).find(".date"); 
    if (date.length > 0) { 
     i++; 
     date.attr("id", "date_" + i); 
    } 
    if (i > -1) { 
     $(this).data("date", i); 
    } 
});

来源

2012-11-23 13:19:08 Diego

@Chris时始终显示当前日期，您还可以使用firstVisible播放一下，而不是截断，并使其看起来更好一点。 – Diego

试试这个代码...它仍然需要一些工作和重构，但我希望你能得到ideea。（以下是jsFiddle的链接）

var currentElemIndex = 0; 
var currentElem = $('#alertList .date:eq(' + currentElemIndex + ')'); 
var currentElemMarginTop = parseInt(currentElem.css('margin-top')); 
var currentElemHeight = currentElem.outerHeight(); 
var currentElemPosTop = currentElem.position().top; 
var nextElem = $('#alertList .date:eq(' + currentElemIndex+1 + ')'); 
$('#shell').scroll(function (ev) { 
    var scrollTop = $('#shell').scrollTop(); 
    if (scrollTop >= nextElem.position().top - currentElemHeight) { 
     currentElemIndex++; 
     currentElem.css('margin-top', currentElemMarginTop + 'px'); 
     currentElem = nextElem; 
     currentElemMarginTop = parseInt(currentElem.css('margin-top')); 
     currentElemHeight = currentElem.outerHeight(); 
     currentElemPosTop = currentElem.position().top; 
     nextElem = $('#alertList .date:eq(' + currentElemIndex + ')'); 
    } 
    if (scrollTop > currentElem.position().top) { 
     currentElem.css('margin-top', $('#shell').scrollTop() - currentElem.position().top + 'px'); 
    } 
    if (scrollTop < currentElemPosTop) { 
     nextElem = currentElem; 
     currentElemIndex--; 
     currentElem = $('#alertList .date:eq(' + currentElemIndex + ')'); 
    } 
});

来源

2012-11-23 13:19:35

在jQuery中模拟iPhone联系人列表标题样式

回答

相关问题