Это замечательно, но если контейнер с айтемсами по высоте будет больше чем основной родительский блок селекта то он спровоцирует скрол и будет убога. Базовый селект не ломает разметку если он не помещается он как будто поверх всех узлов, ограничен только окном. Можно конечно привязаться к ресайзу через js и оперировать положением контейнера айтемсов
Хороший урок, но было бы интересно увидеть как его объединить с обычным select'om. То есть чтобы создавая обычный select генерировался кастомный и взаимодействовал с ним. Знаю есть куча библиотек, которые это делают, но было бы интересно узнать как написать свой скрипт)
codepen.io/leon9208/pen/VwYpJwW codepen.io/leon9208/pen/jOEBJgW По первой ссылке генерация кастомного селекта, а функционал уже по видео можете сделать, или по второй ссылке, там функционал (работает с клавиатурой + закрывается при клике вне селекта)
Анатолий ваши уроки крутые. Но есть одно но, вы пишите на WebStorm. Было бы круто если, бы вы перешли на VSCode. Потому что большинство пишут именно на нем. Этот редактор понятнее и удобнее по моему личному мнению. Но если вам так нравиться WebStorm то тоже норм!
результат выбора айтема можно сохранить в local storage чтобы после обновления страницы сохранялся результат, ну и заодно кнопку дописать чтобы был сброс
Еще тут не решена проблема направления раскрытия меню select что бы он не выходил за пределы экрана например во вьюпорте если он находится снизу экрана в условной модалке начнет прыгать верстка
Ну это не кастомный селект, это пародия на селект. tabindex не будет отрабатывать, в form собираться данные оттуда тоже не будут как в нормальном селекте. Было бы правильнее привязаться к невидимому селекту, но увы. А так же в обычном селекте работает навигация, как то очень халтурно вы сделали это
Спасибо за ролик! А подскажи пожалуйста, как сделать так, чтобы ты кликнул на элемент - это элемент выбрался по умолчанию и при следующем клике он как-то выделялся, например текст выбранного элемента по умолчанию был полужирный или с каким-нибудь hover эффектом?
Да, так и делать. Невидимый инпут и скрипт, который будет записывать выбранный пункт в этот инпут. В jQuery для этого потребуется одна коротенькая строчка.)
Так и реализовал) правда без jQuery, на его смену пришли другие) я его уважаю за вклад в развитие языка, но в 2020 его юзать не очень рационально, на мой взгляд. Современные фичи языка позволяют вполне просто писать, останется только через бейбл прогнать (если прям так сильно нужно нативным js реализовать). Но сейчас много библиотек классных и фреймворков, которые классно упрощают жизнь. Тот же вью подключил как jQuery через cdn и печали не знаешь)
Я так понимаю в IE этот селекст работать не будет, да? И можно ли так обходить уже IE(забивать). И если нужна поддержка IE то jQuery или делать кастомный функционал (addClass, и тд)? Спасибо. Видео супер!
@@Shakhrom-b7d Доступность в этом контексте подразумевает использование интерфейса людьми с ограниченными возможностями, например, селектор должен быть доступен для управления с клавиатуры, но этим дело не ограничивается. Послушать больше о ней, можно загуглив Вадима Макеева, у него множество докладов о доступности в вебе.
@@Андрей-й9ц6я Про доступность в курсе, Вадим Макеев в этом вопросе "собаку съел", тоже смотрел/смотрю его доклады и видео на канале. Я тут скидывал вариант того что сделал я: codepen.io/leon9208/pen/VwYpJwW 1) Возможность управления с Tab + Пробел 2) Сворачивание по клику вне области 3) Генерация кастомного select на основе обычного тега select - Доступность можно дополнить атрибутами aria. - Еще хорошо бы добавить возможность в мобильных приложения использовать встроенный селект, он удобнее.
Спасибо за видео то что искал. Вопрос только один возможно ли как то размеры .select за место фиксированного max-width: 200px; сделать резиновым под размеры самого большого текста?
Согласен, но урок, изложенный с задействованием принципа делегирования, затратил бы не намного больше времени и сил на объяснение, а новичкам принес в разы больше пользы, тк этот принцип имеет применение много где в коде, а не только при создании кастомного селекта
@Валентин Инкогнито таких гайдов и так полно. А показывать плохие практики это в некотором смысле даже вредительство. Человек запомнит один раз и дальше будеть использовать такой способ
![ปฏิเสธไม่ไหว (Crush on you) - LIPTA feat. No One Else [Official MV]](http://i.ytimg.com/vi/NBw1jF342vw/mqdefault.jpg)
Спасибо за видео, неплохо сюда добавить закрытие селекта при аут клике
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
@@Frontcoder Да, пожалуйста сделайте еще урок что бы закрыть селект вне клика самого селекта. 4 часа потратил - так и не нашел способ
посмотри по ссылке, если еще актуально
Відео супер! Одне задоволення вчитись по таким відео. Все просто та зрозуміло!
Рад, что вам понравилось!
Спасибо большое! Всё чётко и понятно, без воды!!!
Рад, что вам понравилось
Классно только потом ариа-роли и атрибуты пол дня прописывать придеться 🙂
Это замечательно, но если контейнер с айтемсами по высоте будет больше чем основной родительский блок селекта то он спровоцирует скрол и будет убога. Базовый селект не ломает разметку если он не помещается он как будто поверх всех узлов, ограничен только окном. Можно конечно привязаться к ресайзу через js и оперировать положением контейнера айтемсов
Ты крут, спасибо за подробный гайд.
Супер. Подписка!
Спасибо за ваш комментарий. Рад, что вам понравилось!
ТОП! искал решение много часов)
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
Хороший урок, но было бы интересно увидеть как его объединить с обычным select'om. То есть чтобы создавая обычный select генерировался кастомный и взаимодействовал с ним. Знаю есть куча библиотек, которые это делают, но было бы интересно узнать как написать свой скрипт)
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
codepen.io/leon9208/pen/VwYpJwW
codepen.io/leon9208/pen/jOEBJgW
По первой ссылке генерация кастомного селекта, а функционал уже по видео можете сделать, или по второй ссылке, там функционал (работает с клавиатурой + закрывается при клике вне селекта)
Шахром Мукумов а есть готовый?) совмещённый из двух
Шахром Мукумов ты красава. Сколько искал норм варианты, но пока твой самый четкий)
Runar Shakirov нет, но позже сделаю, времени не так много.
Однозначно лайк!
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
Анатолий ваши уроки крутые. Но есть одно но, вы пишите на WebStorm. Было бы круто если, бы вы перешли на VSCode. Потому что большинство пишут именно на нем. Этот редактор понятнее и удобнее по моему личному мнению. Но если вам так нравиться WebStorm то тоже норм!
Лучший
Рад, что вам понравилось!
Огонь! Мне надо сделать выделение первой буквы в селекте, что в стандартном селекте невозможно.
Спасибо за помощь, все оплучилось
результат выбора айтема можно сохранить в local storage чтобы после обновления страницы сохранялся результат, ну и заодно кнопку дописать чтобы был сброс
Всегда есть как улучшить)
Еще тут не решена проблема направления раскрытия меню select что бы он не выходил за пределы экрана
например во вьюпорте если он находится снизу экрана в условной модалке начнет прыгать верстка
Почему то у меня функция selectChoose не работает ??? Можете помочь...
Есть ли другой вариант?
Добрый день! Подскажите, как сделать, чтобы список закрывался при нажатии вне селекта?
Здравствуйте. Подскажите, почему у меня в дефолтном состоянии селект всегда раскрыт?
поему let select, а не const select? ведь внутри select лежит функция, которая меняться не будет?
Ну это не кастомный селект, это пародия на селект. tabindex не будет отрабатывать, в form собираться данные оттуда тоже не будут как в нормальном селекте. Было бы правильнее привязаться к невидимому селекту, но увы. А так же в обычном селекте работает навигация, как то очень халтурно вы сделали это
Сделайте вторую часть, где кастомный селект будет доступен с клавиатуры
Цены не было бы Вам)
меняй элементы с div на button и будет работать с клавиатурой
@@Shakhrom-b7d если бы всё так было просто)
codepen.io/leon9208/pen/jOEBJgW?editors=1010
я сделал так
@@artemsdobnikov259 так я дал ссылку, не подходит?
Спасибо за ролик! А подскажи пожалуйста, как сделать так, чтобы ты кликнул на элемент - это элемент выбрался по умолчанию и при следующем клике он как-то выделялся, например текст выбранного элемента по умолчанию был полужирный или с каким-нибудь hover эффектом?
Тогда при выборе пункта нужно его подсветить (а остальные сбросить до вида по-умолчанию, чтобы не было десятка подсвеченных пунктов)
как потом данные отправить по submit? получится создать невидимый инпут и его value присвоить innerText для current?
Да, так и делать. Невидимый инпут и скрипт, который будет записывать выбранный пункт в этот инпут. В jQuery для этого потребуется одна коротенькая строчка.)
Так и реализовал) правда без jQuery, на его смену пришли другие) я его уважаю за вклад в развитие языка, но в 2020 его юзать не очень рационально, на мой взгляд. Современные фичи языка позволяют вполне просто писать, останется только через бейбл прогнать (если прям так сильно нужно нативным js реализовать). Но сейчас много библиотек классных и фреймворков, которые классно упрощают жизнь. Тот же вью подключил как jQuery через cdn и печали не знаешь)
@@AndPol0783 можете подсказать какая строчка?
Я так понимаю в IE этот селекст работать не будет, да? И можно ли так обходить уже IE(забивать). И если нужна поддержка IE то jQuery или делать кастомный функционал (addClass, и тд)? Спасибо. Видео супер!
Есть babel для этого
Картинки выводить не будет?(
А как у этого селектора с доступностью? ;)
О какой доступности идет речь?
Будет ли работать в мобильных устройствах селект по умолчанию, т.е. не кастомный?
@@Shakhrom-b7d Доступность в этом контексте подразумевает использование интерфейса людьми с ограниченными возможностями, например, селектор должен быть доступен для управления с клавиатуры, но этим дело не ограничивается. Послушать больше о ней, можно загуглив Вадима Макеева, у него множество докладов о доступности в вебе.
@@Андрей-й9ц6я Про доступность в курсе, Вадим Макеев в этом вопросе "собаку съел", тоже смотрел/смотрю его доклады и видео на канале. Я тут скидывал вариант того что сделал я: codepen.io/leon9208/pen/VwYpJwW
1) Возможность управления с Tab + Пробел
2) Сворачивание по клику вне области
3) Генерация кастомного select на основе обычного тега select
- Доступность можно дополнить атрибутами aria.
- Еще хорошо бы добавить возможность в мобильных приложения использовать встроенный селект, он удобнее.
@@Shakhrom-b7d с телефона этот селект вообще не работает
@@peachok3564 Там css'ом решить можно, просто реальный селект поверх поставить и скрыть вот codepen.io/grafit_0ff/pen/xxgXjpR
Удобен ли этот селекта в дальнейшем для бек разработчиков? или при натяжке на WP?
я не бэк, не могу сказать, но проблем у меня с ним не было при передаче разрабам
Спасибо!
Спасибо за ваш комментарий. Рад, что вам понравилось!
Спасибо за видео то что искал. Вопрос только один возможно ли как то размеры .select за место фиксированного max-width: 200px; сделать резиновым под размеры самого большого текста?
min-width: 30px;
еще бы неплохо сделать выделение в выпадающем списке пункта, который выбран на данный момент. Так реализовано в обычном селекте.
корисний урок, дякую, виявляється можна не викорисовувати сторонні бібліотеки для стилізації select
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
и нет закрытия по клику вне селекта
Не рационально вешать обработчик на каждый элемент внутри селекта. почитай про делегирование событий
А если ещё список будет динамическим, то прийдется снова цеплять все обработчики
Согласен, но урок, изложенный с задействованием принципа делегирования, затратил бы не намного больше времени и сил на объяснение, а новичкам принес в разы больше пользы, тк этот принцип имеет применение много где в коде, а не только при создании кастомного селекта
@Валентин Инкогнито таких гайдов и так полно. А показывать плохие практики это в некотором смысле даже вредительство. Человек запомнит один раз и дальше будеть использовать такой способ
Интересно, как обработать подобный селект на php, чтоб отправить на сервак эти данные. Спасибо за видео :)
Делаешь инпут, скрываешь его, когда кликаешь по нужному значение через js даешь значение инпуту
Roman Grushko спасибо )
@@romangrushko6070 бред)
Что делать, если текст в рамке не стоит по центре?
Выровнять текст по центру
Такой селект не годится для продакшена. Слишком сырой + никакой доступности. Кто делает тестовые - не копипасьте. Завалят
блин пример вааще на сотке не виден....
если ты прогаммист, то мобайл ферст....
надо свои ролики потом смотреть.
ничерта не опнял но селкт застилил
Ничего не понятно в js. Хоть бы показывал и объяснял. Ролик же не для себя делал, а для новичков.