script.js код, реализующий кнопку «Подробнее» для просмотра статьи
я совсем ещё зеленый в этой теме,подскажите пожалуйста.Как реализовать кнопку подробнее через js ,я хочу сделать так: overflow: hidden; при нажатии заменить на overflow: visible;
Возможно ли это как то сделать через js?
Не очень понял, что это "Текст,который будет не вмещаться в рамки". Но в остальном можно использовать класс модификатор, к примеру "more". Который по кнопке будет добавлять необходимые вам стили и при повторном клике возвращать обратно. Надеюсь правильно понял вопрос.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.5.24.43458
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Кнопка «Показать ещё» на чистом JavaScript
Кнопка «Показать ещё» обычно применяется, когда у нас очень много контента и его нужно вывести не весь сразу, а постепенно (небольшими порциями). Для этого весь контент разбивается на страницы.
При этом сначала отображается только первая страница (на этом примере это две карточки) и кнопка «Загрузить ещё» . Если пользователь хочет посмотреть ещё записи ( следующую страницу ), то он просто нажимает на кнопку .
Это похоже на постраничную навигацию, но только предыдущие записи остаются на месте, а новые добавляются после них . При этом обычно это на сайте реализуется с использованием AJAX, то есть без перезагрузки страницы.
Шаг 1. Написание backend-кода на PHP
Перед тем как перейти к разработке frontend-кода, необходимо сначала написать серверный сценарий, который будет обрабатывать наш запрос и возвращать ответ в формате JSON. Можно конечно и в формате HTML, но это уже будет очень простой случай, который в рамках этой статьи рассматривать не будем.
Серверный сценарий напишем, например, на PHP. Кроме этого, не забываем, чтобы он работал необходимо установить веб-сервер с поддержкой PHP на локальную машину.
Для написания кода на PHP создадим файл, например, с именем more.php в корне сайта.
Данные в этом примере будем получать для простоты из подготовленного массива, а не из базы данных:
Количество записей на одной странице будем определять с помощью константы LIMIT :
Сейчас у нас одна страница будет состоять из 2 записей. Всего записей (элементов в массиве) узнаем с помощью функции count :
Номер страницы ( page ) будем передавать серверу через POST. В скрипте на PHP для получения этого значения воспользуемся глобальной переменной $_POST[‘page’] :
Дополнительно на странице клиента будем отображать кроме самих данных ещё их оставшееся количество. Вычисление оставшегося количества записей будем выполнять следующим образом:
Сами отдаваемые данные будем получать как срез массива с помощью array_slice :
Кроме этого, клиенту будем передавать шаблон, который затем с помощью JavaScript будем использовать для генерации HTML-кода карточки:
Возвращать ответ будем в формате JSON. Для этого перед отправкой данных установим соответствующий заголовок:
Отправлять клиенту будем следующий массив данных, который используя функцию json_encode переведём в JSON:
Теперь давайте проверим, что выведет полученный PHP-файл, сохранённый в корне сайта под именем more.php . Для этого откроем браузер и в адресной строке введем путь к нему (в данном случае: http://localhost/more.php ):
В окне браузера мы видим JSON-код, то есть результат выполнения файла more.php на сервере.
Шаг 2. Создание HTML-кода
Теперь, после того как серверный код работает, создадим HTML-страничку index.html :
Все элементы, связанные с кнопкой «Показать ещё» обернём в .cards :
Начнем написание HTML-кода с разметки контейнера для карточек. Добавлять карточки в контейнер будем с помощью JavaScript, поэтому этот элемент у нас будет пустым:
Кроме кнопки у нас ёще будет блок .cards-progress , в котором расположим прогресс-бар и текстовую информацию о количестве показанных карточек:
Ну и сама кнопка:
У кнопки имеется атрибут data-page , который будем использования для хранения количества показанных страниц.
Кнопка у нас имеет svg-иконку, которую создали посредством <use href=»#icon-arrow-repeat»></use> . При этом сама она определена в <svg> с использованием <symbol> , который вставили сразу после открывающего тега <body> :
Шаг 3. Стилизация карточек и кнопки
Создавать CSS-код будем в отдельном файле main.css, который расположим рядом с index.html . Подключение main.css к index.html выполним с помощью <link> :
Вёрстку контейнера ( .card-container ), в который мы будем добавлять карточки, выполним через флексы:
Расстояние между карточками зададим с помощью CSS-свойство gap .
Карточка товара ( .card ) у нас будет состоять из изображения ( .card-img ) и заголовка ( .card-title ). Для оформления самой карточки и её элементов будем использовать следующие стили:
Стили для кнопки:
При нажатии на кнопку она будет переводиться в неактивное состояние ( disabled ). Кроме этого, к ней будет добавляться с помощью JavaScript класс btn-more-loading , который будет активировать CSS-анимацию, и иконка в кнопке будет непрерывно вращаться.
Стилизацию прогресс-бара и дополнительной информации, расположенного рядом с ним, выполним следующим образом:
Прогресс-бар – это очень полезный элемент, который позволяет увидеть пользователям количество показанных и оставшихся карточек. Кроме этого, с помощью него они могут оценить, насколько большим является список и сколько времени им потребуется для просмотра всех элементов.
Вся разметка, связанная с кнопкой «Показать ещё» у нас находятся в корневом элементе .card . Его стилизацию в рамках этого примера выполним так:
То есть ограничим его ширине и выровняем по центру, а также добавим внешние отступы сверху и снизу.
Для скрытия элементов мы будем использовать класс d-none :
В этом примере у нас он используется для скрытия кнопки «Показать ещё», когда все карточки уже отображены и загружать уже больше нечего. Добавляется он в этом случае к элементу с помощью JavaScript. Кроме этого, d-none используется ещё в HTML-коде для скрытия <svg> .
Шаг 4. Добавление функциональности к кнопке с помощью JavaScript
Всю функциональность, связанную с кнопкой на странице, будем выполнять с помощью JavaScript, который напишем без использования каких-либо библиотек. Для этого создадим файл main.js и подключим его к нашей HTML-странице:
Начнём создания JavaScript с выборки кнопки:
Теперь напишем асинхронную функцию, которая будет выполняться при нажатии на кнопку, то есть она у нас будет использоваться в качестве обработчика события click :
Этот код выполняет в следующем порядке вот эти действия:
- переводит кнопку в неактивное состояние, чтобы пользователь не мог выполнить это действие ещё раз пока не завершится текущее;
- включает анимацию для иконки, расположенной в кнопке, посредством установки класса btn-more-loading ;
- отправляет с помощью fetch на сервер запрос методом POST и передаёт в его теле номер запрашиваемой страницы;
- ждёт ответа от сервера в формате JSON;
- отключает видимость кнопки «Загрузить ещё», если мы показали все записи;
- обновляет значение атрибута data-page у кнопки;
- формирует HTML-код карточек, используя полученный шаблон от сервера и данные;
- вставляет сформированный HTML-код карточек в контейнер, используя метод insertAdjacentHTML ;
- обновляет прогресс-бар и количество показанных карточек;
- удаляет класс btn-more-loading , который использовался для включения анимации иконки;
- переводит кнопку в активное состояние, то есть делаем её доступной для следующего нажатия;
Теперь созданную функцию loadMoreCards укажем в качестве обработчика события click :
Формирование первой страницы будем выполнять на клиенте с помощью JavaScript. Для этого просто программным способом кликнем по кнопке «Загрузить ещё»:
Усеченный многострочный текст с кнопкой «показать больше» (только с помощью CSS)
От автора: на днях у нас в офисе зашла дискуссия об усечении текста, и я с тех пор задался вопросом, зашел ли CSS достаточно далеко, чтобы можно было правильно сделать усеченный текст, например, с помощью checkbox.
То есть поддерживает ли он следующее:
Кнопку «Показать больше», которая отображает полный текст при нажатии
text-overflow: ellipsis не поддерживает несколько строк, но я вспомнил о свойстве line-clamp, которое можно использовать для получения многострочного усеченного текста. К счастью, на CSS Tricks есть хорошая рабочая демо-версия, плюс поддержка браузерами теперь довольно приличная. Здорово!
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
А как насчет кнопки «показать больше»?
Создание кнопки «показать больше» требует некоторой нестандартной хакерской работы с CSS. Я не мог использовать button или тег <a>, так как это работа для печально известного хака с чек-боксом, и для этого потребовался элемент метки и… чек-бокс! Итак, я получил следующую разметку:
Поскольку я установил чек-бокс прямо перед абзацем, теперь я мог бы использовать псевдо-класс :checked для переключения, например так:
И действительно, это сделало именно то, что я хотел: нажмите кнопку, и мы переключаемся с усеченного текста к полному. Красиво.
Но… но… но это хак, а что насчет a11y??
В самом деле, хак с чек-боксом не такой уж проблемный в плане семантики, но и не очень доступный, так как большинство просто наивно устанавливают display: none для чек-бокса. Это приводит к нарушению навигации с клавиатуры, поскольку вы не можете переключиться через табуляцию на скрытый чек-бокс, и переключение на метку не помогает, поскольку клавиши пробела / ввода не перенаправляют событие на чек-бокс, как это происходит в случае нажатия кнопки (это имеет смысл, так как обычно вы бы выбрали бы чек-бокс вместо метки).
Я хочу, чтобы мои примеры и демонстрации были как можно более доступными, поэтому, чтобы решить эту проблему, я сначала сделал чек-бокс focusable / tabbable, хотя все еще невидимым, например, так:
Кнопка «Показать еще» на HTML и CSS
Безусловно, что показ контента вашего на сайте очень важен, но однако на веб-странице так много контента и очень мало места. И прежде чем гость или пользователь перестанет прокручивать страницу, и не найдет, то что ему нужно. И для этого был создан элемент функций для посетителей веб-сайта, где можно внедрить этот метод методы для отображения контента наиболее интуитивно понятным способом.
Теперь эту функцию, назовем ее «Загрузить больше» может быть реализован с помощью CSS, где не нужно применять JavaScript, JQuery или библиотеки. Также вы можете расположить изначально скрытым любой функционал или материал, но так, что изначально будет понятно, что при клике далее будет находиться. Но думаю вы поняли смысл этого материала, который самостоятельно можете создать.
Изначально при открытие сайта так наблюдаем:
При клике с дальнейшим просмотром открывается остальная информация:
Установочный процесс:
ul li:nth-child(1n + 5) <
max-height: 999px;
opacity: 1;
transition: 0.2s ease-in;
>
.zagruska-proizvod-container #zagruska-proizvod:checked
.zagruska-proizvod-btn .loaded <
display: block;
>
.zagruska-proizvod-container #zagruska-proizvod:checked
.zagruska-proizvod-btn .unloaded <
display: none;
>
Но, где при всем этом, предоставляя, объем контента, который может потребоваться посетителям, а просто нажать кнопку, где откроется остальном материал или изображение, что по умолчанию он был скрыт, и только вверх можно было рассмотреть.
Это функция довольно актуальна, которую вы должны использовать на своем сайте, или для тех веб разработчиков, где считают, что на сайте мало место, и здесь будет отличным решение применить это метод.