No video
JS-плагины №8. Кастомный селект на сайт - Choices.js
Рет қаралды 19,084
Күн бұрынПривет! В этом видео я покажу, как сделать свой селект на сайте. Поскольку сам по себе селект через css очень плохо поддается стилизации - принято использовать обертки для него из дивов, списков и т.д., с соответствующими атрибутами. И сегодня как раз плагин, который это умеет хорошо - плагин choices.js. Посмотрим парочку примеров работы с ним, разберемся с базовой доступность. Поехали!
github.com/max...! - исходники видео на GitHub
github.com/jsh... - библиотека choices.js
joshuajohnson.... - демо choices.js
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxg...
Чат для верстальщиков: teleg.run/maxg...
#обучение #селект #choicesjs
@maxgraph 3 жыл бұрын
Как вам новая обложка js-плагинов?) вернуть старую, или оставить эту?
@user-sb2yd8fp9n 3 жыл бұрын
А она поменялась? Нормальная обложка. И та нормальная, если разница в глаза не бросается. Главное - контент, а не обложка... P.S.: посмотрел прошлую - те же шары в профиль ;)
@maxgraph 3 жыл бұрын
@@user-sb2yd8fp9n была белая, теперь такая :) полностью поменялась я бы сказал.
@mykhailo6062 3 жыл бұрын
Мне очень понравилась обложка. Спасибо тебе за труды твои 👍👍👍
@maxgraph 3 жыл бұрын
@@mykhailo6062 спасибо)
@VoLaND0303 2 жыл бұрын
👍👍👍
@nemercevroman 6 ай бұрын
уже раз четвертый за неделю захожу что бы освежить память или уточнить что нибудь, отличное видео!
@danevgen 3 жыл бұрын
Спасибо! Гораздо лучше кастомизируется, чем select2, имхо
@user-kg6fz5tz2b 3 жыл бұрын
Спасибо! Побольше JS'а от Вас!!!
@maxgraph 3 жыл бұрын
Еще про html не все рассказал)) но да, js будет
@user-kg6fz5tz2b 3 жыл бұрын
@@maxgraph Спасибо!
@user-jd6rn6co7q 3 жыл бұрын
Видео интересное, но все-таки решил юзать react-select он поинтереснее будет и поддержка у него лучше
@svet0v 3 жыл бұрын
Супер. Побольше бы подобных видео
@maxgraph 3 жыл бұрын
Пожалуйста)
@summersbyy 3 жыл бұрын
Волшебное видео, как всегда) Было бы еще здорово рассказать, как заменить стрелочку на свою)
@maxgraph 3 жыл бұрын
Ну по сути просто найти её в девтулс да заменить)) Спасибо!
@miraclescalp 3 жыл бұрын
Надеюсь ты в будущем станешь более узнаваемым, видео очень информативные) Топлю за тебя( и хотел спросить, стоит ли учить одновременно python и js? или быстро перегорю )
@maxgraph 3 жыл бұрын
Лучше что-то одно хотя бы на среднем уровне)) а потом второе Спасибо!
@user-td3yd6vd6c 3 жыл бұрын
Дружище спасибо тебе большое!
@maxgraph 3 жыл бұрын
Пожалуйста)
@nemercevroman 6 ай бұрын
просто оставлю как заметку и помощь другим. Что бы не менялся айди элемента каждый раз после перезагрузки, нужно указать родителю(select) его личный айди.
@nemercevroman 6 ай бұрын
id удалось вызвать через консоль, тем не менее событие при 'click' не сработало
@a.k.9386 2 жыл бұрын
Спасибо, большое!
@maxgraph 2 жыл бұрын
Пожалуйста)
@user-ww3ux7rr6l 3 жыл бұрын
Спасибо, то что нужно
@maxgraph 3 жыл бұрын
Пожалуйста)
@Olga-Bindasova 4 ай бұрын
С Choices вот такая беда: если на одной странице несколько селектов, то все отлично отрабатывает. Но если применить это к другим каким-то страницам, то все, не работает. Зачем такая стилизация, если это работает только на одной странице сайта?
@user-ub9oh3ig9w 2 жыл бұрын
Спасибо, очень помог)
@maxgraph 2 жыл бұрын
Пожалуйста)
@Red_Sky_92 3 жыл бұрын
От души!!!! =)
@KrZn104 3 жыл бұрын
Видос бесспорно хорош, но лучше бы ты показал, как сделать данный плагин с нуля, либо просто сделал бы select с нуля, но уже с полным функционалом на div-ах, как в этом плагине! Спасибо за старание!
@maxgraph 3 жыл бұрын
Это более сложная тема, но она в планах :)
@user-je1ik6vz9f 2 жыл бұрын
Здравствуйте! Есть плагин селекта в котором можно еще стилизовать и скроллбар помимо самого селекта?
@user-hp1le2sg2z 3 жыл бұрын
Здравствуйте! А можно ли как-то с помощью этого плагина сделать 2 селекта, которые различаются внешним видом ?
@rssreader90 2 жыл бұрын
О личный вопрос, тоже ищу информацию
@user-hp1le2sg2z 2 жыл бұрын
@@rssreader90 можно сделать, придётся только с классами в css поиграть, если нужны разные по виду
@balbe666 2 жыл бұрын
При перезагрузке страницы обновляются имена Id на абсолютно рандомные, исходя из этого скрытие placeholder по id не срабатывает, может, возможно это побороть?
@balbe666 2 жыл бұрын
Нашел решение.
@Alexandr_16kz_22rus 2 жыл бұрын
@@balbe666 дружище, как сделал? Я не могу пока сообразить...
@sostav5 2 жыл бұрын
Здравствуйте! Вы не помните какое решение здесь было?
@nemercevroman 6 ай бұрын
так здорово, что ты нашел решение!
@user-wm6lx6xc6p 2 жыл бұрын
Отличное видео. Подскажите, как исключить из списка уже выбранный элемент. пример: список из 4 элементов и если 1 выбран, то его в списке выбора нет, при выборе 2го 1й в списке выбора появляется и т.д. Надеюсь понятно изложил мысль )
@maxgraph 2 жыл бұрын
Здравствуйте. Спасибо) Нажатому элементу добавляется класс, через него можно скрыть
@user-ur4vv3ev2x Жыл бұрын
Здравствуйте Максим , такой вопрос , почему когда я устанавливаю плагин Choices , то элементы селекта выстраиваются не как у меня в html было прописано, а по алфавиту ? как с этим бороться ?
@maxgraph Жыл бұрын
В настройках плагина есть отключение сортировки)
@andreyputsillo255 Жыл бұрын
Здравствуйте. Подскажите как поменять бэкграунд у элемента списка, на который наводишь мышку либо же он выделяется с помощью клавиатуры. Я так понимаю за это отвечает класс is-highlighted ? Не могу прописать синтаксически правильную строку кода...
@maxgraph Жыл бұрын
да, за это отвечает этот класс. по нему обратитесь и все
@andreyputsillo255 Жыл бұрын
Увы, так: .is-highlighted { background-color: green; } не работает. бэкграунд всё такой же серый...
@user-co8xr8te8t 3 жыл бұрын
Обясняете класно , но прокатит только для тех кто в теме
@olegkuntsevich5501 3 ай бұрын
Добрый день! Всё замечательно, но у меня при вставке в DOM 3-го селектора возникает ошибка: "Trying to initialise Choices on element already initialised".
@maxgraph 3 ай бұрын
Значит ошибка в коде, уже инициализирован данный элемент
@olegkuntsevich5501 3 ай бұрын
@@maxgraph Решил проблему через добавления уникального класса с помощью счётчика
@user-ur3wi7hn1e 2 жыл бұрын
Отличный материал! Подскажите как сделать плавное открытие/закрытие селекта?
@maxgraph 2 жыл бұрын
конкретно с этим плагином будет проблематично, т.к. он использует overflow.
@nuhler Жыл бұрын
Как инициализировать библиотеку, если на странице несколько селекторов? На обращение querySelectorAll не реагирует
@maxgraph Жыл бұрын
Видимо ошибка в коде, должно так работать
@nuhler Жыл бұрын
@@maxgraph спасибо, буду копать
@sencorio 2 жыл бұрын
Добрый день! Как сделать, чтоб один вариант выбора option всегда был виден? Например, есть Введите пол. И ниже видно какой вариант по умолчанию
@maxgraph 2 жыл бұрын
Здравствуйте! Сделать первый пункт в изначальном селект можно с пустым value
@user-wn7zl4gq6h Жыл бұрын
Максим, добрый день! Не могли бы вы подсказать, как поменять местами элементы выпадающего списка в селекте? Спасибо)
@maxgraph Жыл бұрын
А для чего это? Как указываете в html, так пусть и идут
@user-wn7zl4gq6h Жыл бұрын
@@maxgraph так в том то и дело, что порядок, прописанный в html, по непонятной причине нарушился... мне рекомендовали список залить массивом через js
@elizaveta7330 3 жыл бұрын
Здравствуйте. Добавила на сайт и заметила такую негативную особенность. Оно открывает и вверх и вниз список. Хотя это не очень удобно. Может есть такое свойство, чтобы раскрывалось только вниз?
@maxgraph 3 жыл бұрын
Здравствуйте, есть свойство position у плагина, в доке увидите
@elizaveta7330 3 жыл бұрын
@@maxgraph Спасибо)
@nekrartgb 2 жыл бұрын
Подскажи пожалуйста, а как добавить его через npm, делаю установку, а как мне подключить стили и js или только через CDN, а то как таковой инструкции нету
@maxgraph 2 жыл бұрын
В документации смотри, там все пишут)
@mefioz2397 2 жыл бұрын
Как стилизовать стрелочку, например цвет при раскрытом опшине, не могу найти класс для нее.
@maxgraph 2 жыл бұрын
Псевдоэлемент у choices
@sostav5 2 жыл бұрын
Здравствуйте! Подскажите, пожалуйста, как скрыть первый элемент в селекте, если id меняется при перезагрузке страницы?
@maxgraph 2 жыл бұрын
Здравствуйте. Сделать первый опшн с пустым value. Тогда у него будет отдельный от всех класс
@sostav5 2 жыл бұрын
@@maxgraph всё получилось, спасибо
@user-sb2yd8fp9n 3 жыл бұрын
Мне кажется, что убирать надпись "Press to select" в css немного не правильно. В консоли лишние надписи остаются.
@maxgraph 3 жыл бұрын
не понял немного, как с этим консоль связана?
@arsenmanasuev4934 3 жыл бұрын
itemSelectText: 'Press to select', add in js
@user-mt9lq4hl1c 2 жыл бұрын
Очень нужное видео! Подскажите, пожалуйста, как изменить кнопку?
@maxgraph 2 жыл бұрын
Какую?
@user-mt9lq4hl1c 2 жыл бұрын
@@maxgraph иконку закрытия и открытия
@Alexandr_16kz_22rus 2 жыл бұрын
@@user-mt9lq4hl1c .choices[data-type*=select-one]::after { content: ""; height: 10px; width: 12px; background: url(../img/katalog-praktik/arrow-bottom.svg) center center no-repeat; pointer-events: none; border-style: none; right: 14px; top: calc(50% - 5px); margin: 0; } Только бэкгроунд свой
@Sasha9433 3 жыл бұрын
Добрый день, а как стилизовать/изменить стрелочку которая показывает открыт элемент или же нет?
@maxgraph 3 жыл бұрын
Там же див появляется, можете как угодно делать, например псевдоэлементом
@netsross9722 3 жыл бұрын
как изменить вид стрелки при открывании и закрывании. Подскажите пожалуйста
@maxgraph 3 жыл бұрын
Там она псевдоэлементом сделана, его и нужно менять
@user-glory-of-ukraine 3 жыл бұрын
vendor.min.js:1 Uncaught ReferenceError: Choices is not defined почему так? new Choisen() не видит в сборке(через нпм собирал)
@maxgraph 3 жыл бұрын
Надо смотреть что там за сборка и тд
@user-glory-of-ukraine 3 жыл бұрын
@@maxgraph спасибо, нашол ошибку!
@Dim_Dimych21 3 жыл бұрын
Нашел в инете плагин селекта Jq Selectic. На русском не одного видео нет. Кто нибудь юзал?
@maxgraph 3 жыл бұрын
Нет, такой не доводилось
@iceRash 2 жыл бұрын
как сделать чтобы выбранный элемент не появлялся в самом селекте ?))
@maxgraph 2 жыл бұрын
Скрыть его через дисплей можно
@user-re8qe7lg3t 3 жыл бұрын
Привет, можешь сделать видос про круговой прогресс бар?
@maxgraph 3 жыл бұрын
Можно в целом =)
@lidiiastrelets360 3 жыл бұрын
Подскажите пожалуйста, как сбросить селект к исходному состоянию?
@maxgraph 3 жыл бұрын
это вы о чем?
@lidiiastrelets360 3 жыл бұрын
@@maxgraph , с этим вопросом я разобралась. Теперь другой: дефолтный селект по нажатию enter инициирует сабмит формы. Этот селект по нажатию enter открывает селект для выбора. Можно ли изменить поведение по клавише ентер, чтобы тоже наступала отправка формы?
@maxgraph 3 жыл бұрын
Не пробовал. Но скорее всего да)
@lidiiastrelets360 3 жыл бұрын
@@maxgraph , дайте пожалуйтса хоть направление где искать
@maxgraph 3 жыл бұрын
События keydown или keyup, обработка keyCode для enter, попробуйте
@denysmaksymuck 3 жыл бұрын
Что за тема VSC ?
@maxgraph 3 жыл бұрын
Material
@arsenpreon8821 2 жыл бұрын
а как в кнсоли отключить уведомление Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message
MaxGraph - cайты как страсть
Рет қаралды 14 М.
Вадим Макеев
Рет қаралды 38 М.
MaxGraph - cайты как страсть
Рет қаралды 32 М.
MaxGraph - cайты как страсть
Рет қаралды 19 М.