2010-04-09 38 views
1

您是否知道如何在iGoogle上實現無限滾動小部件,如谷歌閱讀器,它會動態加載數據,滾動條被一對上下箭頭替代。在iGoogle上設計一個像google reader一樣的無限滾動小部件

我有一個HTML的結構是這樣的:

<div id="note_column"> 
    <ul class="messages"> 
     <li class="note"> 
      .... 
     </li> 
     . 
     . 
     . 
    </ul> 
</div> 

我試圖讓這個div內無限期滾動的工作,做這樣的事情:

$(".messages).wrap("<div id='scrollbox'></div>"); 
$("#scrollbox").css({ 
    'height': '50em', 
    'overflow': 'scroll', 
    'overflow-y': 'hidden' 
}).scroll(function() { 
    // judge if this is a scroll-to-bottom 
    // load list items if it is so 
}); 

然而:(Hidding垂直滾動但似乎禁用滾動事件處理程序。

現在最讓我困惑的是如何隱藏滾動條並保持滾動事件的處理。

請告訴我我的實施可能有什麼問題。

在此先感謝。 alt text http://img2.douban.com/view/photo/photo/public/p439408255.jpg

回答

1

嘛,有兩個方面...

1)無限滾動

這是一個基本的AJAX實現。當您檢測到最後幾個項目位於可見區域時,您發出AJAX請求以獲取下一個「n」項目以添加到列表底部。

2)用上/下箭頭替換滾動條。

這將涉及使用CSS規則「overflow:hidden;」在容器上確保沒有滾動條顯示。然後,您可以添加圖片以進行上/下,並在點擊事件中更改容器的滾動位置。

如果您遇到困難,請隨時展示您已得到多少/您卡住了什麼。如果你只是想讓某人爲你寫信,我將不得不收取費用! (或者確實是開源的工作 - 正如我在這裏所做的...)

http://plugins.jquery.com/project/infinitescroller

相關問題