一步步打造漂亮的新聞列表(無刷新分頁、內(nèi)容預(yù)覽)第一步

更新時間：2010年07月18日 22:36:08 作者：

新聞列表是信息管理系統(tǒng)中最常見的，也是最簡單的，一些簡單的新聞列表就是一個table，然后里面循環(huán)寫入數(shù)據(jù)

沒有分頁。這樣如果數(shù)據(jù)量很大時，情況就變得十分糟糕，往往打開一個網(wǎng)頁就需要很長的時候，大大的降低了的用戶的體驗效果。
而分頁的話也是很有講究的，不同的數(shù)據(jù)庫往往對應(yīng)著不同的分頁方式。這里不做討論。下面我們僅以簡單的access作為數(shù)據(jù)庫來進(jìn)行新聞列表的無刷新分頁。無刷新意味著要使用ajax技術(shù)，當(dāng)然無刷新不僅僅是ajax，還有其他的方法做到無刷新，如將所有的數(shù)據(jù)一次性讀取出來，然后根據(jù)頁數(shù)的不同顯示不同的內(nèi)容，這個僅僅靠JavaScript就可以實現(xiàn)了，但是這個無疑是飲鴆止渴，和上面沒有分頁效果是一樣的，換湯不換藥，僅僅是感覺上很好而已。

要使用ajax可以自己手動寫，也可以使用框架，我比較傾向于使用jquery來寫ajax，而且vs2010對jQuery的支持是很好的。而分頁的話，jQuery已經(jīng)有現(xiàn)成的插件供我們使用。

下面開始打造漂亮的新聞第一步：需求分析

隨便在做什么的時候，一定要知道你的需求是什么，不然忙活了半天發(fā)現(xiàn)這根本不符合需求，結(jié)果白忙活一場。

我們的需求如下：

1。動態(tài)的新聞列表（這個很簡單）

2。可以分頁讀取新聞列表（這個也不難）

3?？梢詿o刷新的分頁讀取新聞列表（這個稍微有點(diǎn)難度）

4?？梢灶A(yù)覽新聞的內(nèi)容（這個也稍微有點(diǎn)難度）

5。界面友好（這個是必須的）

下面來詳細(xì)談?wù)勎覀兊男枨螅?/P>

對于1、2和5就不做說明了，網(wǎng)上可以找到大把的資料。就第三點(diǎn)和第四點(diǎn)來說明下，其實如果是懂一點(diǎn)ajax的話，這些是小兒科。

3.==》無刷新的分頁讀取新聞列表，在點(diǎn)擊下一頁的時候觸發(fā)事件，調(diào)用ajax去數(shù)據(jù)庫中查找下一頁的數(shù)據(jù)并返回，然后顯示在頁面上。

4==》預(yù)覽新聞內(nèi)容，在鼠標(biāo)移到連接上面時觸發(fā)事件，得到新聞的id并使用ajax去數(shù)據(jù)庫中查找相應(yīng)的新聞內(nèi)容，截取一部分顯示在div里面，這里有一個要注意的地方，就是如果截取的內(nèi)容里面有html標(biāo)記時要特別注意下。

ok，需求分析弄好后，開始著手做了。準(zhǔn)備如下環(huán)境：

vs2010 +access +jquery

開發(fā)環(huán)境vs也可以使用2008sp1，因為這個以上的版本才對jQuery有智能提示，當(dāng)然也可以使用其他的版本，就是沒有智能提示的效果。

access數(shù)據(jù)庫的版本為2003

jquery：1.3.2以上版本

當(dāng)然還有其他的文件需要用到，這個以后才說，先來預(yù)覽下最后的效果吧：(分頁的被預(yù)覽的部分遮住了.....)