Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Умные страницы: Постраничная навигация (Pagination) средствами jQuery
 |
 |
Исходники |
Пример |
Разбивка контента на отдельные страницы (pagination) - обычное решение при работе с большими объемами информации. Реализуется это обычно посредством передачи номера нужной страницы дополнительному обработчику, который извлекает информацию из базы и возвращает ее в определенной форме. Трудоемкий процесс, но это неизбежное зло. Или нет?
Разве не было бы удобно при работе с небольшими объемами информации иметь контент уже заранее подготовленным, при этом четко организованный и легко доступный?
Сейчас мы с вами будем делать решение на jQuery, которое позволит нам конвертировать обычный неупорядоченный список элементов в дружественный для поисковых систем набор страниц с легкой навигацией. Данный плагин можно использовать для комментариев, слайдшоу или любого другого типа структурированного контента.
Концепция
При вызове плагин разбивает элементы <li>, содержащиеся в неупорядоченном списке на настраиваемое количество групп. Эти группы (или страницы) обтекаются слева, поэтому не видны, так как они обтекают элемент <ul>, которому задано свойство overflow:hidden. Генерируется определенное количество навигационных ссылок, которые перемещают в зону видимости соответствующую страницу с элементами <li>.
Посмотрите на иллюстрацию ниже, чтобы лучше понять идею.
Шаг 1 - XHTML
Первый шаг - это создание разметки XHTML. Плагину нужно предоставить неупорядоченный список <ul> с некоторым количеством элементов <li> внутри него. Ниже представлен код из файла demo.html, который вы найдете в архиве с примером:
<div id="main"> <ul id="holder"> <li>Lorem ipsum dolor sit amet...</li> <li>Lorem ipsum dolor sit amet...</li> <li>Lorem ipsum dolor sit amet...</li> <li>Lorem ipsum dolor sit amet...</li> </ul> </div>
Блок main выступает в роли контейнера для разбитого на страницы элемента <ul>, и к нему применен светло-серый фон. Неупорядоченный список содержит в себе элементы.
В большинстве ситуаций, вероятно, данная разметка будет генерироваться каким-либо фоновым скриптом, освобождая вас от необходимости делать это вручную. Вы можете размещать внутри элементов <li> любой контент, так как размеры автоматически высчитываются jQuery (если вы хотите использовать картинки - помните о том, что нужно указать их ширину и высоту).
Шаг 2 – CSS
После создания разметки займемся приданием ей стилевого оформления. Хорошая идея - использовать стили так, словно у вас и нет этой постраничной навигации, так как плагин зависит от JavaScript. Это означает, что есть вероятность того, что некоторые пользователи не смогут увидеть вашу постраничную навигацию и, соответственно, воспользоваться ею.
styles.css – Часть 1
#main{
/* The main container div */
position:relative;
margin:50px auto;
width:410px;
background:url('img/main_bg.jpg') repeat-x #aeadad;
border:1px solid #CCCCCC;
padding:70px 25px 60px;
/* CSS3 rounded cornenrs */
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
#holder{
/* The unordered list that is to be split into pages */
width:400px;
overflow:hidden;
position:relative;
background:url('img/dark_bg.jpg') repeat #4e5355;
padding-bottom:10px;
/* CSS3 inner shadow (the webkit one is commeted, because Google Chrome
does not like rounded corners combined with inset shadows): */
-moz-box-shadow:0 0 10px #222 inset;
/*-webkit-box-shadow:0 0 10px #222 inset;*/
box-shadow:0 0 10px #222 inset;
}
.swControls{
position:absolute;
margin-top:10px;
}
Перво-наперво придаем стиль блоку main и неупорядоченному списку (последнему присвоен id = holder).
Заметьте, что мы используем эффект тени в CSS3 с атрибутом inset для имитации внутренней тени. Как и в случае с большинством правил CSS3, нам все еще необходимо указывать правила отдельно для определенных браузеров: с движком Mozilla (Firefox) и Webkit (Safri и Chrome).
Вы могли обратить внимание, что версия для webkit закомментирована. Это связано с багом при отрисовке теней в Chrome при одновременном использовании данного свойства всесте со свойством border-radius (тени создаются так, как если бы блок имел прямые углы, игнорируя их скругления и, следовательно, портя эффект).
styles.css – Часть 2
a.swShowPage{
/* The links that initiate the page slide */
background-color:#444444;
float:left;
height:15px;
margin:4px 3px;
text-indent:-9999px;
width:15px;
/*border:1px solid #ccc;*/
/* CSS3 rounded corners */
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
a.swShowPage:hover,
a.swShowPage.active{
background-color:#2993dd;
/* CSS3 inner shadow */
-moz-box-shadow:0 0 7px #1e435d inset;
/*-webkit-box-shadow:0 0 7px #1e435d inset;*/
box-shadow:0 0 7px #1e435d inset;
}
#holder li{
background-color:#F4F4F4;
list-style:none outside none;
margin:10px 10px 0;
padding:20px;
float:left;
/* Regular CSS3 box shadows (not inset): */
-moz-box-shadow:0 0 6px #111111;
-webkit-box-shadow:0 0 6px #111111;
box-shadow:0 0 6px #111111;
}
#holder,
#holder li{
/* Applying rouded corners to both the holder and the holder lis */
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}
.clear{
/* This class clears the floated elements */
clear:both;
}
Во второй части кода мы придаем стиль ссылкам pagination и элементам <li>. Как вы можете видеть, мы применяем скругленные углы одновременно для неупорядоченного списка и элементов <li>, что позволяет избежать дублирования кода.
Завершает код класс clear, используемый для сброса обтекания элементов.
Шаг 3 – jQuery
В завершающей части урока нам нужно включить на страницу последнюю версию библиотеки jQuery. C точки зрения производительности мудро включать все внешние яваскрипты непосредственно перед закрывающим тэгом body, так как скрипты блокируют рендеринг (отрисовку) страницы.
script.js – Часть 1
(function($){
// Creating the sweetPages jQuery plugin:
$.fn.sweetPages = function(opts){
// If no options were passed, create an empty opts object
if(!opts) opts = {};
var resultsPerPage = opts.perPage || 3;
// The plugin works best for unordered lists,
// although OLs would do just as well:
var ul = this;
var li = ul.find('li');
li.each(function(){
// Calculating the height of each li element,
// and storing it with the data method:
var el = $(this);
el.data('height',el.outerHeight(true));
});
// Calculating the total number of pages:
var pagesNumber = Math.ceil(li.length/resultsPerPage);
// If the pages are less than two, do nothing:
if(pagesNumber<2) return this;
// Creating the controls div:
var swControls = $('<div class="swControls">');
for(var i=0;i<pagesNumber;i++)
{
// Slice a portion of the li elements, and wrap it in a swPage div:
li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');
// Adding a link to the swControls div:
swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
}
ul.append(swControls);
Создание JQuery-плагина не так сложно, как вы могли подумать. Нам нужно создать новую функцию как свойство jQuery.fn (или $.fn, как указано здесь). Указатель this этой функции указывает на оригинальный объект JQuery.
Далее мы проверяем существование объекта opts и устанавливаем resultsPerPage соответственно. Это количество элементов <li>, которые будут сгруппированы как одна страница.
Затем мы подсчитываем общее количество страниц функцией Math.ceil(). Она округляет полученный результат в большую сторону до ближайшего целого числа, которое и дает нам верное число страниц.
Теперь, когда у нас есть общее количество страниц, мы можем пройтись циклом for по всем элементам <li>, разбивая их на отдельные группы и обрамляя их в блок swPage, формируя таким образом страницы. Помните о том, что вызов метода slice() в jQuery создает новую группу элементов, оставляя исходный набор нетронутым (в противном случае в каждой итерации цикла мы бы начинали с исходного набора элементов <li>).
script.js – Часть 2
var maxHeight = 0;
var totalWidth = 0;
var swPage = ul.find('.swPage');
swPage.each(function(){
// Looping through all the newly created pages:
var elem = $(this);
var tmpHeight = 0;
elem.find('li').each(function(){tmpHeight+=$(this).data('height');});
if(tmpHeight>maxHeight)
maxHeight = tmpHeight;
totalWidth+=elem.outerWidth();
elem.css('float','left').width(ul.width());
});
swPage.wrapAll('<div class="swSlider" />');
// Setting the height of the ul to the height of the tallest page:
ul.height(maxHeight);
var swSlider = ul.find('.swSlider');
swSlider.append('<div class="clear" />').width(totalWidth);
var hyperLinks = ul.find('a.swShowPage');
hyperLinks.click(function(e){
// If one of the control links is clicked, slide the swSlider div
// (which contains all the pages) and mark it as active:
$(this).addClass('active').siblings().removeClass('active');
swSlider.stop().animate({'margin-left': -(parseInt($(this).text())-1)*ul.width()},'slow');
e.preventDefault();
});
// Mark the first link as active the first time the code runs:
hyperLinks.eq(0).addClass('active');
// Center the control div:
swControls.css({
'left':'50%',
'margin-left':-swControls.width()/2
});
return this;
}})(jQuery);
Во второй части скрипта мы проходим в цикле по новым созданным страницам, устанавливаем им размеры и задаем, чтобы они обтекались слева. В процессе этого мы находим самую "высокую" страницу и, в соответствии с этим, устанавливаем высоту элемента <ul>.
Мы также заключаем страницы в блок swSlider, который достаточно широк для того, чтобы отобразить их "бок о бок". Далее мы отслеживаем событие клика по навигационным ссылкам и перемещаем блок swSlider методом animate. Это создает эффект скольжения (слайдинга), который вы видите в демо.
script.js – Часть 3
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */
// Calling the jQuery plugin and splitting the
// #holder UL into pages of 3 LIs each:
$('#holder').sweetPages({perPage:3});
// The default behaviour of the plugin is to insert the
// page links in the ul, but we need them in the main container:
var controls = $('.swControls').detach();
controls.appendTo('#main');
});
В последней части кода мы просто вызываем плагин и передаем настройку perPage (сколько элементов на страницу отображать). Также обратите внимание на использование метода detach, введенного в jQuery 1.4. Он удаляет элементы из DOM (Объектной Модели Документа), но оставляет нетронутыми все "прослушиватели" событий. Это позволяет нам вынести управляющие ссылки за пределы элемента <ul>, где они находились изначально, сохраняя при этом нужную функциональность.
На этом наша постраничная навигация на jQuery и CSS3 готова!
По материалам tutorialzine.com
Перевод - Дмитрий Науменко
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить JavaScript и PHP:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
