JQueryページはスクロールバーに従って動的に効果をロードするのが簡単です。
GoogleリーダーにはAJAX scoll Loadの効果があります。つまり、プロジェクトを読む時にページをめくる必要がなく、ブラウザのスクロールバーを一定の位置まで引っ張った時に自動的に新しいプロジェクトをロードして入ってきます。データ量が頻繁に増えている場合、ページ番号を見て目標データを見つけることは意味がないようです。ユーザーが成熟したWEBアプリを体験するには、TAGや検索などの機能を使って目標データを探すように誘導しなければならないと思います。データを閲覧するには、特に最新のデータを閲覧して、ブラウザのスクロールバーを利用してロードするのはいい試みです。
この機能をjqueryで実現してみます。まずスクロールバーの総長属性値を取得します。scrollHeight、スクロールバーの現在位置属性値:scrollTop。そして、現在の値が総長の3分の2にある場合、新しいデータをロードします。DOMには、要素overflowスタイルがscrollであると仮定し、要素中のコンテンツオーバーフロー要素が高さを指定した時にスクロールバーを有効にします。jqueryのロード方法を利用して、既存のファイルを元素にロードします。テーブルと仮定します。このファイルの内容はブラウザを画面にスクロールさせるのに十分なデータテーブルであることができます。
jquery.js'//jqueryライブラリのロード
このコードの効果は元素mypageのスクロールバーの位置がスクロールバーの総長の三分の二にある場合、テーブルを追加する内容が元素mypageに行くということです。もちろんこのように運行しています。本当のAJAX運用では、table.はaspまたはphpスクリプトに変換し、getまたはpostパラメータを受信して処理し、有意なデータを返すことができます。jqueryのget方法はget方式のパラメータデータを設定できます。
たとえば:
$get("test.php"、{name:"boho",id:"1");
に相当するhttp://hostlocal/test.php?name=boho&id=1
このような形式のhttpは訪問します。そして、get方法のコールバック関数により、test.php出力の内容を取得する。
この機能をjqueryで実現してみます。まずスクロールバーの総長属性値を取得します。scrollHeight、スクロールバーの現在位置属性値:scrollTop。そして、現在の値が総長の3分の2にある場合、新しいデータをロードします。DOMには、要素overflowスタイルがscrollであると仮定し、要素中のコンテンツオーバーフロー要素が高さを指定した時にスクロールバーを有効にします。jqueryのロード方法を利用して、既存のファイルを元素にロードします。テーブルと仮定します。このファイルの内容はブラウザを画面にスクロールさせるのに十分なデータテーブルであることができます。
jquery.js'//jqueryライブラリのロード
var hght=0;//
var top=0;//
$(document).ready(function() {//DOM onload
$(”#mypage”).load(”table.html”);//table.html mypage
$(”#mypage”).scroll( function() {// 。
hght=this.scrollHeight;// , hght
top=this.scrollTop;// , top
});
});
setInterval(”cando();”,2000);// 2 cando 。
function cando(){
if(top>parseInt(hght/3)*2)// 2 /3,parseInt
show();// , show 。
}
function show(){
$.get(”table.html”, function(data){// jquery get table.html
$(”#mypage”).append(data);// append mypage 。
hght=0;// , $(”#mypage”).scroll , , ……
top=0;// 。
});
}
なぜ2秒ごとに判断を呼び出しますか?scrollイベントがトリガされるとhghtとtop値が影响しますので、この値はいつもcando関数の判断を満たすかもしれません。つまりtop値はhghtの3分の2にあります。そのため、何度もローディングするとサーバーの負担が重くなる可能性があります。一回読み込んだ後にhghtとtopの値を0にしてしまうのもこのためです。このコードの効果は元素mypageのスクロールバーの位置がスクロールバーの総長の三分の二にある場合、テーブルを追加する内容が元素mypageに行くということです。もちろんこのように運行しています。本当のAJAX運用では、table.はaspまたはphpスクリプトに変換し、getまたはpostパラメータを受信して処理し、有意なデータを返すことができます。jqueryのget方法はget方式のパラメータデータを設定できます。
たとえば:
$get("test.php"、{name:"boho",id:"1");
に相当するhttp://hostlocal/test.php?name=boho&id=1
このような形式のhttpは訪問します。そして、get方法のコールバック関数により、test.php出力の内容を取得する。
$.get(”test.php”, {name:”boho”,id:”1″},function(data){
alert(”Data Loaded: ” + data);
});
以上のJQueryページはスクロールバーの動きに従って効果をロードする簡単な実現(おすすめ)です。つまり、小編集が皆さんに共有する内容です。参考にしていただければと思います。どうぞよろしくお願いします。