Interesante código basado en jQuery que nos puede servir para crear un sitio con varias paginas con la peculiaridad de poder navegar entre las diferentes secciones sin que se recargue la página. Está testeado en Firefox 1.5 y 2.0, Internet Explorer 5.01, 5.5, 6.0 y 7.0 (este ultimo testeado por mi, solamente el ejemplo que va a continuación, ósea que no sé si funcionan todas las opciones, en teorÃa si), Safari 2 y Opera 8.5+. Vamos a ver como implementarlo, aquà tenéis una demo del resultado.
Primero nos descargamos pager jQuery Plugin y jQuery (usar para ambas opciones botón derecho sobre el enlace y “Guardar enlace comoâ€). Creamos una carpeta, yo la e llamado jQuery Pager, dentro de la cual metemos las dos librerias js que acabamos de descargar. Seguido creamos un archivo .html y lo guardamos con algún nombre, en este caso jQuery Pager, dentro de la carpeta anterior.
Empezamos a editar nuestro .html, lo primero será llamar a las dos librerÃas entre head /head:
[html]
[/html]
Seguido metemos algo de estilo (esto es opcional, podéis crear otras clases o bloques para que se muestre como queráis o hacer una hoja más compleja y luego llamarla desde el .html):
[html]
[/html]
Y llamamos a pager jQuery:
[html]
[/html]
Solo nos queda crear la estructura html entre body /body:
[html]
Donec ultricies lectus. Cras nonummy, enim ac iaculis blandit, diam quam accumsan diam, ut faucibus nisi lorem non est. Proin convallis. Fusce malesuada lectus sed dui. Curabitur nec massa a arcu ullamcorper tincidunt. Nulla mattis, orci a tincidunt sollicitudin, orci eros porta tellus, lobortis aliquet arcu purus ac dui. Nullam consequat, sem nec fermentum consequat, magna lacus tincidunt ligula, vel tincidunt velit sem eu nisi. Vivamus fermentum tristique dui. Integer quis arcu ut metus fringilla laoreet. Nunc congue vehicula enim. Vestibulum lacus. Quisque feugiat, nisl eget congue volutpat, metus ante interdum turpis, id iaculis justo lorem at pede. Sed dui eros, ultricies non, volutpat ut, volutpat sed, tellus. Aliquam a nibh.
Mauris quis risus. Mauris ut risus. Proin auctor dictum ante. Ut cursus. Nulla quis ante nec augue rutrum egestas. Vestibulum orci lorem, euismod ac, nonummy in, auctor vel, augue. Quisque vulputate, lorem ac tincidunt dignissim, libero pede pulvinar risus, ac lobortis dolor urna non elit. Morbi porttitor ipsum quis ligula vulputate molestie. Maecenas eget lectus mattis eros mollis fringilla. In eleifend dignissim velit. Maecenas metus purus, pretium sit amet, interdum vitae, interdum non, est. Vivamus purus enim, iaculis sed, consequat venenatis, tempor sed, lacus. Sed ornare. Ut lorem mauris, congue non, bibendum eget, laoreet eget, elit. Morbi mauris. Fusce urna massa, malesuada sit amet, cursus nec, dapibus sed, odio. Donec varius risus eu nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam id nisi.
Aenean pulvinar, erat nonummy auctor bibendum, nisi velit commodo turpis, non venenatis metus magna ac dui. Integer vehicula ligula eget leo. Nulla sagittis tincidunt enim. Integer quis augue. Proin sapien ligula, pharetra id, convallis dictum, feugiat non, ipsum. Etiam non lacus a magna aliquam auctor. Integer elementum. Mauris massa odio, viverra in, facilisis sed, condimentum eu, diam. Integer dui. In dictum imperdiet magna. Nam cursus, nulla a lacinia porttitor, eros tortor condimentum erat, ac ultrices nisl ante at urna. Etiam a tortor sit amet metus consequat pulvinar. Nam auctor urna nec libero. Integer tristique dui molestie lectus. Ut nibh purus, sagittis ut, vestibulum ac, commodo in, purus. Aenean dictum. Vivamus suscipit dapibus massa. Ut rhoncus ullamcorper justo. Morbi orci sem, congue eu, viverra aliquam, porttitor vel, magna.
Proin ligula arcu, feugiat ac, tincidunt vel, bibendum at, eros. Duis mollis magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin at quam quis leo fringilla elementum. Morbi sagittis commodo pede. Integer blandit, tortor bibendum placerat suscipit, tortor urna mattis nisi, sed mollis dolor purus nec est. In vitae enim. Cras commodo sem eu mauris. Suspendisse non risus non massa cursus blandit. Aenean quis lectus a sapien aliquet posuere. In ornare iaculis urna. Duis ultrices odio eu turpis. Nunc eget quam ornare ante scelerisque sollicitudin. Etiam non lectus. Sed sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sit amet neque tempus nunc hendrerit mattis. Suspendisse potenti. Duis diam orci, ultrices vitae, iaculis in, laoreet nec, felis. Mauris eu mauris.
Pellentesque nisi. Sed neque augue, molestie nec, nonummy eu, viverra eu, quam. Quisque commodo, turpis et imperdiet dictum, mauris est posuere mi, eget vehicula nisi lorem sed pede. Aliquam laoreet. Morbi in diam ac orci sollicitudin aliquam. Maecenas lectus. Donec erat quam, gravida faucibus, molestie a, porta vel, purus. Suspendisse nibh nibh, faucibus at, ornare gravida, tristique ac, purus. Maecenas pulvinar leo dapibus nulla. Nam posuere tortor a felis interdum rutrum. In hac habitasse platea dictumst. Vivamus hendrerit. Morbi sit amet lectus at diam pharetra euismod. Proin ultricies lectus a ligula. In hac habitasse platea dictumst. Proin luctus, dui feugiat lacinia bibendum, tellus dui malesuada lacus, quis malesuada metus nibh sit amet nunc.
[/html]
Como veis es bastante simple de implementar y echarlo a andar, luego lo podemos complicar hasta donde de la cabeza de cada uno. Tenéis toda la información de las diferentes opciones que trae el script y más ejemplos en la página oficial del creador.
Enlace: rikrikrik: pager jQuery plug-in
