Постраничная навигация css: Подборка оригинальных оформлений постраничной навигации | html, css и javascript (jQuery) – Постраничная навигация (Pagination) средствами jQuery

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

Таким образом текст,помещенный в контейнер с(который обернут контейнером с) будет разбит на страницы.На каждой странице будет по 2 абзаца в теге p. В том месте, где вы хотите видеть навигацию - разместите контейнер с. Вот как это работает:

11111111111

2222222

333333333

44444444

55555555

66666666

7777777

888888

Из PSD в HTML. Постраничная навигация

Постраничную навигацию мы создадим при помощи ненумерованного списка:

<!--Пагинатор-->
<ul>
    <li>Предыдущая</li>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">Следующая</a></li>
</ul>

Для отключенного пункта мы добавили класс disabled, а для активного – класс acitve.

В файле со стилями запишем следующие свойства:

.pagination {
    clear: both;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #ccc;
    overflow: hidden;
    display: inline-block;
}

Для пунктов удалим маркеры, и сделаем так, чтобы они располагались друг за другом:

.pagination li {
    float: left;
    list-style-type: none;
}

Для ссылки и отключенного пункта укажем следующие свойства:

.pagination li a,
.pagination li.disabled {
    display: block;
    line-height: 30px;
    vertical-align: middle;
    background-color: white;
    padding: 0 10px;
    font-size: 12px;
    text-decoration: none;
}

Для отключенного пункта установим цвет текста:

.pagination li.disabled {
    color: #999;
}

Для активной ссылки, и ссылки, когда на нее наведен курсор пропишем следующие свойства:

.pagination li.active a,
.pagination li a:hover {
    color: white;
    background-color: #41b039;
}

Установим границу между пунктами:

.pagination li+li a {
    border-left: 1px solid #ccc;
}

Наш шаблон готов. Теперь его нужно протестировать.


Видео к уроку

На основе HTML и CSS3

Организация пагинации страниц сайта очень важна, чтобы сделать просмотр удобным для посетителя. Мы нашли впечатляющие примеры навигации на HTML5 и CSS3 для подпитки вашей креативности.

Эта навигация прекрасно работает даже при том, что она слегка старомодна на вид. Единственное, что вам потребуется, это div с применёнными к нему стилями. Скачайте исходный код с разметкой и стилями.

Демо Скачать

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

Демо Скачать

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

Демо Скачать

В отличие от других вариантов эта навигация показывает всплывающие подсказки при наведении курсора мыши с помощью плагина Tooltip.

Демо Скачать

Еще одна достойная упоминания пагинация страниц HTML с плагином Tooltip показывает миниатюрные картинки предпросмотра вместо обычного текста. Плавная анимация при наведении курсора мыши может вас заинтересовать.

Демо Подробнее / Скачать

Легкий шаблон навигации с исходным кодом разметки и стилей.

Демо Скачать

Простой шаблон с тёмной темой.

Демо Скачать

Скачайте полный набор файлов js, css и html и используйте этот шаблон навигации на своем сайте.

Демо Скачать

Стильный шаблон навигации c красивыми кнопками для пагинации на сайте.

Демо Скачать

Анимированная навигация, реализованная с помощью jQuery, которая перемещает полоску вдоль ряда номеров страниц.

Демо Скачать

Блестящая анимация кнопок с эффектом быстрого плавного переключения.

Демо Подробнее / Скачать

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

Демо Подробнее / Скачать

Старая, но до сих пор используемая навигация с помощью слайдера с невероятной функциональностью с использованием слайдера из плагина jQuery UI.

Демо Подробнее / Скачать

Данная публикация представляет собой перевод статьи «12 Brilliant Pagination HTML CSS3 Templates» , подготовленной дружной командой проекта Интернет-технологии.ру

Набор стилей для формирования постраничной навигации на CSS3

Постраничная навигация так или иначе присутствует практически на всех сайтах или блогах, если конечно они не являются одностраничными. Большинство шаблонов имеют в комплекте образчики верстки и стилевого оформления блоков постраничной навигации. Но чаще всего, это ничем не примечательный набор цифр со стрелками вперед и назад, обозначенные, в некоторых случаях, невыразительной рамкой. Именно этот элемент сайта, многим хочется как то выделить, гармонично вписав его в общий дизайн.
Можно посидеть часок-другой экспериментируя со стилями и создать что-нибудь своё, а можно воспользоваться готовыми решениями, которых если поискать отыщется немало. Например блогеры, которые ведут свой блог на движке WordPress и с успехом пользуют популярнейший плагин WP-Pagenavi, могут подглядеть неплохую подборку стилей здесь, или же воспользоваться исходниками любого понравившегося шаблона.

Когда мне на глаза попался адаптивный универсальный шаблон сайта — «Response», я обратил внимание на приличный набор стилей оформления постраничной навигации, выполненный с использованием свойств CSS3. Немного поработав со значениями, добавив недостающие функции для отдельных браузеров (градиент в Opera), получил готовый комплект стилей для форматирования постраничной навигации сайта.

Имея под рукой такой набор, вы с легкостью сможете видоизменять панельку оформления постраничной навигации, как душе угодно. Тем более, что стиль один — редактируются только цветовые оттенки этого стиля.
 

Для того чтобы вам было легче разобраться, в исходниках прописал некоторые комментарии к стилям каждой панельки того или иного цвета. Ну, а html-код, который получится в результате вывода функций постраничной навигации, прост до неприличия и выглядит следующим образом:
 

<div>
     <ul>
         <li><a href="#" title="Старт">Старт</a></li>
         <li><a href="#" title="Назад">&laquo; Назад</a></li>
         <li><a href="#" title="1">1</a></li>
         <li><a href="#" title="2">2</a></li>
         <li><a href="#" title="3">3</a></li>
         <li><a href="#" title="4">4</a></li>
         <li><a href="#" title="5">5</a></li>
         <li><a href="#" title="6">6</a></li>
         <li><a href="#" title="7">7</a></li>
         <li><a href="#" title="8">8</a></li>
         <li><a href="#" title="9">9</a></li>
         <li><a href="#" title="10">10</a></li>
         <li><a href="#" title="Вперед">Вперед &raquo;</a></li>
         <li><a href="#" title="Конец">Конец</a></li>
    </ul>
</div>

<div> <ul> <li><a href="#" title="Старт">Старт</a></li> <li><a href="#" title="Назад">&laquo; Назад</a></li> <li><a href="#" title="1">1</a></li> <li><a href="#" title="2">2</a></li> <li><a href="#" title="3">3</a></li> <li><a href="#" title="4">4</a></li> <li><a href="#" title="5">5</a></li> <li><a href="#" title="6">6</a></li> <li><a href="#" title="7">7</a></li> <li><a href="#" title="8">8</a></li> <li><a href="#" title="9">9</a></li> <li><a href="#" title="10">10</a></li> <li><a href="#" title="Вперед">Вперед &raquo;</a></li> <li><a href="#" title="Конец">Конец</a></li> </ul> </div>

 
Присутствуют все необходимые CSS-классы, их можно использовать для оформления любого элемента навигации. Следует отметить, что все панели выполнены без единого изображения, только средствами CSS3, так что не стоит забывать о том, что не все браузеры одинаково хорошо поддерживают свойства CSS3 и следует внимательно относиться к данному факту))).
CSS-код всего набора стилей достаточно объемный и нет смысла приводить его целиком в записи, для работы проще воспользоваться исходным файлом pagenavi_style.css, бережно упакованном в архиве с исходниками. Выбираете понравившийся цветовой оттенок, при необходимости корректируете значения и все.

Поковырять код можете здесь...

Надеюсь, что после публикации этой записи, мы сможем лицезреть на ваших сайтах или блогах, радующие глаз, аккуратно и главное в тему оформленные, замечательные панели постраничной навигации.
 
Сегодня на десерт — смотрим видео необычного Chrome Эксперимента:
 

 

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Постраничная навигация — набор параметров и CSS PdoPage

1. Создаем набор параметров pdoPage, называем mfilter_pagination. (Открыть сниппет pdoPage, перейти на вкладку "Параметры" -> "Добавить набор парметров")

2. Скачиваем файлик с набором параметров — mfilter_pagination.json.

3. Переходим в созданным нами набор параметров, и прокручиваем вниз. Там будет кнопка "Импорт параметров". Нажимаем ее, и загружаем файл.

4. При вызове Сниппета pdoPage указываем набор параметров так: [[[email protected]_pagination? &tpl=`...`]]

Кстати, если вы попробуете сохранить свой набор параметров, то с некоторой вероятностью получите непонятную ошибку. Не переживайте и ругайтесь. Просто скопируйте URL, и обрежте ненужный код, оставив только JSON. А в нем замените %20 на симво пробела. Проверить валидность получившегося кода можно тут - http://jsonviewer.stack.hu/

CSS Стили:


ul.pagination li{
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}
ul.pagination li a, ul.pagination li span{
  border:1px solid transparent;
  display: block;
  border-radius:2px;
  color: #000000;
  font-size: 16px;
  padding: 3px;
  text-decoration: none;
  min-width: 30px;
  height: 30px;
  text-align: center;
}
ul.pagination li.active a, ul.pagination li.active span{
  background-color: #000000;
  color: #fff;
  border:1px solid #000000;
}
ul.pagination li.first a, ul.pagination li.first span{
  position: relative;
  border:1px solid;
  padding-left: 7px;
  padding-right: 7px;
}
ul.pagination li.first a:before, ul.pagination li.first span:before{
  content: '';
  position: absolute;
  top:50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -2.5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 5px 0;
  border-color: transparent #000000 transparent transparent;
}
ul.pagination li.last a, ul.pagination li.last span{
  position: relative;
  border:1px solid;
  padding-left: 7px;
  padding-right: 7px;
}
ul.pagination li.last a:before, ul.pagination li.last span:before{
  content: '';
  position: absolute;
  top:50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -2.5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #000000;
}
ul.pagination li.disabled{
  opacity: 0.5;
}

СSS3 Пагинация



Узнайть, как создать отзывчивую пагинацию с помощью CSS3.


Простая пагинация

Если у вас есть веб сайт с большим количеством страниц, вы можете добавить своего рода нумерация страниц на каждой странице:

Пример

.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

Редактор кода »

Пагинация активная при наведение

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

Пример

.pagination a.active {
    background-color: #4CAF50;
    color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

Редактор кода »

Кнопки округленные активные при наведение

Добавить свойство border-radius если вы хотите округлить кнопки "активные" и "при наведении":

Переход эффект при наведение

Добавить свойство transition ссылки на страницу для создания эффекта перехода при наведении:


Пагинация с границами

Используйте свойство border добавления границ к нумерации страниц:

Пагинация с закругленными границами

Совет: Добавьте закругленные границы к первой и последней ссылке в нумерацию страниц:

Пример

.pagination a:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination a:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

Редактор кода »

Пагинация с полями

Совет: Добавить свойство margin, если вы не хотите группировать ссылки на страницы:

Пример

.pagination a {
    margin: 0 4px; /* 0 сверху и снизу. Не стесняйтесь менять его */
}

Редактор кода »

Пагинация размер

Изменить размер страниц с помощью свойства font-size:


Пагинация по центру

Чтобы центрировать пагинацию, оберните элемент контейнера (например, <div>) вокруг него text-align:center


Еще примеры


Пагинация крошки

Еще один вариант разбиения на страницы-это так называемые "крошки":

Пример

ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}

Редактор кода »

Красивая пагинация CSS на основе Bootstrap

Расскажу, как просто и сделать красиваю пагинацию (постраничное разделение) на CSS.

Ничего нового придумать не будем, возьмём за основу популярный фреймворк Bootstrap 3.

Демонстрация

На выходе мы получим такое:

Также можно отключать пункты меню и делать нужный элемент активным:

Установка

CSS

Установить CSS-код:

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #428bca;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #2a6496;
  background-color: #eee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #428bca;
  border-color: #428bca;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}   

HTML

Установите в нужном месте html-код:

<ul>
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>

Чтобы сделать элемент активным, добавьте класс active к тегу li:

<li><a href="#">1</a></li>

Чтобы сделать элемент неактивным, добавьте класс disabled к тегу li:

<li><a href="#">«</a></li>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *