Красивая пагинация с использованием css
Приветствую вас, уважаемые гости и подписчики моего скромного блога zacompom!
Давненько не писал, хотя в статье где рассказывал о поиске по Твиттеру, обещал что скоро напишу. Очень сильно перед вами извеняюсь, но на то у меня были весомые доводы, и сейчас я исправляю досадную промашку.
Итак, готовы? В добрый путь)))
В этом уроке рассмотрим то как украсить нашу пагинацию для поисковой выдачи или еще для чего нибудь. Это можно сделать использую несколько html строчек и CSS. Урок содержит HTML и CSS код для осуществления пагинации как в Flickr, Digg и простая пагинация готовые для использования на вашем сайте.
Типичная структура пагинации
Следующая картинка показывает пример типочной структуры пагинации:
В целом можно выделить четыре основных элемента:
- Предыдущая/Следующая кнопка (отключенном состоянии)
- Текущая активная страница
- Стандартая кнопка для всех страниц
- Предыдущая/Следующая кнопка (активном состоянии)
Вы можете оформить эту структуру с помощю списка HTML(<ul>), который содержит некоторые элементы <li> (по одному для каждогой кнопки) и поставить ID для <ul> списка для назначения специфических стилей пагинации.
Верстка пагинации как в Flickr:
Пагинация в Flickr выглядит следующим образом:
Html код очень прост, вы можете использовать эту структуру во всех пагинациях которые будете создавать:
<ul id="pagination-flickr">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul>Теперь остается переопределить CSS стили элементов (ul,li,a)
Css стили для Flickr пагинации очень просты:
ul{border:0; margin:0; padding:0;}
#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
#pagination-flickr a{
border:solid 1px #DDDDDD;
margin-right:2px;
}
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-flickr .next a,
#pagination-flickr .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-flickr .active{
color:#ff0084;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-flickr a:link,
#pagination-flickr a:visited {
color:#0063e3;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-flickr a:hover{
border:solid 1px #666666;
}Верстка пагинации как в Digg:
Теперь попробуем создать пагинацию как в Digg которая выглядит так:
С предыдущего примера скопируйте HTML структуру. Вам нужно будет только поменять ID для <ul> на pagination-digg:
<ul id="pagination-digg">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul>Css код очень похож на предыдущий, как Flickr. Вам надо только изменить некоторые атрибуты, а также изменить #pagination-flickr ID на #pagination-digg, но CSS элементы разбиения на страницы не меняются:
ul{border:0; margin:0; padding:0;}
#pagination-digg li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;
}
#pagination-digg a{
border:solid 1px #9aafe5;
margin-right:2px;
}
#pagination-digg .previous-off,
#pagination-digg .next-off {
border:solid 1px #DEDEDE;
color:#888888;
display:block;
float:left;
font-weight:bold;
margin-right:2px;
padding:3px 4px;
}
#pagination-digg .next a,
#pagination-digg .previous a {
font-weight:bold;
}
#pagination-digg .active{
background:#2e6ab1;
color:#FFFFFF;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-digg a:link,
#pagination-digg a:visited {
color:#0e509e;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-digg a:hover{
border:solid 1px #0e509e;
}Простая пагинация
Если вам нравится чистый дизайн без всяких примочек то этот пример покажет как создать очень простую пагинацию которая выглядит так:
HTML структура такая же как и двух предыдущих. Правдо опять надо будет поменять ID для <ul> теперь на “pagination-clean”:
<ul id="pagination-clean">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul>Css для такого типа пагинации будет:
ul{border:0; margin:0; padding:0;}
#pagination-clean li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
#pagination-clean li, #pagination-clean a{
border:solid 1px #DEDEDE;
margin-right:2px;
}
#pagination-clean .previous-off,
#pagination-clean .next-off {
color:#888888;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-clean .next a,
#pagination-clean .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-clean .active{
color:#00000;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-clean a:link,
#pagination-clean a:visited {
color:#0033CC;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-clean a:hover{
text-decoration:none;
}Вот такой у меня получился урок. Думаю, он вам будет полезен.
На этом я буду с вами прощаться и до скорых встреч!
С вами был — ваш Юрич!
P.S. Постараюсь больше так на долго не пропадать и не разочаровывать вас. Оставляйте комментарии, так будет стимул писать чаще полезных для вас статей!
))) Совершенно верно
А я то думал, что на каждую кнопку пагинации нужно подключать ссылку на другую страницу. А оказывается содержимое одной страницы разбивается на части.
Я тоже себе так сделал