快捷導(dǎo)航

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

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

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

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

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

下面開(kāi)始打造漂亮的新聞第一步：需求分析

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

我們的需求如下：

1。動(dòng)態(tài)的新聞列表（這個(gè)很簡(jiǎn)單）

2?？梢苑猪?yè)讀取新聞列表（這個(gè)也不難）

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

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

5。界面友好（這個(gè)是必須的）

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

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

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

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

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

vs2010 +access +jquery

開(kāi)發(fā)環(huán)境vs也可以使用2008sp1，因?yàn)檫@個(gè)以上的版本才對(duì)jQuery有智能提示，當(dāng)然也可以使用其他的版本，就是沒(méi)有智能提示的效果。

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

jquery：1.3.2以上版本

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