• Главная
• Видеоуроки
• PHP
• JavaScript
• CSS
• HTML
• Сервисы
• Статьи
• Оффтоп

• Главная
• ->
• Материалы
• ->
• Умные страницы: Постраничная навигация (Pagination) средствами jQuery

Умные страницы: Постраничная навигация (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:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх