jquery - 水平滚动日历

我使用了以下脚本 http://valums.com/scroll-menu-jquery/ 构建一个水平滚动的日历。

以下是我如何实施它。

http://zifimusic.com/testing/horizontalCalendar.html

我期待的90％的日历活动是在当前日期的一个月或两个月内。但是，我认为我需要提供选择任何月份的能力。我打算使用jQuery datepicker，但认为这种格式允许用户始终看到当前选择的日期，并允许我在一个有趣但相当简单的界面中标出需要注意的几周或几天，（当样式化时）应该比正确的日历占用更少的高度。

我确定我以前见过这样的日历，但我找不到制作一个脚本。

这个日历有两个问题。 1）年份滚动页面，因此您无法看到您正在查看的年份。我添加了这一行

 var windowWidth=jQuery(window).width();
  div.mousemove(function(e){

    jQuery('li.year').each(function(){

    if(jQuery(this).offset().left>0 && jQuery(this).offset().left<windowWidth){
               jQuery('h1',this).scrollLeft(offset().left-windowWidth);

但它似乎没有达到预期的效果，让年份保持可见，并在日期滚动中有些排队。

2）滚动有点讨厌。它有时会跳得太远，而且我无法获得更流畅的动画效果。如果你进入左侧的滚动区域，它需要一个巨大的跳跃，因为它使用窗口偏移作为它应该滚动多远的定义。我认为如果它只是在用户向左/向右滚动时动画会更好，但我无法得到它。我已经尝试限制卷轴行进的距离，但是我没有得到整个日历。

我真正想要的是在这样的事情上滚动的最佳方法是什么。

我应该说日历的使用实际上是选择周，而不是单独的日子，这使得这种格式再次变得容易，因为我可以在视觉上交替周几来创建可见的分组。

我会尝试在没有实际代码的情况下给你一些想法，因为我只记录第二次：）

1.，您可以将数据范围存储在一个或两个变量中，例如： var startYear = 2009;，然后隐藏你用这些日期绘制的年份（我希望你理解：D）添加一个绝对div来显示当前年份，你将在每个鼠标移动时重新计算。

如果您知道，时间轴上有三年且您知道offsetLeft（示例）在范围内（0;时间轴div宽度的1/3），那么您知道的那一年用户正在查看的是最低，可以用$('year-in-view').html('<b>'+startYear+'</b>');

之类的东西绘制

2.，您可以在某个变量中存储先前的位置（再次:)），并检查X轴差异是否大于100px（或200px ......您的选择），如果是（abs(current.x-last.x) > 100 ），以不同的方式为div设置动画，这样用户就会明白他已经过了两年。

希望它有所帮助，亚当

水平滚动日历

1 个答案: