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

Опубликовано 2011.12.13 в разделе CSS

Постраничная навигация встречается на 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


14 Комментариев

Оставить комментарий

  1. Гость 2014/02/09

    Выходит за рамки страницы,
    если страниц больше, то нумерация не переносится на новую строку, а продолжает в том же, помогите пожалуйста перенести нумерацию на новую строку или как нибудь сократить ее.

    Ответить

    1. Админ 2014/02/10

      Напишите стиль так:
      [css]
      #pagingControls li{
      display:inline-block;
      padding:0 0.5em;
      }
      [/css]

      Ответить

      1. Гость 2014/02/11

        спасибо большое

        Ответить

  2. Гость 2013/08/30

    Отличное решения, всё классно работает, спасибо большое))

    Только одна проблемка
    в этой строке: pager.pagingContainer = $('#content');
    если ввести другое название блока, то всё это дело работает не совсем корркетно, поэтому пришлось в стилях и в html файле заменить название на content вместо right_content, которое у меня было ))

    может по другому ни как, я просто в js плохо пока разбираюсь)

    Ответить

    1. Админ 2013/09/02

      От этого названия и будет зависеть то, какой контейнер раскидает на страницы.

      Ответить

  3. Гость 2013/03/17

    Доброго времени суток.Подскажите пожалуйста на главную страницу выводится 7 анонсов статей, мне бы хотелось в своей теме,в главной иметь нумерацию страниц, как темизировать ?
    Что куда добавлять? ПОЖАЛУЙСТА пошагово.
    Заранее благодарю.
    drupal-7.21

    Ответить

    1. Админ 2013/03/17

      А сколько всего материалов на сайте? Добавляйте ещё - и постраничная навигация сама появится.

      Ответить

      1. Гость 2013/03/18

        12 анонсов это много хотелось бы 7, у вас нет материала по настройкам Custom breadcrumbs;Meta tags;Pathauto;Redirect?

        Ответить

        1. Админ 2013/03/18

          Найдите в настройках сайта пункт "Информация о сайте" - там можно задать количество страниц.
          Или сделайте вьюс, и им выводите материалы.
          А что по этим модулям непонятно? Про Pathauto что-нибудь написать?

          Ответить

          1. Гость 2013/03/18

            Спасибо

            Ответить

  4. Гость 2012/03/09

    Автор напишите мне в ICQ 533564 есть парочка вопросов по работе сия чуда!

    Ответить

    1. Админ 2012/03/09

      Аськой не пользуюсь,пиши тут.

      Ответить

  5. Гость 2012/01/25

    **** кроме Р

    Ответить

  6. Гость 2012/01/25

    Сжирает и не отображает ВСЕ теги кроме

    !!!

    Исправьте пожалуйста!

    Ответить

Ваш комментарий успешно создан

Ваш комментарий

  • Для выделения кода оберните его в тэги <code> и </code>
  • Отметьте знак внимания