カプセル化されたjqueryページスクロール（サンプルコード）

HTML 構造:

コードをコピーコードは次のとおりです:

 
 ul._rollSe{幅:100px;高さ:300px;オーバーフロー:非表示} 
ul._rollSe li._rollPar{高さ:100px;ボーダー:1px ソリッド #369} 

コードをコピーしますコードは次のとおりです。

🎜>

前のページ
 次のページ ;/div> class="_rollPar"

JS インポートファイル:

著者 : テレサ 2011-3-28
params: 上記 HTML 構造の必須項目: 関連クラス

_rollParent: イベントをトリガーした上位層)

_rollSe: スクロール領域

_rollPar: スクロール要素

_scrollNext: 次のページボタン

_scrollPrev: 前ページボタン

_rollPageSe: ページング領域

_rollpage: ページ番号要素

data-frequency: スクロール頻度 (例: 一度に 3 つの要素をスクロール) -> イベントをトリガーするボタンにマークを付ける必要があります。

data-pr: Cookie プレフィックス。

説明: 一度に複数のデータを読み取り、数個だけを表示し、ページをスクロールします (一度に 3 個または n 個のデータをスクロールします)。このメソッドでは、HTML 要素に必要なイベントスクロール効果をマークするだけで済みます。上記で指定されたクラスで利用可能です。

JS 初期化メソッド:

コードをコピー

コードは次のとおりです:

/*************************************************** * ************************
 説明: ページスクロール
*************** ********* **************************************** ********** ********/
//プラグインの紹介
document.write('');
//関数の初期化
 $(function(){
 /*
 author: teresa 2011-03-24 14:32:42
 description: destroyTo init
 */
 //初期表示のスクロール
 _scroll.init(); 
 //上にスクロール
 $('._scrollPrev').live('click',function(){
 _scroll.prev(this);
 return false; 
 });
 //下にスクロールします
 $('._scrollNext').live('click',function(){
 _scroll.next(this);
 return false; 
 });
});
/*
 作成者: テレサ 
 更新時刻: 2011-03-24 14:52:34
 説明: ページング スクロール
 */ 
var _scroll = {
 //ローリング Cookie
 config:{
 ckname : 'lifedu_rollCur',
 ckoptions : {
 有効期限 : 3, // 日
 パス : '/'
 }
 },

 //初期化
 init:function(){
 var roll = $('._rollParent');
 for ( i=0;i {
 var cookieName = roll.eq(i).find('._scrollNext').attr('data-pr') "_lifedu_rollCur" ;
 var oStr = $.cookie(_scroll.config.ckname) || '{}'; 
 var json = eval('(' oStr ')');
 var cur = 0;
 var page = 0;
 var rollPar = roll.eq(i).find('._rollPar');
 roll.eq(i).find('._scrollPrev').addClass('disabled ') ;
 roll.eq(i).find('._rollSe').scrollTo(rollPar.eq(cur),50);
 roll.eq(i).find('._rollPageSe') .find ('_rollpage').removeClass('ac').eq(page).addClass('ac');
 //cookie
 json.cur = cur;
 json.page = page ;
 var data = JsonToStr(json);
 $.cookie(cookieName,data,_scroll.config.ckoptions);
 }
 }, 

 _p : {}, 
 //前処理
 _pre:function(o){
 _scroll.config.ckname = $(o).attr('data-pr') "_lifedu_rollCur";
 _scroll._p.rollFrequency = parseInt($(o).attr('data-frequency'));
 _scroll._p.rollSe = $(o).parents('._rollParent').find('._rollSe');スクロール領域
 _scroll._p.rollPar = _scroll._p.rollSe.find('._rollPar'); 
 _scroll._p.rlen = _scroll._p.rollPar.length;
 //ページ番号領域
 _scroll._p.rollPageSe = $(o).parents('._rollParent').find('._rollPageSe'); 
 _scroll._p.rollPageLen = _scroll._p.rollPageSe.find('._rollpage ') .length;
 },

 //下にスクロール
 next:function(o){
 _scroll._pre(o);
 var oStr = $.cookie( _scroll.config.ckname) || '{}'; 
 var json = eval('(' oStr ')');
 var last = _scroll._p.rlen - 1; _scroll. _p.rollFrequency;
 var cur = parseInt(json.cur) 0 ; //現在のスクロール要素インデックス
 var page = parseInt(json.page) || 現在のページ番号🎜> if (cur n < last){
 cur = n;
 ページ ;
 }else if(cur == last){ 
 return;
 }else{
 cur = last ; 
 page = _scroll._p.rollPageLen - 1;
 }
 //最後のページの場合 addClass 'disabled';
 $(o).parents('._rollParent'). find(' ._scrollPrev').removeClass('disabled');
 if(page == _scroll._p.rollPageLen - 1) {
 $(o).addClass('disabled');
 }else { 
 $(o).removeClass('disabled');
 }
 //scroll
 _scroll._p.rollSe.scrollTo(_scroll._p.rollPar.eq(cur), 500); 
 _scroll.goPage(page);
 //Cookie を書き込みます
 json.cur = cur;
 json.page = page;
 var data = JsonToStr(json);
 $.cookie(_scroll.config.ckname,data,_scroll.config.ckoptions);
 },

 //上にスクロール
 prev:function(o){
 / /lg ('prev');
 _scroll._pre(o);
 var oStr = $.cookie(_scroll.config.ckname) ||';  
 var json = eval('(' oStr ')');
 var cur = parseInt(json.cur) || 0 ;  //当前滚動元素インデックス
 var page = parseInt(json.page) || 0 ; //当前页码
 var n = _scroll._p.rollFrequency;

 if(cur-n > 0){
 if(cur == _scroll._p.rlen - 1){
 cur -= 2*n-1;
 }else {
 cur -= n;
 }
 if(cur  page- -; 

 }else if(cur == 0){ 
 return;
 }else {
 cur = 0;
 page = 0;
 }
 //最初のページの場合 addClass 'disabled';
 $(o).parents('._rollParent').find('._scrollNext').removeClass('disabled');
 if(page == 0) { 
 $(o).addClass('disabled');
 } else { 
 $(o).removeClass('disabled');
 }
 //scroll
 _scroll ._p.rollSe.scrollTo(_scroll._p.rollPar.eq(cur),500);
 _scroll.goPage(page);
 //写入cookie
 json.cur = cur;
 json.page = page;
 var data = JsonToStr(json);
 $.cookie(_scroll.config.ckname,data,_scroll.config.ckoptions);
 },
 goPage : function(p){
 //lg(p);
 if(_scroll._p.rollPageSe.length != 0){
 _scroll._p.rollPageSe.find('._rollpage').removeClass ('ac').eq(p).addClass('ac');
 } 
 }
}

カプセル化されたjqueryページスクロール（サンプルコード）_jquery