Кнопка Показать больше/Показать меньше
Сниппет, создающий кнопку, которая раскрывает дополнительный текст на JavaScript.
Пример текста
Как уже неоднократно упомянуто, стремящиеся вытеснить традиционное производство, нанотехнологии освещают чрезвычайно . интересные особенности картины в целом, однако конкретные выводы, разумеется, объединены в целые кластеры себе подобных! Прежде всего, курс на социально-ориентированный национальный проект прекрасно подходит для реализации системы массового участия.
Шаг 1) Добавляем HTML:
Как уже неоднократно упомянуто, стремящиеся вытеснить традиционное производство, нанотехнологии освещают чрезвычайно. интересные особенности картины в целом, однако конкретные выводы, разумеется, объединены в целые кластеры себе подобных! Прежде всего, курс на социально-ориентированный национальный проект прекрасно подходит для реализации системы массового участия.
Шаг 2) Добавляем CSS:
#more
Шаг 3) Добавляем JavaScript:
Курсы javascript
Из-за того, что сайт очень большой,там очень много картинок, он долго загружается а на некоторых телефонах вообще отказывается грузиться.
Если возможно, подскажите скрипт чтобы было к примеру 12 тегов li (товаров) а дальше кнопка «показать еще» и при нажатии подгружались еще 12 и т.д.
Или возможно есть другое решение проблемы?
05.05.2018, 14:51
Регистрация: 01.12.2016
Сообщений: 3,650
http://api.jquery.com/load/
вот этот метод вам должен подойти.
07.05.2018, 23:13
Регистрация: 04.07.2016
Сообщений: 76
Пока ничего не получилось, судя по примерам там в главную страницу html подгружается информация с других html страниц, а у меня все на одной. Я вот тоже пример нашел:
https://ruseller.com/lessons.php?rub=32&id=2017
Судя по демо, то что нужно, но посмотрев исходники тоже вижу, что подгрузка в основную страницу идет из других файлов.
Я конечно могу свою главную страницу, разбить на 100 отдельных и подгружать их нажатием кнопки, но ведь возможно же это и на одной сделать?
08.05.2018, 00:59
Регистрация: 01.12.2016
Сообщений: 3,650
Leon2110,
если у вас уже все структура загружена в одной странице, ваш сайт так и будет тормозить.
разбивать на кучу страниц не нужно, обратите внимание на этот пример.
$( "#result" ).load( "ajax/test.html #container" );
подгружаем в блок result блок container со страницы test, а в этой странице может быть далеко не один такой блок.
Кнопка «Показать еще» на HTML и CSS
Безусловно, что показ контента вашего на сайте очень важен, но однако на веб-странице так много контента и очень мало места. И прежде чем гость или пользователь перестанет прокручивать страницу, и не найдет, то что ему нужно. И для этого был создан элемент функций для посетителей веб-сайта, где можно внедрить этот метод методы для отображения контента наиболее интуитивно понятным способом.
Теперь эту функцию, назовем ее «Загрузить больше» может быть реализован с помощью CSS, где не нужно применять JavaScript, JQuery или библиотеки. Также вы можете расположить изначально скрытым любой функционал или материал, но так, что изначально будет понятно, что при клике далее будет находиться. Но думаю вы поняли смысл этого материала, который самостоятельно можете создать.
Изначально при открытие сайта так наблюдаем:
При клике с дальнейшим просмотром открывается остальная информация:
Установочный процесс:
.zagruska-proizvod-container <
background: #fff;
width: 500px;
min-height: 500px;
margin: 20px auto;
position: relative;
>
.zagruska-proizvod-container ul <
list-style-type: none;
padding: 0;
>
.zagruska-proizvod-container ul:after <
content: «»;
display: table;
clear: both;
>
.zagruska-proizvod-container ul li <
width: calc(25% — 10px);
margin: 10px 5px 0;
height: 100px;
background: #1D95F8;
color: #fff;
float: left;
border-radius: 2px;
>
.zagruska-proizvod-container ul li:nth-child(1n + 5) <
max-height: 0;
opacity: 0;
transition: 0.1s ease-in;
>
.zagruska-proizvod-container .zagruska-proizvod-btn <
width: 264px;
line-height: 42px;
border-radius: 5px;
margin: 0 auto;
display: block;
background: #3d3c50;
color: #f5f2f2;
cursor: pointer;
text-align: center;
>
.zagruska-proizvod-container .zagruska-proizvod-btn:hover <
background: #211e1e;
>
.zagruska-proizvod-container .zagruska-proizvod-btn .loaded <
display: none;
>
.zagruska-proizvod-container #zagruska-proizvod <
display: none;
>
.zagruska-proizvod-container #zagruska-proizvod:checked ~ 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;
>
Но, где при всем этом, предоставляя, объем контента, который может потребоваться посетителям, а просто нажать кнопку, где откроется остальном материал или изображение, что по умолчанию он был скрыт, и только вверх можно было рассмотреть.
Это функция довольно актуальна, которую вы должны использовать на своем сайте, или для тех веб разработчиков, где считают, что на сайте мало место, и здесь будет отличным решение применить это метод.
Видео обзор:
Как сделать кнопку «показать еще»?
В исходном коде список всех фильмов. При нажатии на кнопку «показать еще» появляются по 4 фильма. Это важно, потому что надо не подгружать страницы, а именно разбить длинный список контента.
Ответил: hent4ib
у webrambo был скрипт
http://webrambo.ru/101-ajax-podgruzka-novostey-dle.html
2 комментария
Похожие вопросы
Как организовать список серий на сайте в выпадающем списке
13.10.2011 Romario Общие вопросы по вёрстке, Модули, Хаки
Реализация всплывающих подсказок с выводом контента в dle
01.10.2012 Prowockator Общие вопросы по вёрстке
Вкладка при нажатии на кнопку
21.12.2012 jarrro Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)
При нажатии на кнопку «добавить комментарий» страница поднимается вверх
29.01.2014 serg91100 Общие вопросы по вёрстке, Хаки, Ламерские вопросы
Как сделать кнопку добавить отзыв?
10.09.2014 skinny Общие вопросы, Общие вопросы по вёрстке, Стили (CSS)
Как добавить два изображения по бокам от «контента» сайта?
01.12.2015 fops88 Общие вопросы по вёрстке
Как сверстать шаблон вывода контента, 2 блока по бокам и один между ними?
15.10.2016 baseroad Общие вопросы по вёрстке, Шаблоны (TPL)
Как сделать, чтобы при выборе «область А» из доп. полей, подгружался другой список при доб. новости?
04.03.2017 lissp Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL)
Как сделать поочередное появление полей при добавлении новости?
14.03.2017 Stasiq Общие вопросы по вёрстке
Как выполнять одновременно 2 действия при нажатии на кнопку?
17.03.2018 Railway_Academy Общие вопросы по вёрстке
Последние события
HbIXA | Wiki разметка DLE 1
HbIXA
Wiki разметка DLE
21-11-2023, 23:15
Можно внедрить сторонние готовые модули, но с установкой через плагины DLE
Sinoid | Как сделать вывод статистики общего коли . 38
Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
21-11-2023, 19:50
rewenas, Я ещё не начал делать. Но если как у тебя с сортировкой, то мне так и нужно. Покажи HTML-код в stats.tpl пжл.
rewenas | Как сделать вывод статистики общего коли . 38
rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
21-11-2023, 18:24
Все равно я тебя немного не понимаю, ну да ладно. дерзай
У меня получилось так:
Sinoid | Как сделать вывод статистики общего коли . 38
Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
21-11-2023, 01:06
Про динамические теги я сначала не понял. Но теперь сообразил, как последним сценарием
foreach ($resultArray as $item) <
$tpl->set(», $item[‘land’]);
$tpl->set(», $item[‘count_users’]);
echo $tpl->result[‘stats’];
>
пользоваться. Мне было непонятно, как вызывать кол-во по каждой стране, тем более когда неизвестно, какие страны актуальны. Тут тогда создаваемые этим циклом теги не нужны. В скрипте пропишу сканирование по всем 249 тегам , которые будут выводиться в скрытый список по всем странам ZZ. Если PHP-сценарий не сформировал для страны тег , то HTML его не выводит — там вместо числа юзеров будет пусто. Затем скрипт сортирует полученные ненулевые (где вышло непустое значение) теги и распределяет по убыванию количества юзеров в таблицу линейной диаграммы.
Sinoid | Как сделать вывод статистики общего коли . 38
Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
21-11-2023, 00:40
rewenas, По нагрузке будет понятно уже после запуска сайта. Так что надо пробовать. Если что, потом можно отключить такую статистику. Да и запрашивать её будут далеко не все пользователи. Сервер на DLE постоянно высчитывает, например, количество просмотров каждой новости и кол-во комментариев к новости, а это гораздо бОльшая нагрузка при сотнях новостей, чем считать страны юзеров.
Sinoid | Как сделать вывод статистики общего коли . 38
Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
21-11-2023, 00:25
«Да не сможет ваш скрипт просканировать эти теги». Ну вот я сначала так и думал. Мне же не за что цепляться напрямую, чтобы вытащить эти данные в обработку для стилей и для диаграммы. Но теперь сообразил, что на самом деле, если в составе выдачи будут ключи кодов стран по признаку после особого символа, например, выдача будет такой строкой:
‘@RU: 638# @CN: 1253# @US: 920#’ то скрипт сможет вытаскивать код страны между @ и : А количество юзеров страны — между : и # Просто чуть больше писать JS-кода. Но в JS есть функции работы со строками, так что решаемо.
Тогда думаю, можно выводить такую выдачу в скрытое поле, чтобы оттуда обрабатывать скриптом для графической выдачи на страницу. Нужно прописать тогда новый PHP-сценарий и 1 тег в нём для выдачи такой строки. Оптимизация тогда будет в том, что сервер просчитывает только ненулевые страны и выдаёт всего 1 тег в кэш для выдачи ненулевых стран по алфавиту, а нагрузка по сортировке и графической выдаче будет на стороне пользователя. Можешь тогда такой PHP-сценарий оформить? Представим, что есть простой массив (без ключей) всех 249 кодов стран в PHP-файле:
$iso_codes = [«AD», «AE», «AF», . , «ZW»];
Напомню, именно в таком виде коды содержатся в доп. поле каждого юзера, кто выбрал страну.
rewenas | Как сделать вывод статистики общего коли . 38
rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
21-11-2023, 00:18
«Если в PHP создать 249 тегов»
Не надо создавать 249 тегов. Код создаёт один так называемый динамический тег. В который в шаблоне вы подставляете двухбуквенный код нужной вам страны и он выводит необходимый результат. Но вы же не можете знать какие страны будут у вас добавлять пользователи. Ведь так же. Поэтому логичнее будет дать возможность коду самому циклом пройтись и выбрать только те страны что пользователи уже отметили и занести все в кеш. Который с некой переодичностью очищается, следовательно данные постоянно обновляются. Вопрос лишь в нагрузке, но тут я хз
rewenas | Как сделать вывод статистики общего коли . 38
rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
21-11-2023, 00:09
» то как я смогу стилизовать его?»очень легко, это всего лишь вопрос CSS
rewenas | Как сделать вывод статистики общего коли . 38
rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
21-11-2023, 00:01
Словил тот же глюк с телефона , что и у тебя с невозможностью нажать на кнопку цитаты, поэтому отвечу так
» Мне нужно, чтобы на страницу статистики (в то место, где я укажу) выводился список строк, в каждой из которых я смогу вставить код страны»
Мой код который я вам писал выше как раз это делает.
«Затем скрипт сканирует эту выдачу и оставляет только ненулевые страны, переводит код в название страны (из массива-библиотеки) и выдаёт например, 50 строк»
Да не сможет ваш скрипт просканировать эти теги, он их просто не поймет Ему нужны переменные которые мы занесли в массив и которые содержат кючи
Sinoid | Как сделать вывод статистики общего коли . 38
Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
20-11-2023, 23:36
- Общее количество пользователей из AD:
- Общее количество пользователей из AE:
.
- Общее количество пользователей из ZW:
- Сделать модуль 0
- Wiki разметка DLE 1
- Sign In with Apple для DLE 14 2
- Модуль парсер ссылки с донора и з… 0
- Модификация аватарок DLE 16.1 27
- Модуль — Парсер статей и интеграц… 0
- Добавить поддержку для … 4
- Как обрезать название статьи 1
- Скрипт автозаполнения полей 3
- Парсер/граббер или конвертация БД 1
- Бесконечная подгрузка полной ново… 0
- Запоминание открытой вкладки и со… 0
- Авторизация пользователей через Т… 0
- GeoIP — показ информации в зависи… 0
- Push-уведомление через OneSignal.… 0
- Giphy for comments (TinyMCE) 4
- Множественные опросы — модуль Mul… 0
- Расширенные закладки 0
- Расширение возможностей аккаунта … 0
- ChatGPT Driver 2