В этом руководстве объясняется, как создать нумерацию страниц для результатов поиска или более в целом, чтобы разбить длинный список записей на несколько страниц. Этот вопрос я часто получаю, поэтому я решил опубликовать очень простую статью, в которой объясняется, как разработать идеальный стиль нумерации страниц, используя несколько строк кода HTML и CSS.
[Img_assist | NID = 3986 | название = | убывание = | ссылка = нет | Align = нет | ширина = 420 | высота = 110]
Это руководство также включает HTML / CSS-код для реализации стиля Flickr, Digg-like, Clean pagination, готового для использования в ваших веб-проектах.
Обновление от 17 марта 2008: Мои друзья Симоне Савери решили некоторые проблемы с IE6 и IE7.
Загрузить этот учебник (оригинал)
Загрузить этот учебник (версия Simone Saveri)
Т ypical структура разбиения на страницы
Следующее изображение представляет пример типичной структуры пагинации:
[Img_assist | NID = 3987 | название = | убывание = | ссылка = нет | Align = нет | ширина = 335 | высота = 162]
В целом вы можете выделить четыре основных элемента:
—
Кнопка « Предыдущая / Следующая» (отключена)
—
Текущая активная страница—
Селектор стандартной страницы—
Кнопка « Предыдущая / Следующая» (включена)
Вы можете создать эту структуру, используя список HTML (
<ul> ), который содержит несколько
элементов <li> (по одному для каждого элемента нумерации страниц) и применить идентификатор к
списку <ul>, чтобы назначить конкретный стиль нумерации страниц текущему списку. Взгляните на эти уроки для объяснения.
Flickr-подобная нумерация страниц: HTML Code
Изображение, которое вы хотите создать в стиле Flickr-нумерации страниц, которое выглядит следующим образом:
[Img_assist | NID = 3988 | название = | убывание = | ссылка = нет | Align = нет | ширина = 266 | Высота = 46]
HTML-код очень прост, и вы можете повторно использовать эту структуру во всех стилях пагинации, которые вы хотите, только изменив идентификатор <ul> (в этом случае я добавил pagination-flickr , выделенный жирным шрифтом в коде ниже):
<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).
Flickr-подобная нумерация страниц: CSS-код
Это очень просто:
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-подобная нумерация страниц: HTML Code
Хорошо, теперь вы хотите разработать Digg-подобный стиль нумерации страниц, который выглядит следующим образом:
[Img_assist | NID = 3989 | название = | убывание = | ссылка = нет | Align = нет | ширина = 277 | Высота = 33]
Из предыдущего урока скопируйте и вставьте структуру HTML. Вам нужно только изменить идентификатор <ul> (« pagination-digg » вместо « pagination-flickr »):
<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>
Digg-подобная нумерация страниц: CSS Code
Код CSS очень похож на предыдущий пример, похожий на Flickr. Вам нужно всего лишь изменить некоторые атрибуты и изменить # pagination-flikr 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 Code
Если вам нравится минимальный, чистый дизайн, этот пример показывает, как создать очень чистый стиль нумерации страниц, который выглядит следующим образом:
[Img_assist | NID = 3990 | название = | убывание = | ссылка = нет | Align = нет | ширина = 270 | высота = 34]
Структура HTML такая же, как в двух предыдущих примерах. Единственное, что вам нужно изменить, это идентификатор <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-код
Код 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;
}