UI-компоненты №15. Кнопка "показать еще"

  Рет қаралды 12,476

MaxGraph - cайты как страсть

MaxGraph - cайты как страсть

2 жыл бұрын

Привет!
В этой части ui-компонентов я покажу, как сделать кнопку "показать еще", по клику на которую будут появляться новые карточки товара
github.com/maxdenaro/maxgraph... - готовая верстка на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
Для заказа верстки обращайтесь в телеграм @maxdenaro
#ityoutubersru #ui_компоненты #верстка

Пікірлер: 64
@Kolobaka266
@Kolobaka266 2 ай бұрын
Контент на вес золота 🤌🏻
@user-kg6fz5tz2b
@user-kg6fz5tz2b 2 жыл бұрын
Спасибо! Всегда очень полезный контент!
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@Jane-ge7ho
@Jane-ge7ho 2 жыл бұрын
Привет, Макс. Спасибо за видосик:) Очень актуально и все по делу, как всегда!
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@Sung_Jin-VVoo
@Sung_Jin-VVoo 7 ай бұрын
Четко и классно! благодарю 🔥 Выручил)
@kamilyariev2853
@kamilyariev2853 Жыл бұрын
Спасибо большое за видеоролик!Коротко и доходчиво объяснил каждый шаг выполнения!!! Помогли очень👍
@development76
@development76 2 жыл бұрын
Спасибо, твои видео очень полезны
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@EugeneKh.
@EugeneKh. 11 ай бұрын
Автору спасибо, почерпнул для себя новый алгоритм действий. Когда такая задача встала в проекте, изначально попробовал динамически считывать высоты карточек и на основании их значений жестко задавать высоту контейнера. Но с таким подходом оказалось слишком много боли, т.к. карточки были резиновые, их размеры пересчитывались при каждом изменении ширины вьюпорта, + правильно считать высоту карточки с картинкой можно только после окончания лоад события, выходил велосипед лоад => резайз => манипуляция высотой. Не делайте так, лучше скрывайте элементы или делайте полноценную пагинацию. Замечание: резиновый дизайн это круто, пока дело не коснется определения размеров из JS
@user-qf8qs5ss7p
@user-qf8qs5ss7p 2 жыл бұрын
Полезная информация, благодарю 👍🏻
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@delosait
@delosait 2 жыл бұрын
Максим, спасибо большое за видео. Как раз искал именно такой функционал, но кроме всякой ерунды ничего найти не получилось. А тут всё просто, понятно и классно 👍
@maxgraph
@maxgraph 2 жыл бұрын
Отлично)
@bandhdhdh7188
@bandhdhdh7188 2 жыл бұрын
Лол. Недавно искал, как такое сдлать. И тут видео выходит. Повезло повезло.
@maxgraph
@maxgraph 2 жыл бұрын
👍
@INTTable
@INTTable 2 жыл бұрын
спасибо за видос, самая любимая рубрика))
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@ТеттиИва
@ТеттиИва 2 жыл бұрын
Большое спасибо - очень полезное видео!!
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@Soap9613
@Soap9613 2 жыл бұрын
Вот теперь нужно видео как подружать это через Ajax запросы))
@omgpewpew
@omgpewpew 2 жыл бұрын
Спасибо за видео!
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@evgenika7472
@evgenika7472 2 жыл бұрын
Круто. Спасибо!!
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@blackcelebration3588
@blackcelebration3588 2 жыл бұрын
Если делать с бэкендом, то всю эту красоту придётся переписывать. Да и загружать все карточки, а потом скрывать их через display:none не вариант. Было бы интересно посмотреть, например, реализацию через ajax. Вот таких толковых уроков нет.
@maxgraph
@maxgraph 2 жыл бұрын
Да, придётся, я об этом и говорил
@user-xt1ns1br7o
@user-xt1ns1br7o 2 жыл бұрын
Привет. Это можно сделать через json файлы и подгрузка их по клику
@cubedesigne
@cubedesigne 2 жыл бұрын
или json)
@cubedesigne
@cubedesigne 2 жыл бұрын
@@user-xt1ns1br7o Увидел коммент после своего:D
@user-do3xj7nc8w
@user-do3xj7nc8w 2 жыл бұрын
А можете сделать тоже самое только с бэком через ajax, и бд, как раз надо будет зас в проекте это использовать, а то грузить все товары и скрывать их - вообще не вариант. А на просторах Ютуба годного урока по этой теме нет
@luxarmiger5729
@luxarmiger5729 2 жыл бұрын
Привет, Макс, здрав будь!!! 😊🌈😸
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо)
@akw1d
@akw1d 2 жыл бұрын
Лукас. 👍
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо)
@user-vt1oe9ws9s
@user-vt1oe9ws9s Жыл бұрын
Подскажите пожалуйста, как использовать код в видео в, например, отдельно взятом табе, а не на всем сайте?
@kontorasb2754
@kontorasb2754 2 жыл бұрын
супер, как всегда!!!!! можешь запилить видос про фильтр ?
@maxgraph
@maxgraph 2 жыл бұрын
Да можно) но вроде было уже что-то
@haizara3260
@haizara3260 Жыл бұрын
Хороший полезный видос, а можно подсказку как сделать так чтобы когда ты жмёшь на кнопку показать всё, все элементы показываются и появляется кнопка скрыть которая скрывает элементы?
@bekmun
@bekmun 2 жыл бұрын
Спасибо за видео то что искал
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@f8sa7fg41
@f8sa7fg41 Жыл бұрын
спасибо
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста =
@BMikel
@BMikel 2 жыл бұрын
Супер. Всегда искал подобный функционал но все время то джКвери то какие-то кривые решения. Наконец-то появилось на этом канале. Вот интересно только, а если нужно такой функционал не в одиночном применении, а на нескольких страницах(множественном)? Может как-то можно изменить джс код, функцию переписать?
@maxgraph
@maxgraph 2 жыл бұрын
Да просто те же классы сделать. Или дата атрибутами Так как будут разные страницы, не будет проблем
@Web..223
@Web..223 4 ай бұрын
Здравствуйте, а как обратно сдвинуть?
@user-fj7hr6ri3g
@user-fj7hr6ri3g 6 ай бұрын
а как сделать кнопку когда есть не сколько категории.
@johncanvas4617
@johncanvas4617 Жыл бұрын
В скриптах лучше использовать селекторы с префиксом js. Например: js-show-more-btn
@maxgraph
@maxgraph Жыл бұрын
Чем это лучше?
@johncanvas4617
@johncanvas4617 Жыл бұрын
@@maxgraph css-классы могут поменяться, а с префиксом js обычно не трогают
@random3360
@random3360 Жыл бұрын
привет, еще бы было бы здорово учитывать размер экрана при адаптиве чтобы можно было изменять число видимых и показывающихся элементов при клике, типа как прописать это в этом коде?
@maxgraph
@maxgraph Жыл бұрын
Через проверку matchMedia можно
@glloney
@glloney Жыл бұрын
А если такую же кнопку реализовать на общей странице со списком статей, то у тех статей, что постепенно будут залезать под эту кнопку, не возникнет проблем с индексацией в поисковой системе?
@maxgraph
@maxgraph Жыл бұрын
Нет, не должно
@adam43494
@adam43494 Жыл бұрын
Только не забывайте, что при display:none, компьютер задействует ресурсы процессора, так что этот способ подойдет только для небольшого кол-ва карточек)
@kerusdc8322
@kerusdc8322 Жыл бұрын
а как действовать, если не 10-20 карточек, а 100 грузится в категорию?
@adam43494
@adam43494 Жыл бұрын
@@kerusdc8322 использовать метод slice, который ограничит массив карточек, и увеличивать его второй параметр нажатием кнопки "показать еще". Как вариант)
@kerusdc8322
@kerusdc8322 2 жыл бұрын
Не учли момент, когда на странице уже мало товаров и клик по кнопке не покажет большее количество. Как в таком случае просчитать и скрыть кнопку?
@maxgraph
@maxgraph 2 жыл бұрын
Не понял, что значит уже мало товаров)
@kerusdc8322
@kerusdc8322 2 жыл бұрын
@@maxgraph в примере изначально 6 товаров. а если в категории только 3 товара, то зачем там кнопка Показать еще? ведь клик по ней не отобразит больше товаров я об этом.
@user-vt1oe9ws9s
@user-vt1oe9ws9s Жыл бұрын
@@kerusdc8322 можно перед addEventListener дописать: if (apartmentsLenghts > items) { showMoreBtn.style.display = 'block'; } В css изначально у кнопки указать display: none;
@kerusdc8322
@kerusdc8322 Жыл бұрын
@@user-vt1oe9ws9s apartmentsLenghts is not defined
@kerusdc8322
@kerusdc8322 Жыл бұрын
@@user-vt1oe9ws9s подправил и теперь работает, спасибо большое 😉: if (productsLength > items) { showMore.style.display = 'inline-block'; };
Простая адаптивная флекс-сетка с помощью calc
10:08
MaxGraph - cайты как страсть
Рет қаралды 4,6 М.
How Many Balloons Does It Take To Fly?
00:18
MrBeast
Рет қаралды 142 МЛН
100❤️
00:19
MY💝No War🤝
Рет қаралды 22 МЛН
JS-решения №12. Базовая анимация при скролле на чистом JS
24:19
MaxGraph - cайты как страсть
Рет қаралды 29 М.
UI-компоненты №13. Валидация и отправка формы на почту в 2022
27:59
MaxGraph - cайты как страсть
Рет қаралды 19 М.
JS-плагины №10. Range слайдер для цены - nouislider.js
35:24
MaxGraph - cайты как страсть
Рет қаралды 20 М.
Load More Pagination React
10:07
h3webdev
Рет қаралды 27 М.
Вывод информации на сайт из БД
19:14
Михаил
Рет қаралды 26 М.