Постраничная навигация для содержания с использованием jQuery
В данном уроке мы сделаем генератор постраничной навигации, который будет разделять содержание на основе заданной высоты элемента. Также, при переключении страниц будет использоваться визуальный эффект затухания.
Разметка HTML
В разметке должны содержаться элементы, которые станут основой навигации:
<!DOCTYPE html> <html lang="ru" > <head> <meta charset="utf-8" /> <title>Постраничная навигация на jQuery | Материалы сайта RUSELLER.COM</title> <link rel="stylesheet" href="/css/main.css" type="text/css" /> <script src="/js/jquery.min.js"></script> <script src="/js/main.js"></script> </head> <body> <div class="example"> <h2>Заголовок</h2> <div id="content" class="content"> . . . Содержание . . . </div> <hr /> <div class="pagination"> <ul> <li><a href="#" id="prev" class="prevnext">« Туда</a></li> <li><a href="#" id="next" class="prevnext">Сюда »</a></li> </ul> <br /> <div id="page_number" class="page_number">1</div> </div> </div> </body> </html>
CSS
body{background:#eee;margin:0;padding:0} .example{background:#FFF;width:800px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px} #content { position:relative; height:400px; } #content .page { position:absolute; top:0px; } .pagination{ padding: 2px; } .pagination ul{ margin: 0; padding: 0; text-align: left; font-size: 16px; } .pagination li{ list-style-type: none; display: inline; padding-bottom: 1px; } .pagination a, .pagination a:visited{ padding: 0 5px; border: 1px solid #9aafe5; text-decoration: none; color: #2e6ab1; } .pagination a:hover, .pagination a:active{ border: 1px solid #2b66a5; color: #000; background-color: #FFFF80; } .pagination a.prevnext{ font-weight: bold; } .page_number { border: 1px solid #9aafe5; color: #2e6ab1; padding:5px; text-align: center; width: 20px; }
jQuery
Код представляет собой пример построения плагина для jQuery. При инициализации плагин принимает два параметра - высоту страницы и время переключения между страницами.
(function($){ $.fn.extend({ MyPagination: function(options) { var defaults = { height: 400, fadeSpeed: 400 }; var options = $.extend(defaults, options); // Создаем ссылку на объект var objContent = $(this); // Внутренние переменные var fullPages = new Array(); var subPages = new Array(); var height = 0; var lastPage = 1; var paginatePages; // Функция инициализации init = function() { objContent.children().each(function(i){ if (height + this.clientHeight > options.height) { fullPages.push(subPages); subPages = new Array(); height = 0; } height += this.clientHeight; subPages.push(this); }); if (height > 0) { fullPages.push(subPages); } // Оборачиваем каждую полную страницу $(fullPages).wrap("<div class='page'></div>"); // Скрываем все обернутые страницы objContent.children().hide(); // Создаем коллекцию для навигации paginatePages = objContent.children(); // Показываем первую страницу showPage(lastPage); // Выводим элементы управления showPagination($(paginatePages).length); }; // Функция обновления счетчика updateCounter = function(i) { $('#page_number').html(i); }; // Функция вывода страницы showPage = function(page) { i = page - 1; if (paginatePages[i]) { // Скрываем старую страницу, показываем новую $(paginatePages[lastPage]).fadeOut(options.fadeSpeed); lastPage = i; $(paginatePages[lastPage]).fadeIn(options.fadeSpeed); // и обновлем счетчик updateCounter(page); } }; // Функция вывода навигации (выводим номера страниц) showPagination = function(numPages) { var pagins = ''; for (var i = 1; i <= numPages; i++) { pagins += '<li><a href="#" onclick="showPage(' + i + '); return false;">' + i + '</a></li>'; } $('.pagination li:first-child').after(pagins); }; // Выполняем инициализацию init(); // Привязываем два события - нажатие на кнопке "Предыдущая страница" $('.pagination #prev').click(function() { showPage(lastPage); }); // и "Следующая страница" $('.pagination #next').click(function() { showPage(lastPage+2); }); } }); })(jQuery); // Инициализация при загрузке страницы jQuery(window).load(function() { $('#content').MyPagination({height: 400, fadeSpeed: 400}); });
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/U6ahUV1hvSw/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Мудрость приносит следующие три плода: дар хорошо мыслить, хорошо говорить и хорошо поступать Демокрит - (около 460 до н.э.- около 360 до н.э.) - древнегреческий философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.