Encapsulated jquery Paging scrolling (sample code) _jquery

HTML structure:

Copy Code code as follows:

Ul._rollse{width:100px;height:300px;over-flow:hidden}
Ul._rollse li._rollpar{height:100px;border:1px Solid #369}

Copy Code code as follows:

<div class= "_rollparent" >
 <ul class= "_rollpagese" >
  <li class= "_rollpage" >1</li>
  <li class= "_rollpage" >2</li>
 </ul>
 <div>   
  <a href= "#" mce_href= "#" class= "_ Scrollprev "data-frequency=" 3 "data-pr=" Happy "> previous page </a>    
  <a href = "#" mce_href= "#" class= "_scrollnext" data-frequency= "3" data-pr= "Happy" > next page </a>   
 </div>   
 <ul class= "_rollse" >   
  <? PHP for ($a =1 $a + + $a <10):?>   
  <li class= "_rollpar" ><?php echo $a;? ></li>   
  <?php endfor;? >   
 </ul>   
</div> 

JS Introduction File:

<script type= "Text/javascript" src= "/js/jquery//scrollto/jquery.scrollto-min.js" ></script>

Author:teresa 2011-3-28

Params: Above HTML structure must fill in: Related class

_rollparent: The parent layer that triggers the event)

_rollse: Scrolling Area

_rollpar: Scrolling elements

_scrollnext: Next Page button

_scrollprev: Previous Page button

_rollpagese: Paging Area

_rollpage: Page number element

Data-frequency: Scrolling frequency (eg: scroll 3 elements at a time)-> should be annotated on the button that triggers the event.

The prefix of the Data-pr:cookie.

Discription: Read a few data at once, show only a few, roll the page (roll 3 or n strips); This method can be used only if the HTML element of the desired event scrolling effect is marked with the above specified class.

JS Initialization method:

Copy Code code as follows:

/**************************************************************************
Discription: Page scrolling
***************************************************************************/
Plug-in introduced
document.write (' <mce:script type= "Text/javascript" src= "/js/jquery//scrollto/jquery.scrollto-min.js" mce_src= " Js/jquery//scrollto/jquery.scrollto-min.js "></mce:script>");
Function initialization
$ (function () {
/*
Author:teresa 2011-03-24 14:32:42
Discription:strollto Init
*/
Scrolling initial display
_scroll.init ();
Roll up
$ ('. _scrollprev '). Live (' click ', function () {
_scroll.prev (this);
return false;
});
Roll down
$ ('. _scrollnext '). Live (' click ', function () {
_scroll.next (this);
return false;
});
});
/*
Author:teresa
Update_time:2011-03-24 14:52:34
Discription: Paging scrolling
*/
var _scroll = {
Scrolling cookies
config:{
Ckname: ' Lifedu_rollcur ',
Ckoptions: {
Expires:3,//In the days
Path: '/'
}
},

Class
Init:function () {
var roll = $ ('. _rollparent ');
for (i=0;i<roll.length; 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 ');
Cookies
Json.cur = cur;
json.page = page;
var data = JSONTOSTR (JSON);
$.cookie (cookiename,data,_scroll.config.ckoptions);
}
},

_p: {},
Pretreatment
_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 '); Scrolling area
_scroll._p.rollpar = _scroll._p.rollse.find ('. _rollpar ');
_scroll._p.rlen = _scroll._p.rollpar.length;
Page area
_scroll._p.rollpagese = $ (o). Parents ('. _rollparent '). Find ('. _rollpagese ');
_scroll._p.rollpagelen = _scroll._p.rollpagese.find ('. _rollpage '). length;
},

Roll down
Next:function (o) {
_scroll._pre (o);
var ostr = $.cookie (_scroll.config.ckname) | | '{}';
var json = eval (' (' +ostr+ ') ');
var last = _scroll._p.rlen-1;
var n = _scroll._p.rollfrequency;
var cur = parseint (json.cur) | |  0; Current scrolling Element Index
var page = parseint (json.page) | | 0; Current page number
if (Cur+n < last) {
cur + = n;
page++;
}else if (cur = last) {
Return
}else{
cur = last;
page = _scroll._p.rollpagelen-1;
}
If last page 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);
Write Cookie
Json.cur = cur;
json.page = page;
var data = JSONTOSTR (JSON);
$.cookie (_scroll.config.ckname,data,_scroll.config.ckoptions);
},

Roll up
Prev:function (o) {
LG (' prev ');
_scroll._pre (o);
var ostr = $.cookie (_scroll.config.ckname) | | '{}';
var json = eval (' (' +ostr+ ') ');
var cur = parseint (json.cur) | |  0; Current scrolling Element Index
var page = parseint (json.page) | | 0; Current page number
var n = _scroll._p.rollfrequency;

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

}else if (cur = = 0) {
Return
}else {
cur = 0;
page = 0;
}
If page 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);
Write 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 ');
}
}
}