Тёмный

Пишем свой select дропдаун на JS. Подробный урок 

ВебКадеми | Юрий Ключевский
Подписаться 54 тыс.
Просмотров 25 тыс.
50% 1

↓↓↓ Материалы в описании под видео ↓↓↓
В этом уроке мы напишем свой select на HTML, CSS, JS и полностью стилизуем его. Напишем логику на JS, добавим JS полифил поддержку IE 10 и 11. Урок по верстке и JavaScript.
Код с урока: webcademy.ru/files/dropdown-c...
Урок по простой стилизации select на CSS:
• Video
Can I use:
caniuse.com/?search=querySele...
caniuse.com/?search=nodeList%...
Nodelist forEach polyfill:
developer.mozilla.org/en-US/d...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт курса: 27-го Мая 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 3-го Июня 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews

Опубликовано:

 

17 дек 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 65   
@Max-ed4yd
@Max-ed4yd 2 месяца назад
С большим удовольствием посмотрел, взял результат как готовое решение, надо срочно, но для практики по уроку реализую самостоятельно, спасибо Юрий!
@autlady
@autlady 4 месяца назад
Спасибо большое, как раз впервые столкнулась в проекте с такими селектами и это видео мне очень помогло ❤
@Sergey_Klimov
@Sergey_Klimov 2 года назад
Опять задета тема кроссбраузерности) Я смотрел Ваш урок по верстке тестового задания для HTML-верстальщика и оттуда знаю, что forEach не поддерживается експлорером. Жаль что нельзя два лайка поставить)
@niceman5890
@niceman5890 Год назад
Спасибо большое! На эту тему мало видео и руководств
@andreynasuto9734
@andreynasuto9734 2 года назад
Суперподробно и понятно, спасибо огромное!
@user-en4cc9jg5c
@user-en4cc9jg5c 3 года назад
Замечательно видео! Всё в нем есть! Больше нигде ничего не надо искать! Спасибо! И слушать очень приятно))
@ibragimdodov4816
@ibragimdodov4816 Год назад
Отличная подача материала, спасибо за Ваш труд! Всё оч круто!
@uk-lych_sveta
@uk-lych_sveta Год назад
Дружище ты крут, все четко и понятно, особенно когда объяснял JS, только у тебя понял как оно работает, спасибо за отличный контент.
@ea4613
@ea4613 2 года назад
Классное видео и беспомощные option. Четкое объяснение что нужно делать , особенного когда делали js. В эти моменты останавливал видео и пробовал делать сам. Моментов мелких конечно , чтобы просто такой селект сделать - куча. Классно было бы ещё , если вы показали , как удалять обработчики и взаимодействовать со списком с помощью клавиатуры ( доступность) - стрелочками там переключаться и enter-ом выбирать значения. Спасибо за урок. Продолжайте в том же духе 👍
@alexdiz4189
@alexdiz4189 Год назад
шикарные подробные объяснения! идеальный формат👍
@nikomunikabelen8540
@nikomunikabelen8540 Год назад
Отличный урок! Как всегда все максимально подробно. Спасибо!
@Anatoli-bq1pe
@Anatoli-bq1pe Год назад
Как всегда, все четко и по делу. Благодарю!
@denys_kd2373
@denys_kd2373 Год назад
Здорово! Спасибо, Юрий!
@user-te8ov3os2g
@user-te8ov3os2g Год назад
Отличное и полезное видео, спасибо за труд.
@user-kg5pf5zd4u
@user-kg5pf5zd4u 7 месяцев назад
Огромное спасибо! Вы лучшие!!!!
@user-ym5ze4jk2m
@user-ym5ze4jk2m 3 года назад
Супер, спасибо большое!
@user-uh8hz9xi2h
@user-uh8hz9xi2h 3 года назад
Спасибо. Офигенно объясняешь.
@user-qm1cw5eo6v
@user-qm1cw5eo6v 2 года назад
спасибо за информацию!!!колокол включил!!лайк поставил!
@user-ze6um7qg4c
@user-ze6um7qg4c Год назад
Спасибо вам огромное!!! На столько познавательно, увлекательно и главное доступно, без запутанных шагов для новичка, с объяснением каждого действия. Очень сильно помогли в учебе! Слава всемирной паутине) Слава Утьюбу) Ведь они увековечат ВАС и ваши знания!
@victoria-sv
@victoria-sv 2 месяца назад
Спасибо, очень доступно объяснили все!)
@user-fj7hr6ri3g
@user-fj7hr6ri3g 2 года назад
просто гениально помог спасибо
@Sergey_Klimov
@Sergey_Klimov 2 года назад
Только сегодня смотрел на одном сайте зачем же они селекты делают баттоном и вот, Вы показываете тоже самое)) Лайк)
@newsatx5035
@newsatx5035 8 месяцев назад
Спасибо, разжевано дальше некуда, но остался один момент, что делать с Инпутами? Скрыть это понятно, как из них отправить данные на сервер?
@marik9918
@marik9918 3 года назад
Добрый вечер. Очень хорошие уроки. Есть у вас курс по Js? Когда следующее видео выйдет?
@kubris.developer
@kubris.developer 7 месяцев назад
Спасибо, Роман. Если бы рассказали, как реализовать переход Tab-ом на выпадающий список после его открытия и сделали бы переворачивание стрелок - вообще инструкция была бы идеальной!
@aibekbbic7821
@aibekbbic7821 8 месяцев назад
ты тигр, Юрий!
@user-be6cc8ob6u
@user-be6cc8ob6u 2 года назад
Отлично. Вот только есть то, что упущено почти во всех кастомных реализациях селекта - в какую сторону раскрывать список (верх/низ), какой высоты и с прокруткой или без.
@user-vp6bu3fg1o
@user-vp6bu3fg1o 9 месяцев назад
Шикарно
@user-rg8wz2rt9e
@user-rg8wz2rt9e 3 года назад
Круто
@user-xd5qn7eh4q
@user-xd5qn7eh4q 2 года назад
Все классно. Есть вопрос. Ты ведь ловишь клик не по кнопке Dropdownbtn через е.target. Но ведь DropdownItems и dropdownlist ведь тоже не кнопки, получается можно, не писать код при нажатие на listitem который убирает класс visible у списка?
@AntonioBenderas
@AntonioBenderas Год назад
14:48 Js
@lorenzomoreno722
@lorenzomoreno722 3 года назад
Так и не понял , почему после нажатия на select на 45 минуте пропал input и в него больше не выводились данные на экране?
@dukecca
@dukecca Год назад
Как этот селект сделать доступным для перемещения по странице с помощью клавиатуры?
@user-js5rl7fd5x
@user-js5rl7fd5x Год назад
еще бы реализовать поиск по item при клике на селект и вводе буквы с клавиатуры
@inesatananyan7618
@inesatananyan7618 3 года назад
Спасибо за урок .Мне казалось, что JS невозможно объяснить так,чтобы было понятно😀
@user-qm1cw5eo6v
@user-qm1cw5eo6v 2 года назад
подача материала у него очень хорошая,лучшая на просторах ютуба.даже моя бабушка так не может обьяснить ,хотя она программист (40 лет стажа ).с 93-го в сша живёт и работает в гугл.
@user-fj7hr6ri3g
@user-fj7hr6ri3g 2 года назад
@@user-qm1cw5eo6vОткуда 40 лет взял? Ему на вид лет 35
@user-qm1cw5eo6v
@user-qm1cw5eo6v 2 года назад
@@user-fj7hr6ri3g 40 лет стаж у бабушки,которая работает программистом в нью-йорке с 93 года.
@77VitMir77
@77VitMir77 7 месяцев назад
А где инпуты делись😮?
@FayzilloKhamraev
@FayzilloKhamraev Год назад
ты просто Лысый Герой))))
@sergekashin8527
@sergekashin8527 5 месяцев назад
А polyfill еще актуален на текущий момент? Не смог его найти по примеру на том же сайте.
@WebCademy
@WebCademy 5 месяцев назад
Данный полифилл уже не актуален.
@user-qn4mo4ft7z
@user-qn4mo4ft7z 3 месяца назад
А почему нельзя использовать делегирование вместо forEach? У меня получилось
@andr_hot
@andr_hot Год назад
А можно ли как-то реализовать, чтобы когда выпадает селект, список этот, чтобы треугольник крутился?
@user-dv9fk1hd3s
@user-dv9fk1hd3s Год назад
Можно конечно. Допустим мы через псевдоэлемент у кнопки реализовали треугольник. Можно при открытии навешивать на кнопку класс, например "open" по наличию этого класса сделать стрелке transform: rotate(180deg). Ну и кнопке не забыть прописать transition, чтобы плавная анимация была
@X1N06
@X1N06 Год назад
Хороший видос =) Только я не понимаю , почему нельзя сразу заводить переменные, зачем это делать потом ...а половину видео получается сиди читай длиннющие querySelector-ы) спорное решение))
@gamerplus4492
@gamerplus4492 Год назад
спасибо но почему-то в теге form этот селект не работает
@igorlapshin2254
@igorlapshin2254 7 месяцев назад
2:43 добрый день, а как вытащить данные из вкладок с функцией selected (надо вытащит в html код) ? в html коде страницы их нету, только на сайте, если выбираем вкладку Вы делаете такие вкладки, а Вы подумали как люди буду парсить эти данные?
@WebCademy
@WebCademy 6 месяцев назад
Добрый день. Не понял вопрос, о каких вкладках идет речь. В уроке выпадающий список, в нем есть пункты / элементы этого списка, которые мы выбираем.
@artikor8071
@artikor8071 3 года назад
Не любил js до этого видео)) Почему лайков так мало?.. (свой поставил)
@psevdo_nim
@psevdo_nim 3 года назад
Очень полезное видео , и ещё есть один вопрос , это же будет работать в интернет магазине для бекэнда ?
@user-dv9fk1hd3s
@user-dv9fk1hd3s Год назад
Будет. Есть же тег form, у него внутри есть input-ы и submit, остальное просто оформление.
@light4992
@light4992 Год назад
Возник баг при вставлении кнопки в форму, ведёт себя не стандартно, автоматически обновляя страницу.
@WebCademy
@WebCademy Год назад
Добавьте кнопке атрибут type="button"
@law_gov
@law_gov 4 месяца назад
Почему не z-index а position absolute ?
@user-fj7hr6ri3g
@user-fj7hr6ri3g 2 года назад
Особено создание не сколько cелектов
@space_dipspace_dip4043
@space_dipspace_dip4043 Год назад
А зачем нужен был инпут в итоге?
@user-dv9fk1hd3s
@user-dv9fk1hd3s Год назад
Формы обычно отправляются на бекенд. Для того чтобы это корректно работало нужен настоящий input у которого будет value. Со стилизованным списком отправка работать не будет
@user-fu8cq9uu6i
@user-fu8cq9uu6i Год назад
У меня не работает js ((
@thegate4407
@thegate4407 3 года назад
А зачем нужна data-value ? А если я например текст туда хочу вводить, и просто укажу this.innerText в чем разница?
@WebCademy
@WebCademy 3 года назад
data-value - это атрибут, this.innerText - внутреннее текстовое содержимое тега
@slt4415
@slt4415 2 года назад
А не проще в ООП завернуть! Создать класс и создавать экземпляры и передавать ему значение!? не ?
@MultiKolu4ka
@MultiKolu4ka Год назад
Привет. Если положить верстку в тег form, то выпадающий список разворачивает и сам сворачивается при нажатии на него. Как это пофиксить? Спасибо! upd. Нашел. Запретил button, который разворачивает select, отправлять данные атрибутом onclick="event.preventDefault();
@WebCademy
@WebCademy Год назад
Для button установите атрибут type="button" и тогда кнопка не будет отправлять форму в которой находится.
@MultiKolu4ka
@MultiKolu4ka Год назад
@@WebCademy о, спасибо!)
Далее
Я ДРОЖАЛ ПОСЛЕ ЭТОГО...
16:24
Просмотров 441 тыс.