Постраничная навигация для содержания с использованием 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-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Есть три способа отвечать на вопросы: сказать необходимое, отвечать с приветливостью и – наговорить лишнего Плутарх - (ок. 46 — ок.120) - древнегреческий писатель, историк |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.