日韩专区在线观,久久国产综合久久精品,在线免费观看一区

用DevExpress ASP.NET實(shí)現(xiàn)鼠標(biāo)滾動(dòng)自動(dòng)加載內(nèi)容（無(wú)限分頁(yè)）

原創(chuàng)|其它|編輯：郝浩|2012-05-09 21:16:30.000|閱讀 704 次

概述：現(xiàn)在大數(shù)據(jù)集在網(wǎng)絡(luò)上隨處可見(jiàn)，您可以用以下DevExpress ASP.NET控件實(shí)現(xiàn)無(wú)限分頁(yè)，實(shí)現(xiàn)鼠標(biāo)滾動(dòng)自動(dòng)加載內(nèi)容，這樣網(wǎng)站性能更高，網(wǎng)站訪問(wèn)更加流暢。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷售中 >>

先看一下最終效果：

無(wú)限分頁(yè) - 用DevExpress ASP.NET實(shí)現(xiàn)鼠標(biāo)滾動(dòng)自動(dòng)加載內(nèi)容

使用實(shí)現(xiàn)上圖效果的方法

您可以用以下控件實(shí)現(xiàn)上圖中的效果：

ASPxCallback
ASPxLoadingPanel
ASPxPanel
ASPxClientUtils對(duì)象中的JavaScript方法

你可以到查看代碼：

下面讓我們看看"無(wú)限分頁(yè)"方案能給我們帶來(lái)的好處和一些可能會(huì)遇到的問(wèn)題。

大型數(shù)據(jù)集

現(xiàn)在大數(shù)據(jù)集在網(wǎng)絡(luò)上隨處可見(jiàn)，一旦用戶需要處理這些一T或更多的信息時(shí)，你該怎么辦呢？你可以將它們分成小塊的數(shù)據(jù)分頁(yè)：

無(wú)限分頁(yè) - 用DevExpress ASP.NET實(shí)現(xiàn)鼠標(biāo)滾動(dòng)自動(dòng)加載內(nèi)容

無(wú)限分頁(yè)或無(wú)限滾動(dòng)

無(wú)限分頁(yè) (或無(wú)限滾動(dòng))被許多公司使用，如Facebook、Bing、騰訊、新浪、twitter等。

當(dāng)一個(gè)頁(yè)面有大量?jī)?nèi)容提交時(shí)，無(wú)限分頁(yè)是一個(gè)不錯(cuò)的選擇。一些不需要顯示的數(shù)據(jù)內(nèi)容沒(méi)有必要一次性加載和顯示，當(dāng)用戶鼠標(biāo)向下滾動(dòng)時(shí)，再自動(dòng)加載更多的數(shù)據(jù)。（像上面的gif動(dòng)畫(huà)顯示的那樣）

為什么用無(wú)限分頁(yè)？

我建議這種做法，原因有兩個(gè)：

性能 - 當(dāng)你沒(méi)有一次性加載數(shù)千行和數(shù)百列數(shù)據(jù)時(shí)，你的網(wǎng)站速度會(huì)更快。
流暢 - 最終用戶可以使用AJAX無(wú)縫加載更多信息繼續(xù)他們的體驗(yàn)。

Jeff Atwood有一個(gè)夢(mèng)幻般的博客文章，標(biāo)題為"分頁(yè)的結(jié)束"。我從里面截取了一小段：

在完美世界里，每一個(gè)搜索結(jié)果都在一個(gè)頁(yè)面，只有一條記錄并且就是你正想找的。

分頁(yè)也是阻力。

我的意思不是說(shuō)所有的分頁(yè)都應(yīng)當(dāng)被無(wú)限分頁(yè)代替，但是我們作為軟件開(kāi)發(fā)者，應(yīng)當(dāng)避免產(chǎn)生成千上萬(wàn)的列表和分頁(yè)，這無(wú)疑增大了用戶的負(fù)擔(dān)。記住，我們發(fā)明計(jì)算機(jī)是為了使人們的生活更容易，而不是更困難。

Google研究證實(shí)最終用戶通常不喜歡看到所有的數(shù)據(jù)：

用戶測(cè)試報(bào)告告訴我們搜索者更喜歡整頁(yè)瀏覽、單頁(yè)內(nèi)容的版式，而不是只包含部分內(nèi)容和許多分頁(yè)符的頁(yè)面。

有趣的是，用戶不喜歡整頁(yè)瀏覽花長(zhǎng)時(shí)間加載（例如，當(dāng)整頁(yè)瀏覽加載需要一些時(shí)間時(shí)，用戶認(rèn)為它包含許多圖像）。這是有道理的，因?yàn)槲覀冎?，用戶?duì)緩慢不太滿意。所以，整頁(yè)瀏覽通常先加載需要顯示的部分。作為一個(gè)站長(zhǎng)，重要的是要平衡這種偏好頁(yè)面的加載時(shí)間和整體用戶體驗(yàn)。

無(wú)限滾動(dòng)也有一些缺點(diǎn)，比如滾動(dòng)條的問(wèn)題，深層鏈接，后退按鈕的位置，以及其他Jeff的文章（）中提到的問(wèn)題。

實(shí)驗(yàn)，重復(fù)，實(shí)驗(yàn)...

重復(fù)和測(cè)試各種可用性方案是良好用戶界面的關(guān)鍵。我建議你使用DevExpress ASPxCallBack，ASPxLoadingPanel等嘗試無(wú)限分頁(yè)。無(wú)限分頁(yè)的功能包含在ASPxGridView中：

你應(yīng)該努力使分頁(yè)無(wú)關(guān)高于一切，因?yàn)橛脩粲肋h(yuǎn)只會(huì)看到他們需要的那一條內(nèi)容。 -Jeff Atwood

示例代碼

示例代碼中心的操作流程如下：

渲染后，當(dāng)用戶鼠標(biāo)向下滾動(dòng)頁(yè)面，我們就處理瀏覽器"滾動(dòng)"事件。
當(dāng)滾動(dòng)到頁(yè)面的底部，我們產(chǎn)生一個(gè)回調(diào)（使用ASPxCallback），從服務(wù)器獲得新的數(shù)據(jù)部分。
然后，我們將已收到的內(nèi)容添加到dataContainerElement DIV元素的后面。

出處：

（慧都控件網(wǎng)版權(quán)所有，轉(zhuǎn)載請(qǐng)注明出處，否則追究法律責(zé)任）

標(biāo)簽：HTML5 ASP.NET

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：

上一篇：Skelta BPM.NET如何通過(guò)表達(dá)式編輯器設(shè)置activity優(yōu)先級(jí) 下一篇：甘特圖在SAP Business One中的應(yīng)用