Пишем свой select дропдаун на JS. Подробный урок
HTML-код
- Опубликовано: 17 дек 2020
- ↓↓↓ Материалы в описании под видео ↓↓↓
В этом уроке мы напишем свой 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 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
С большим удовольствием посмотрел, взял результат как готовое решение, надо срочно, но для практики по уроку реализую самостоятельно, спасибо Юрий!
Спасибо большое, как раз впервые столкнулась в проекте с такими селектами и это видео мне очень помогло ❤
Дружище ты крут, все четко и понятно, особенно когда объяснял JS, только у тебя понял как оно работает, спасибо за отличный контент.
Замечательно видео! Всё в нем есть! Больше нигде ничего не надо искать! Спасибо! И слушать очень приятно))
Опять задета тема кроссбраузерности) Я смотрел Ваш урок по верстке тестового задания для HTML-верстальщика и оттуда знаю, что forEach не поддерживается експлорером.
Жаль что нельзя два лайка поставить)
Суперподробно и понятно, спасибо огромное!
Спасибо большое! На эту тему мало видео и руководств
Классное видео и беспомощные option. Четкое объяснение что нужно делать , особенного когда делали js. В эти моменты останавливал видео и пробовал делать сам. Моментов мелких конечно , чтобы просто такой селект сделать - куча. Классно было бы ещё , если вы показали , как удалять обработчики и взаимодействовать со списком с помощью клавиатуры ( доступность) - стрелочками там переключаться и enter-ом выбирать значения. Спасибо за урок. Продолжайте в том же духе 👍
Отличный урок! Как всегда все максимально подробно. Спасибо!
шикарные подробные объяснения! идеальный формат👍
Отличная подача материала, спасибо за Ваш труд! Всё оч круто!
Как всегда, все четко и по делу. Благодарю!
Спасибо, очень доступно объяснили все!)
Здорово! Спасибо, Юрий!
Отличное и полезное видео, спасибо за труд.
Огромное спасибо! Вы лучшие!!!!
Спасибо. Офигенно объясняешь.
Супер, спасибо большое!
спасибо за информацию!!!колокол включил!!лайк поставил!
Спасибо вам огромное!!!
На столько познавательно, увлекательно и главное доступно, без запутанных шагов для новичка, с объяснением каждого действия. Очень сильно помогли в учебе!
Слава всемирной паутине) Слава Утьюбу) Ведь они увековечат ВАС и ваши знания!
просто гениально помог спасибо
ты тигр, Юрий!
Шикарно
Только сегодня смотрел на одном сайте зачем же они селекты делают баттоном и вот, Вы показываете тоже самое))
Лайк)
Круто
Спасибо, Роман. Если бы рассказали, как реализовать переход Tab-ом на выпадающий список после его открытия и сделали бы переворачивание стрелок - вообще инструкция была бы идеальной!
14:48 Js
Добрый вечер. Очень хорошие уроки. Есть у вас курс по Js? Когда следующее видео выйдет?
Отлично. Вот только есть то, что упущено почти во всех кастомных реализациях селекта - в какую сторону раскрывать список (верх/низ), какой высоты и с прокруткой или без.
Спасибо, разжевано дальше некуда, но остался один момент, что делать с Инпутами? Скрыть это понятно, как из них отправить данные на сервер?
ты просто Лысый Герой))))
Все классно. Есть вопрос. Ты ведь ловишь клик не по кнопке Dropdownbtn через е.target. Но ведь DropdownItems и dropdownlist ведь тоже не кнопки, получается можно, не писать код при нажатие на listitem который убирает класс visible у списка?
Спасибо за урок .Мне казалось, что JS невозможно объяснить так,чтобы было понятно😀
подача материала у него очень хорошая,лучшая на просторах ютуба.даже моя бабушка так не может обьяснить ,хотя она программист (40 лет стажа ).с 93-го в сша живёт и работает в гугл.
@@user-qm1cw5eo6vОткуда 40 лет взял? Ему на вид лет 35
@@user-fj7hr6ri3g 40 лет стаж у бабушки,которая работает программистом в нью-йорке с 93 года.
еще бы реализовать поиск по item при клике на селект и вводе буквы с клавиатуры
Так и не понял , почему после нажатия на select на 45 минуте пропал input и в него больше не выводились данные на экране?
Как этот селект сделать доступным для перемещения по странице с помощью клавиатуры?
А можно ли как-то реализовать, чтобы когда выпадает селект, список этот, чтобы треугольник крутился?
Можно конечно. Допустим мы через псевдоэлемент у кнопки реализовали треугольник. Можно при открытии навешивать на кнопку класс, например "open" по наличию этого класса сделать стрелке transform: rotate(180deg). Ну и кнопке не забыть прописать transition, чтобы плавная анимация была
Не любил js до этого видео))
Почему лайков так мало?.. (свой поставил)
Очень полезное видео , и ещё есть один вопрос , это же будет работать в интернет магазине для бекэнда ?
Будет. Есть же тег form, у него внутри есть input-ы и submit, остальное просто оформление.
А polyfill еще актуален на текущий момент? Не смог его найти по примеру на том же сайте.
Данный полифилл уже не актуален.
А где инпуты делись😮?
2:43 добрый день, а как вытащить данные из вкладок с функцией selected (надо вытащит в html код) ? в html коде страницы их нету, только на сайте, если выбираем вкладку
Вы делаете такие вкладки, а Вы подумали как люди буду парсить эти данные?
Добрый день. Не понял вопрос, о каких вкладках идет речь. В уроке выпадающий список, в нем есть пункты / элементы этого списка, которые мы выбираем.
Хороший видос =)
Только я не понимаю , почему нельзя сразу заводить переменные, зачем это делать потом ...а половину видео получается сиди читай длиннющие querySelector-ы) спорное решение))
спасибо но почему-то в теге form этот селект не работает
А почему нельзя использовать делегирование вместо forEach? У меня получилось
Возник баг при вставлении кнопки в форму, ведёт себя не стандартно, автоматически обновляя страницу.
Добавьте кнопке атрибут type="button"
А зачем нужен был инпут в итоге?
Формы обычно отправляются на бекенд. Для того чтобы это корректно работало нужен настоящий input у которого будет value. Со стилизованным списком отправка работать не будет
Особено создание не сколько cелектов
У меня не работает js ((
Почему не z-index а position absolute ?
А зачем нужна data-value ? А если я например текст туда хочу вводить, и просто укажу this.innerText в чем разница?
data-value - это атрибут,
this.innerText - внутреннее текстовое содержимое тега
А не проще в ООП завернуть! Создать класс и создавать экземпляры и передавать ему значение!? не ?
Привет. Если положить верстку в тег form, то выпадающий список разворачивает и сам сворачивается при нажатии на него. Как это пофиксить? Спасибо!
upd. Нашел. Запретил button, который разворачивает select, отправлять данные атрибутом onclick="event.preventDefault();
Для button установите атрибут type="button" и тогда кнопка не будет отправлять форму в которой находится.
@@WebCademy о, спасибо!)