This script is designed to move between sections of content in the same page. The example assumes the section tag is used for content. But a div tag with a class could also be used with minor tweaking. This is not a pager that simulates a book. It does not attempt to create page sized chunks and operate like a book. In a web context, more web like behavior is preferable in my opinion. Scrolling a bit is not a bad thing. In fact, in most cases it makes more sense to me.
Assumptions: All content is stored in section tags. The currently visible section is marked with the class "selected". All other sections are hidden. Moving between sections merely toggles hidden off and selected on.
My comments are in included in the code that follows.
Live Demo: TurnTest.html
Get Source Code: TurnTest.html.txt
TurnTest.html Source
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"/> 5 <title>JQuery Pager/Turning Script</title> 6 <style type="text/css"> 7 #ButtonBar ul { padding-left: 0; margin: 0em auto 1em auto; color: black; float: left; width: 90%; font-family: Arial, Helvetica, sans-serif; } 8 #ButtonBar ul li { display: inline; } 9 #ButtonBar ul li a { padding: 0.4em 1.1em; background-color: #A4A4A4; color: Black; text-decoration: none; float: left; margin:2px 1px 1px 1px; display:block;} 10 11 #ButtonBar ul li a:hover { background-color:gray; } 12 13 #BookContents { clear:both;} 14 .selected { display:block; } 15 .hidden { display:none; } 16 a{ cursor:pointer;} 17 18 </style> 19 </head> 20 <body> 21 <h2>JQuery Pager/Turning Script</h2> 22 <p><b>Controls</b></p> 23 <div id="ButtonBar"> 24 <ul> 25 <li><a id="Top">Top</a></li> 26 <li><a id="Back"> < </a></li> 27 <li><a id="Forward"> > </a></li> 28 </ul> 29 </div> 30 31 <div id="BookContents"> 32 <section id="section01" class="selected"> 33 <h3>Section 1</h3> 34 <p>This is section1. Content for section 1.</p> 35 </section> 36 37 <section id="section02" class="hidden"> 38 <h3>Section 2</h3> 39 <p>This is section 2. Content for Section 2.</p> 40 </section> 41 42 <section id="section03" class="hidden"> 43 <h3>Section 3</h3> 44 <p>This is section 3. Content for section 3.</p> 45 </section> 46 47 </div> 48 49 <script type="text/javascript" src="jquery1.9.min.js"></script> 50 <script type="text/javascript"> 51 52 53 // Function moves forward one section in the content 54 function moveForward(){ 55 56 // If at the last section, this returns false and nothing happens. 57 if ($('.selected').next().prop('tagName') == 'SECTION'){ 58 // If a section follows the currently selected do the following. 59 60 // Save the next section tag as a variable. 61 targetSection = $('.selected').next(); 62 63 // Hide currently selected section 64 $('.selected').addClass('hidden'); 65 $('.selected').removeClass('selected'); 66 67 // Make next section visible 68 $(targetSection).removeClass('hidden'); 69 $(targetSection).addClass('selected'); 70 71 } 72 } 73 74 // Function moves backward one section in the content 75 function moveBackward(){ 76 if ($('.selected').prev().prop('tagName') == 'SECTION'){ 77 78 targetSection = $('.selected').prev(); 79 80 // Remove currently selected section 81 $('.selected').addClass('hidden'); 82 $('.selected').removeClass('selected'); 83 84 // Make next section visible 85 $(targetSection).removeClass('hidden'); 86 $(targetSection).addClass('selected'); 87 88 } 89 } 90 91 92 // Function moves backward one section in the content 93 function moveTop(){ 94 95 // Remove currently selected section 96 $('.selected').addClass('hidden'); 97 $('.selected').removeClass('selected'); 98 99 // Make next section visible 100 $('section').first().removeClass('hidden'); 101 $('section').first().addClass('selected'); 102 103 } 104 105 106 107 // Main execution function 108 function start(){ 109 110 $('#Top').click(moveTop); 111 $('#Back').click(moveBackward); 112 $('#Forward').click(moveForward); 113 114 } 115 116 $(document).ready(start); 117 </script> 118 </body> 119 </html>