Comments 74
А я бы еще порекомендовал эту библиотеку harvesthq.github.com/chosen/, у нее уже довольно большое комьюнити и выглядит покрасивее, хотя это уже на вкус.
Вы хотели сказать «плагин»? Спасибо, видел его. В моем случае, как я писал, хотелось легкого (вес определяющий), простого и не нагруженого решения.
у chosen есть один недостаток — подогнать его под основной дизайн сайта довольно сложно. При этом схожих стилей для остальных элементов форм, выполненных в том же стиле как и селекты в нем нет.
Тоже им пользуюсь.
За этот плагин спасибо!
Стрелки вверх-вниз вызывают смену выбранного и одновременно с этим открытие-закрытие окна на каждое нажатие стрелкой. Выглядит жутко.
Opera12/lin/64
Opera12/lin/64
могу еще порекомендовать данный вариант linkselect, имеет хороший API
Вот тоже, кстати, симпатичный.
Симпатичный. Подскажите, где вы видите его использование, в каком случае?
Например, я бы поставил такой на apple.com, он бы там смотрелся отлично :)
Вы кстати написали бы, что требуется jQuery 1.7+, а то ведь не все веб-мастера обновляют библиотеку(.on() только с 1.7 появился).
Если добавить пункт с длинным текстом — начинаются проблемы :)
Эту проблему пока ни один заменитель селектов не решает, к сожалению.
Эту проблему пока ни один заменитель селектов не решает, к сожалению.
В таких случаях нужно ограничить ширину (допустим, max-width) и добавить свойство text-overflow.
white-space: nowrap;
max-width: 200px;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
Баг двойных стрелок в линуксовом Chrome 17.0.963.26 dev.
Эта чёрная стрелка — от дефолтного выпадающего списка, если его спрятать (display: none), то всё нормально.
Эта чёрная стрелка — от дефолтного выпадающего списка, если его спрятать (display: none), то всё нормально.
А почему нет поддержки такой удобной вещи как OPTGROUP? На своём веку помню лишь пару плагинов хоть с кривой и упрощенной, но поддержкой групп.
На данный момент занес в TODO возможность отключить стилизицию к селектам с OPTGROUP, и атрибутом multiple select. Повторюсь: идея была только для стандартных селектов без этих возможностей. Редко встречаются. Если надо пддержка такой функциональности — используйте указанный в первом комментарии Chosen.
Хочется поведения выпадающих списков как у нативных. Кликнули на выпадающий список — он развернулся, кликнули еще раз — у вас он повторно развернулся, хотя в оригинале должен свернуться.
Как было указано выше будет сделано.
Спасибо. Проверю.
В мобильном Safari отображается выпадающий список и одновременно с ним появляется стандартный селектор в виде барабана. Выбор пункта на барабане и подтверждение кнопкой Done выделяет пункт в списке, который продолжает «свисать». Приходится повторно тапать по пункту, после чего список наконец сворачивается.
Ваш плагин я бы не назвал бы велосипедом, действительно предусмотрено большинство событий как у стандартного элемента select. Я бы посоветовал сделать срытие списка не по событию на документ, а при потере фокуса, как это реализовано в виджите popup jQueryUI, чтобы избежать конфликтов с другими плагинами.
Ребята, как мне необходима была сегодня эта статья! Спасибо! :)
Не нашёл в демке — есть ли поддержка кнопки «reset»?
Пока ни у одного самописного селекта не видел сброса в начальное состояние при нажатии reset в форме, каждый раз приходится писать костыли вручную, поскольку спрятанный оригинальный селект сбрасывается, а на подменяющем его скриптовом селекте это никак не отражается.
Пока ни у одного самописного селекта не видел сброса в начальное состояние при нажатии reset в форме, каждый раз приходится писать костыли вручную, поскольку спрятанный оригинальный селект сбрасывается, а на подменяющем его скриптовом селекте это никак не отражается.
О ужас, не хотелось бы чтоб это было повсеместно.
Не стоит использовать классы вроде «done, open». Очень велика вероятность того, что аналогичные классы встретятся в проекте, где ваш селект будет использоваться (custom-select тоже кстати весьма популярный класс). Сделайте возможность задания своего класса, а вспомогательные классы пусть будут генерироваться с префиксом (.your-class-name-select-open, .your-class-name-select-done).
Вообще селект понравился. Аккуратная верстка, симпатичен внешне. Буду контрибьютить.
Правда есть вопросы по js:
1. Зачем вы конструктор вашего плагина делаете свойством объекта jQuery?
2. Почему не храните методы в прототипе?
1. Зачем вы конструктор вашего плагина делаете свойством объекта jQuery?
$.selectik = function(element, options) {}
/* source code */
$.fn.selectik = function(options) {
return this.each(function() {
if (undefined == $(this).data('selectik')) {
// create a new instance of the plugin
var selectik = new $.selectik(this, options);
$(this).data('selectik', selectik);
}
});
}
2. Почему не храните методы в прототипе?
// public method: disable list
selectik.disableCS = function(){}
// public method: enable list
selectik.enableCS = function(){}
// public method: width of select
selectik.setWidthCS = function(width){}
За основу был взять шаблон для плагина Стефана Габоса. Мне понравилась идеи хранения методов и определение свойств именно в таком виде, поэтому и использовал.
Возможно в будущем будет переработана архитектура после всех доработок. Возьму на заметку!
Возможно в будущем будет переработана архитектура после всех доработок. Возьму на заметку!
Ну если по поводу первого пункта еще можно поспорить: мало ли кто-то захочет запускать плагин как
Но методы нужно конечно в прототип пихать. Они же общие для всех инстансов, зачем их дублировать для каждого селекта.
Когда будете пересматривать архитектуру, загляните сюда (если конечно еще не заглядывали).
$.selectik(element, { option1: 'option' });
Но методы нужно конечно в прототип пихать. Они же общие для всех инстансов, зачем их дублировать для каждого селекта.
Когда будете пересматривать архитектуру, загляните сюда (если конечно еще не заглядывали).
Мне не нравится такие несемантичные списки. DIV-ами и LI-шками рисовать вручную контрол? Вы, что застряли во времена DOS, когда каждая программа рисовала контролы как могла? Это шаг в прошлое. Я против распространения таких методов.
1. Если дизайнер видет это не стандартно и пользователю будет удобно — то почему нет? Надо учитывать и тот фактор, что они будут выглядеть во всех браузерах одинаково.
2. Чем несемантичные?
2. Чем несемантичные?
1. Пикассо тоже всякую хрень рисовал, и у него даже есть поклонники, но это не значит, что это хорошие картины. То, что видит дизайнер никого не волнует. Пользователю удобно было бы, и если бы производители браузеров и стандартов реализовали эти фичи с стандартном элементе управления. А делать костыль из-за чьей-то лени — это не престижно и унизительно. Логичнее для мировой справедливости заставить лентяев из W3C быстрее работать. Одинаковое отображение во всех браузерах опять-таки зависит от того, как мировое население сумеет заставить программистов браузеров хорошо работать, а не пить кофе с печеньками.
2. Несемантичные тем, что парсеры таких списков писать неудобно — везде свои. Да и представьте, если бы программы для Windows сами рисовали на окне элементы управления. Что было бы?! Да даже GetWindowText не сработал бы! У каждой программы был бы свой GetWindowText.
Поставьте, пожалуйста, мне плюсов в карму за выражение моего собственного мнения отличного от мнения большинства.
2. Несемантичные тем, что парсеры таких списков писать неудобно — везде свои. Да и представьте, если бы программы для Windows сами рисовали на окне элементы управления. Что было бы?! Да даже GetWindowText не сработал бы! У каждой программы был бы свой GetWindowText.
Поставьте, пожалуйста, мне плюсов в карму за выражение моего собственного мнения отличного от мнения большинства.
'+valueOption+'Это жесть. Почему вместо текста option используется его value? Получается, я не могу использовать список вида:
По-умолчанию
Красный
Зеленый
Синий
FireFox 12.0, селект разворачивается вверх.
Подскажите пожалуйста, как обрабатывать события вроде onchange?
Например, для цепочки селектов, или отправки формы сразу по смене, и т.п.
В демо и API такого примера не нашёл
Например, для цепочки селектов, или отправки формы сразу по смене, и т.п.
В демо и API такого примера не нашёл
Sign up to leave a comment.
Selectik — стильные селекты