Постраничная навигация CSS

Опубликовано 2011.12.13

Постраничная навигация встречается на 99% сайтов. Исключение составляют разве что визитки и промо сайты. Такой подход очень удобен,если у вас много контента и помещать его весть(или ссылки на него) на одной странице нецелесообразно с точки зрения юзабилити сайта и отношения поисковиков. Постраничную навигацию можно выполнять как на стороне сервера, так и на стороне клиента.Разница между этими двумя методами ощутима... Заключается она чём: -клиентская: долгая загрузка "в первый раз" мгновенное переключение между страницами высокая нагрузка на сервер(только при первом обращении) возможны проблемы с кроссбраузерностью необходимы дополнительные библиотеки и стили -серверная: одинаковая скорость загрузки как при первом обращении,так и к любой странице перемещение между страницами занимает время нормальная нагрузка на сервер никаких заморочек с кроссбраузерностью нет необходимости в дополнительных библиотеках и стилях О постраничной навигации на PHP читайте тут. Какой способ выбирать-решать вам. Всё зависит от поставленных задач и условий. Например выводить 100000 элементов с клиентской постраничной навигацией-это бред. А для ста элементов вполне подойдет и клиентский вариант. А вообще всё зависит от мощности сервера и базы данных в частности. Клиентская часть. Способ 1.

Постраничная навигация css

Подключаем к сайту файл со стилями и JavaScript 
  1. <link rel="stylesheet" href="/css/style.css" type="text/css" />
  2. <script type="text/javascript" src="/js/jquery.min.js"></script> 
  3. <script type="text/javascript" src="/js/imtech_pager.js"></script>
Можете также скачать их во вложении в конце статьи. Эти стили поместите в style.css 
  1. .main
  2. { 
  3. margin:0 auto;
  4. background: #FFFFFF;
  5. width:85%;
  6. font-size:80%;
  7. border:1px #000 solid;
  8. padding:1em 2em 2em;
  9. -moz-border-radius:3px;
  10. -webkit-border-radius:3px
  11. }
  12.  
  13. #content p{
  14. text-indent:20px;
  15. text-align:justify;
  16. }
  17. #pagingControls ul{
  18. display:inline;
  19. padding-left:0.5em
  20. }
  21. #pagingControls li{
  22. display:inline;
  23. padding:0 0.5em
  24. }
Также поместите на странице следующий JavaScript код 
  1. <script type="text/javascript">
  2. var pager = new Imtech.Pager();
  3. $(document).ready(function() {
  4.     pager.paragraphsPerPage = 2; // определение количества элементов на странице
  5.     pager.pagingContainer = $('#content'); // выбор блока content в котором находиться текст 
  6.     pager.paragraphs = $('p', pager.pagingContainer); //выбор тега для разделения текста
  7.     pager.showPage(1);
  8. });
  9. </script>
Таким образом текст,помещенный в контейнер с id="content"(который обернут контейнером с class="main") будет разбит на страницы.На каждой странице будет по 2 абзаца в теге p. В том месте, где вы хотите видеть навигацию - разместите контейнер с id="pagingControls". Вот как это работает:

11111111111

2222222

333333333

44444444

55555555

66666666

7777777

888888