Делаем «пейджер»

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

Пейджер

В целом можно выделить четыре основных элемента:

Предыдущая / Следующая страница (кнопка не активна)
Текущая страница
Обычная ссылка
Предыдущая / Следующая страница (кнопка активна)

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

<ul class="pager">
   <li class="previous-off">«Предыдущая</li>
   <li class="active">1</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="">6</a></li>
   <li><a href="">7</a></li>
   <li class="next"><a href="">Следующая»</a></li>
</ul>

Теперь осталось только добавить некоторые CSS свойтсва:

ul{border:0;margin:0;padding:0;}
.pager li{
border:0;margin:0;padding:0;
float:left;
font-size:11px;
list-style:none;
}
.pager a{
display:block;
border:solid 1px #ddd;
margin-right:2px;
}
.pager a:link,
.pager a:visited {
color:#0063e3;
padding:3px 6px;
text-decoration:none;
}
.pager a:hover{
border:solid 1px #666;
}
.pager .previous-off,
.pager .next-off {
color:#666666;
font-weight:bold;
padding:3px 4px;
}
.pager .next a,
.pager .previous a {
font-weight:bold;
border:solid 1px #fff;
}
.pager .active{
color:#ff0084;
font-weight:bold;
padding:4px 6px;
}

В итоге:

Оригинал: Perfect pagination style using CSS

Обсуждение:

Артём Курапов 21 Мар 2008

Недавно делал такую же гемморойную штуку, поэтому сразу идею к следующим совершенстованиям..

1. А если страниц больше чем 7? Надо ли делать 1..34 35 36.. 80?
2. Навигация при помощи клавиатуры Ctrl+стрелки
3. Что делать с обработкой не существующих страниц.. если юзер решит поэксперементировать? Кидать на главную?

Ответить
Alex 21 Мар 2008

1)На мой взгляд делать больше 10 страниц не стоит
3)Если юзер решит поэкспериментировать, то думаю лучше перекидывать на страницу с сообщением о том что такой страницы не существует.

Ответить
Max 22 Мар 2008

помагло спасиб

Ответить
Климов 22 Мар 2008

хм, кажется это не сложно спасибо за пост.

Ответить
Гаджет 22 Мар 2008

Полезная инфа. Обязательно воспользуюсь вашими советами!

Ответить
Pingback: Блог интернет-разработчика » Как на сайте сделать…
tapazukk 29 Мар 2008

Все таки это самнительно пейджер загонять в список. Иногда можно попробовать посмотреть документ с отключенным css, выглядеть будет странновато, гораздо приятнее, на мой взгляд, просто использоать инлайновые элементы (иногда этого не позволит дизайн)

Ответить
Руслан 10 Май 2008

И как работает такой пейджер? что то не пойму

Ответить
Антон 23 Июн 2008

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

Ответить

alexilin

Обсуждение:

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