طريقة العرض اللانهائية للبيانات مثل جوجل أو بينج (ar-SA)

السلام عليكم ورحمة الله وبركاته
من أكثر الأشياء التي لا أحبها حقيقة هي مفهوم الصفحات (Paging)المتعددة لعرض البيانات ولذلك كنت أبحث منذ مدة عن طريقة عرض أفضل حتى وجدت محرك البحث بينج والذي قدم مفهوم جميل جدا خاصة عند إستعراض الصورة وهي أن عدد معين من الصور يتم عرضه في الصفحة ثم إذا قم بالنزول لأسفل الشاشة بإستخدام الماوس على سبيل المثال فأن عدد أخر من الصورة يتم تحميله وكهذا حتى يتم الإنتهاء من تحميل جميع الصور .. هذا الأسلوب يعرق بإسم العرض أو التنقل اللانهائي للبيانات (Infinite Scroll) والصورة التالية من البرنامج الذي قمت بعمله والتي توضح لك هذا المفهوم

مالفائدة الذي يقدمها مفهوم ال Infinite scroll
هذا المفهوم سوف يوفر علىك وعلى زائر الموقع الكثير من الجهد . فالنسبة لك لن تضظر بعد ذلك أن تدخل في تفاصيل إنشاء صفحات وعرض عدد معين من البيانات مثل الذي يحدث في الجريد فيو. أما بالنسبة للمستخدم فأنه يوفر عليه تصفح أسهل للموقع حيث أنه لن يضطر إلى التنقل بين الصفحات في كل مرة يريد عرض البيانات فيها
من يستخدم هذا المفهوم
جميع المواقع الكبيرة مثل فيس بوك وتويتر وجوجل وبينج وانت أيضا
طريقة عمل البرنامج
طريقة عمل البرنامج بسيطة حيث تقوم بالتحقق من موضع السكرول (Scroll) الخاص بالصفحة من خلال معادلة رياضية بسيطة فأن كان السكرول في أسفل الصفحة فأنه سوف يتم تحميل المزيد من البيانات في الصفحة من خلال الإستفادة من مكتبة ال JQuery والتي تقوم بجلب البيانات من خلال الأجاكس
كود الجافا سكريبت للتوضيح

$(document).ready(function () {
var Skip = 49; //Number of skipped row
var Take = 14; //
function Load(Skip, Take) {
$('#divPostsLoader').html('<img src="ProgressBar/ajax-loader.gif">');

//send a query to server side to present new content
$.ajax({
type: "POST",
url: "Grid.aspx/LoadImages",
data: "{ Skip:" + Skip + ", Take:" + Take + " }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {

if (data != "") {
$('.thumb').append(data.d);
}
$('#divPostsLoader').empty();
}

})
};
//Larger thumbnail preview

//When scroll down, the scroller is at the bottom and fire the Load ()function
$(window).scroll(function () {

if ($(window).scrollTop() == $(document).height() - $(window).height()) {
Load(Skip, Take);

//Any number you want
Skip = Skip + 14;
}
});
});

أتمنى أن يكون هذا المقال نال إعجابكم وكم أشعر بالسعادة حقيقة لكتابة أول موضوع بالعربي في ال مايكروسوفت ويكي واتمنى إن شاء الله أن يستمر هذا الشيء بملاحظاتكم ومقترحاتكم

رابط التحميل من هنا

http://code.msdn.microsoft.com/Infinite-Scroll-Like-Bing-bc05262b