Facebook在設計上,如果使用者要看更多的留言,

是採取往下增加的方式

既不會開啟新的頁面,更不會直接蓋掉舊有的頁面

ex  

 

這是怎麼做到的?

顯然目前的網頁設計工具並不提供這種功能

依照觀察來看,是使用了遞迴演算法

在這裡就分享一下他的做法。

 

主要是使用到了DIV標籤 和 AJAX技術

利用即時抓取下一頁資訊的方式,把之前的DIV標籤內容蓋掉

 

1  

包住整個的白色大框是AJAX每次讀取的頁面,也就是第n頁
以上是起始狀態,顯示的是第0頁的畫面
按下藍色按鈕, 會用第1頁的畫面,取代橘色框部分。
(注意:第n頁都是以上那個白色框) 

 

2  
按下去藍色框之後,內容就會變多,而且是用 第1頁 取代 第0頁的橘色框
而因為第n頁都有藍色框,不用擔心取代之後藍色框會不見。
如果再繼續按這次的藍色框 又會得到下圖 

 

 3    
這次,是用 第2頁 取代 第1頁的橘色框,而第1頁其實是存在第0頁裡面。

 

最後,學過遞迴的都知道,遞迴一定要有停止點。

而這裡的停止點,想當然爾是沒有更多頁面可以讀取的時候,

這時只要禁止按鈕再出現即可。


創作者介紹

Frank's 資訊科技潮流站

finalfrank 發表在 痞客邦 PIXNET 留言(0) 人氣()