In a recent project, the product manager wants to implement the browser's forward and backward functions on the webpage, similar to the buttons in the upper left corner of the browser.
Forward and backward are very simple, through the window. methods related to the history object, such as go, forward, and back, can be implemented. The key is how to determine whether the current process has been moved forward (backward) to the Front (back) page?
After a while of thinking, I finally used cookies to Store Users' browsing information, and stored a number in the cookie, which indicates the page number of the user's browsing history. The total number of pages of history records is obtained through the length attribute of history.
The specific implementation is: each time a user clicks a jump link on the page, a cur_news_page variable is set in the cookie, which represents the page number of the user's current browsing history; each time you click the forward and backward buttons, the value is added or subtracted. The value is associated with history. compare the length to determine whether it has been forward (backward) to the Front (back) page.
The Code is as follows:
[Javascript]
// @ Charset "UTF-8 ";
// Top toolbar
Var Controller_Toolbar = function (){
Var self = this,
_ IsFirstPage = null,
_ IsLastPage = null,
_ InitSwitchPageEvent = null,
_ Forword = null,
_ Goback = null,
_ SetCount = null,
_ Init = null;
/**
* Toolbar events (forward and backward)
* Idea: store Integer Variables in cookies to determine the location of the page currently browsed by the user
* Cur_news_page: subscript of the current page
*/
_ InitSwitchPageEvent = function (){
$ ('. Back'). live ('click', function (){
If (! _ IsFirstPage ()){
_ Goback ();
}
});
$ ('. Forword'). live ('click', function (){
If (! _ IsLastPage ()){
_ Forword ();
}
});
$ ('. Btn_left'). click (function (){
_ SetCount ();
});
$ ('. Btn_right'). click (function (){
_ SetCount ();
});
$ ('. Highlight_tip> span'). click (function (){
If (! $ (This). hasClass ('current ')){
_ SetCount ();
}
});
// Initial Style
If (! _ IsFirstPage ()){
$ ('. Back_disabled'). removeClass ('back _ disabled '). addClass ('back ');
}
If (! _ IsLastPage ()){
$ ('. Forword_disabled'). removeClass ('forword _ disabled '). addClass ('forword ');
}
};
/**
* Value assignment of counting Variables
*/
_ SetCount = function (){
Var totalPage = history. length | 1;
Util. Cookies. set ('cur _ news_page', (parseInt (totalPage) + 1 ));
};
/**
* Whether it is the first page
* @ Returns {Boolean}
*/
_ IsFirstPage = function (){
Var curPage = Util. Cookies. get ('cur _ news_page '),
CurPage = curPage | 1;
If (curPage = 1 ){
Return true;
}
Return false;
};
/**
* Whether it is the last page
* @ Returns {Boolean}
*/
_ IsLastPage = function (){
Var curPage = Util. Cookies. get ('cur _ news_page ');
CurPage = curPage | 1;
Var totalPage = history. length | 1;
If (curPage = totalPage ){
Return true;
}
Return false;
};
/**
* Forward
*/
_ Forword = function (){
Var curPage = Util. Cookies. get ('cur _ news_page ');
Util. Cookies. set ('cur _ news_page', (parseInt (curPage) + 1 ));
History. go (+ 1 );
};
/**
* Backward
*/
_ Goback = function (){
Var curPage = Util. Cookies. get ('cur _ news_page ');
Util. Cookies. set ('cur _ news_page', (parseInt (curPage)-1 ));
History. go (-1 );
};
_ Init = function (){
_ InitSwitchPageEvent ();
};
_ Init ();
};
Author: xinsheng2011