Encapsulated jquery paging (sample code)

HTML structure:
Copy codeThe Code is as follows:
Ul. _ rollSe {width: 100px; height: 300px; over-flow: hidden}
Ul. _ rollSe li. _ rollPar {height: 100px; border: 1px solid #369}

Copy codeThe Code is 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 import file:

<Script type = "text/javascript" src = "/js/jquery // scrollTo/jquery. scrollTo-min.js"> </script>

Author: teresa 2011-3-28

Params: Required for the above HTML structure: Related class

_ RollParent: the upper layer of the event to be triggered)

_ RollSe: Rolling Area

_ RollPar: Rolling Element

_ ScrollNext: Next page button

_ ScrollPrev: Previous Page button

_ RollPageSe: Paging Area

_ Rollpage: page number Element

Data-frequency: Scroll frequency (eg: one scroll of three elements)-> must be marked on the trigger button.

Data-pr: cookie prefix.

 

Discription: reads several data records at a time, displays only a few records, and rolls pages (rolls 3 or n records at a time ); this method can be used only by marking the above defined class with the html element of the expected event rolling effect.

JS initialization method:
Copy codeThe Code is as follows:
/*************************************** ***********************************
Discription: Page flip
**************************************** ***********************************/
// Plug-in Introduction
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: terces2011-03-24 14:32:42
Discription: strollTo init
*/
// Scroll the 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 = {
// Scroll cookie
Config :{
Ckname: 'lifedu _ rollcur ',
Ckoptions :{
Expires: 3, // in days
Path :'/'
}
},

// Initialization
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 ');
// Cookie
Json. cur = cur;
Json. page = page;
Var data = JsonToStr (json );
$. Cookie (cookieName, data, _ scroll. config. ckoptions );
}
},

_ P :{},
// Preprocessing
_ 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 Area
_ Scroll. _ p. rollPar = _ scroll. _ p. rollSe. find ('. _ rollPar ');
_ Scroll. _ p. rlen = _ scroll. _ p. rollPar. length;
// Page number 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; // index of the current Rolling Element
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; // index of the current Rolling Element
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 first 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 ('acs'). eq (p). addClass ('ac ');
}
}
}