Что такое нумерация страниц?

Разбиение на страницы, как объясняет Википедия, звучит так: это процесс разделения документа на отдельные страницы, будь то электронные страницы или печатные страницы». В контексте веб-разработки разбиение на страницы означает отображение контента на разных «страницах» — новые вопросы появляются на другой странице, когда пользователь нажимает кнопку «следующая страница». Обратите внимание, что я добавляю кавычки к слову страницы, потому что идея заключается не в перелистывании страниц, а в перелистывании разделов на той же странице.

Новичкам очень часто задают вопрос: нужно ли мне создавать несколько 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, из которых веб-разработчики могут выбирать. Здесь я выбрал только два, которые я считаю довольно изящными и простыми в реализации.

Это отличный плагин jQuery для простой разбивки на страницы. Он поставляется с хорошими настраиваемыми параметрами, но сохраняет вывод чистым и легко читаемым:

По сравнению с Pagination.js, Greensock больше фокусируется на веб-анимации. В ScrollTrigger есть отличный пример того, как новые страницы появляются при прокрутке пользователем — очень похоже на просмотр слайдов PPT. Демонстрационный код находится здесь: https://codepen.io/GreenSock/pen/YzygYvM

Выше приведены три метода, которые я считаю полезными для нумерации страниц для начинающих. Я надеюсь, что эта статья поможет вам стать лучше в веб-разработке.