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

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

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

 
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<script type="text/javascript" src="/js/jquery.min.js"></script> 
<script type="text/javascript" src="/js/imtech_pager.js"></script>

.main
{ 
margin:0 auto;
background: #FFFFFF;
width:85%;
font-size:80%;
border:1px #000 solid;
padding:1em 2em 2em;
 -moz-border-radius:3px;
-webkit-border-radius:3px
}
 
#content p{
text-indent:20px;
text-align:justify;
}
#pagingControls ul{
display:inline;
padding-left:0.5em
}
#pagingControls li{
display:inline;
padding:0 0.5em
}

<script type="text/javascript">
var pager = new Imtech.Pager();
$(document).ready(function() {
    pager.paragraphsPerPage = 2; // определение количества элементов на странице
    pager.pagingContainer = $('#content'); // выбор блока content в котором находиться текст 
    pager.paragraphs = $('p', pager.pagingContainer); //выбор тега для разделения текста
    pager.showPage(1);
 
});
</script>

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, а для активного – класс

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

.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

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

Когда мне на глаза попался адаптивный универсальный шаблон сайта — «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 указываем набор параметров так: [[!pdoPage@mfilter_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;
  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;
}   

<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>

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

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