Что такое нумерация страниц?
Разбиение на страницы, как объясняет Википедия, звучит так: это процесс разделения документа на отдельные страницы, будь то электронные страницы или печатные страницы». В контексте веб-разработки разбиение на страницы означает отображение контента на разных «страницах» — новые вопросы появляются на другой странице, когда пользователь нажимает кнопку «следующая страница». Обратите внимание, что я добавляю кавычки к слову страницы, потому что идея заключается не в перелистывании страниц, а в перелистывании разделов на той же странице.
Новичкам очень часто задают вопрос: нужно ли мне создавать несколько html-файлов (по одному на каждую страницу) для работы нумерации страниц? Ответ Нет. В этой статье я расскажу о 3 простых в использовании и удобных для начинающих способах создания нумерации страниц в Javascript.
Метод 1: замена text.content
Это, наверное, самое простое для начала. Концепция этого проста: вы просто заменяете или обновляете контент, отображаемый на странице. В качестве примера возьмем мой сайт о викторинах по коду (чтобы увидеть полное содержание, см.: https://siennameow.github.io/Code-Quiz/). Пользователям предлагается по одному вопросу за раз, и при нажатии кнопки отправки появляется новый вопрос. Процесс выполняется с помощью прослушивателя событий при нажатии кнопки, который вызывает функцию text.content и присваивает разделу в html-файле новое значение.
Ниже приведен html-файл и javascript для справки.
- В html-файле есть раздел, содержащий вопросы.
- JavaScript будет обновлять содержимое в разделе с помощью прослушивателя событий кнопки при нажатии.
Способ 2: добавить класс
Это требует некоторых базовых знаний о том, как класс работает в javascript. Пользователь может определить класс с определенными атрибутами css (например, красный шрифт, зеленый фон и т. д.), а затем назначить этот класс объекту в html с помощью функции javascript addClass. Пример ниже от w3school дает хорошую иллюстрацию (https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_addclass):
Слово изменилось с черного цвета на красный цвет с размером 150% с помощью следующих шагов:
- Стиль класса определяется:
.intro {
размер шрифта: 150 %;
цвет: красный;
}
- Добавлен прослушиватель событий, чтобы добавить класс «intro» к объекту.
$("кнопка").click(function(){
$("p:first").addClass("intro")
});
Познакомившись с основами addClass, теперь давайте рассмотрим пример процесса создания веб-сайта с викториной по коду от Яфи и Джеймса (https://www.sitepoint.com/simple-javascript-quiz/). В этом примере они создали класс под названием активный слайд, который в основном помещает содержимое вверху страницы (z-index:2).
.активный слайд {
непрозрачность: 1;
z-индекс: 2;
}
Затем всякий раз, когда пользователь нажимает кнопку, текущий вопрос удаляет класс «активный слайд», а следующий вопрос получает этот класс, таким образом заменяя текущий вопрос на странице.
функция showSlide(n) {
слайды [текущий слайд]. classList.remove («активный слайд»);
слайды [n].classList.add («активный слайд»);
……
}
Способ 3: сторонние API и JS-библиотека
Этот метод требует некоторого понимания того, как работает API и как интегрировать их в ваш javascript. На рынке с открытым исходным кодом есть несколько сторонних API, из которых веб-разработчики могут выбирать. Здесь я выбрал только два, которые я считаю довольно изящными и простыми в реализации.
- Pagination.js(https://pagination.js.org/)
Это отличный плагин jQuery для простой разбивки на страницы. Он поставляется с хорошими настраиваемыми параметрами, но сохраняет вывод чистым и легко читаемым:
- ScrollTrigger от Greensock (https://greensock.com/st-demos/)
По сравнению с Pagination.js, Greensock больше фокусируется на веб-анимации. В ScrollTrigger есть отличный пример того, как новые страницы появляются при прокрутке пользователем — очень похоже на просмотр слайдов PPT. Демонстрационный код находится здесь: https://codepen.io/GreenSock/pen/YzygYvM
Выше приведены три метода, которые я считаю полезными для нумерации страниц для начинающих. Я надеюсь, что эта статья поможет вам стать лучше в веб-разработке.