水平滾動日曆

我已經使用以下腳本 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）滾動是有點噁心。它有時會跳到很遠的地方，而且我還沒有能夠獲得更流暢的動畫。如果您在左側輸入滾動區域，則需要進行巨大的跳轉，因爲它使用窗口偏移作爲滾動距離的定義。我認爲，如果它只在用戶滾動左/右時動畫會好得多，但我一直無法得到。我試圖限制滾動的距離，但我沒有得到整個日曆。

真的，我在找什麼是最好的方式來啓用這樣的事情。

我應該說，日曆的使用真的是選擇幾周，而不是單獨的幾天，這使得這種格式再次更容易，因爲我可以在視覺上交替周以創建可見的分組。

來源

2010-01-10 pedalpete

我看到薄荷簡短的演示。com，看起來他們有一個水平滑動的日曆，我知道他們使用jQuery。不幸的是，從加拿大，我無法登錄到我可以看到他們的日曆工作:(但我認爲這就是我正在尋找的點有人可以評論嗎？ – pedalpete 2010-01-14 21:22:02

我' m對你的日曆感興趣，你提供的鏈接不再活躍，有沒有辦法看到它？Cheers。 – 2011-05-05 11:38:51

我會盡量給你沒有真正的代碼的一些想法，因爲我只記錄了第二:)

1，你可以存儲你的數據範圍內的一個或兩個變量，例如var startYear = 2009;，然後隱藏所有這些日期繪製的年份（我希望你明白：D）添加一個絕對div來顯示當前年份，您將在每次鼠標移動時重新計算。

如果您知道，在時間軸上有三年時間，並且您知道offsetLeft（示例）在範圍內（0;時間線div寬度的1/3），則比您知道的那個年份該用戶正在查看的是最低並能與借鑑的東西像$('year-in-view').html('<b>'+startYear+'</b>');

2，你可以存儲以前的位置（再一次:)）某些變量，並檢查X軸差大於100像素（或200像素更大的...你選擇），如果是（abs(current.x-last.x) > 100），則以不同的方式對div進行動畫製作，這樣用戶就會明白他移動了兩年。

希望它能幫助，亞當

來源

2010-01-16 15:08:06

感謝adam，我昨天剛剛重寫了整個東西，現在它更像循環插件。滾動的一年，我有點通過做$（visibleYear）.offset.left- $ vsibleYear.width和其他一些瘋狂的數學，但它開始看起來非常醜陋，我決定重複一年，我做到了這一點昨晚，這裏有一個鏈接，我結束了（仍然在造型） http://zifimusic.com/testing/horizontalCalendar.html – pedalpete 2010-01-16 22:42:34

現在看起來不錯:)雖然，它讓我困惑了一秒鐘爲什麼我整年滾動，直到我意識到這是每個月的旁邊繪製的一年:) – 2010-01-17 09:26:39

水平滾動日曆

回答

相關問題