Krovosos May 12 2009 at 15:32

Улучшаем формы или Веб-Восемь-Ноль-Сто-Три

13 min

1.4K

JavaScript*

+19

Comments 52

Zeroglif May 12 2009 at 15:47

Хорошо бы подсветить код, перенести в джиквери-блог и дать ссылку на работающий пример…

Krovosos May 12 2009 at 17:35

В Сети пока нет работающего примера… :(

sumfucka May 12 2009 at 16:16

«Если найду время — сделаю syntax highlight кода на Javascript (а почему нет под рукой на Хабре??).»
есть замечательный сервис — source.virtser.net/

Krovosos May 12 2009 at 17:34

Подсветил, спасибо.

slesar May 12 2009 at 16:39

ИМХО очень неправильно создавать form через js, он должен быть изначально. Если юзер заходит с мобильного или с КПК скрипт может не отработать и тогда вообще весь функционал потеряется.

Krovosos May 12 2009 at 17:41

«Скрипт может не отработать» — что значит?

konfuze May 12 2009 at 17:57

Значит что у user agent'а может не быть Javascript'а или он отработает не так как мы подозреваем — и тогда форма не создастся и юзер не сможет ничего отправить.

Krovosos May 12 2009 at 20:27

«Не, не, не» © Это все для интранета делается…

webboy May 12 2009 at 16:40

Прелесть JQuery не в том, чтобы руками велосипеды придумывать… JQ как Firefox ценен своими плагинами. На Ваш пример есть пара плагинов…

Ag47 May 12 2009 at 17:01

Что-то я не понял

Уж конечно не как стандартный SELECT!
Во-первых, он должен использовать справочник. То есть набор пар [«ключ», «значение»]. При этом пользователю показывается строка «значение», а на сервер отправляется «ключ».

А Разве селект не так устроен?

Ag47 May 12 2009 at 17:10

там цитата, я так и не понял почему html тег не отработал. короче парсер урод=)

Krovosos May 12 2009 at 17:25

Я может неаккуратно выразился. Имелось в виду, что справочник должен существовать отдельно и независимо ни от чего и разделяться между разными контролами.

vittore May 12 2009 at 19:44

ну он у вас и будет существовать отдельно и из него вы бы генерировали разметку… хотя для большого словаря конечно это не вариант

aratak May 12 2009 at 17:16

скока букв! :)

aratak May 12 2009 at 17:21

как комплимент автору.
вот проект закончу, обязательно прочитаю.

proc May 12 2009 at 17:19

А что такое " Улушаем"?

Krovosos May 12 2009 at 17:35

Исправил, спасибо.

dsCode May 12 2009 at 17:50

2. удобный поиск нужных элементов по ID

$('#some_id')

ой, не надо вот этот пункт было достоинством приводить =) ладно бы вы написали о «глубоких» CSS-селекторах, но взять элемент по id, и это преимущество jQuery — стыдно…

Krovosos May 12 2009 at 20:28

Но ведь — удобно?

dsCode May 12 2009 at 21:13

Удобно, просто явно пункт не для выделения достоинств jQuery, поскольку, если нужна короткая функция именно для получения элемента по id, то можно и просто алиас для document.getElementById сделать:

var $ = document.getElementById;

$('some-id');

Но, естественно, основная суть jQuery не в этом.

deerua May 15 2009 at 11:46

ДжикВери иногда очень долго селектит, если через ксс3 селекторы, и анимация начинаят под_тупливать ;) а через айдишку, раз и пляшет %) на опыте просто сталкивался много раз ;)

dsCode May 15 2009 at 11:59

> а через айдишку, раз и пляшет %)
Не понял, вы хотите сказать, что jQuery'вский $('#some-id') быстрее родного document.getElementById? Это не возможно, поскольку jQuery внутри себя использует тот же document.getElementById.

deerua May 15 2009 at 12:05

$('.menu div ul') не так быстро обрабатывается как просто $('#ul-id')

dsCode May 15 2009 at 12:51

ну, это уже другой вопрос ;)

gentleman May 15 2009 at 07:22

Ниже автор, видимо желая доказать силу jQuery пишет

this.style.fontWeight = 'bold';

И это при живом то ~~муже~~ jQuery. Нехорошо.

dsCode May 12 2009 at 18:02

> setTimeout(function(){ func(); }, 25);

в данном случае эффективней сразу setTimeout(func, 25);

Krovosos May 12 2009 at 20:29

Пожалуй…

dsCode May 12 2009 at 18:17

Следовательно, этот массив надо сортировать и для этого и пришлось написать быструю сортировку на Javascript и бинарный поиск.

В качестве тренировки, quick-sort можно написать, но, вообще, в JS у массивов есть метод .sort(sortFunctor), который принимает функтор сортировки. Массив объектов по конкретному полю — вполне нормально сортируется этой функцией. К тому же, Си-шный код будет работать быстрее (и, скорей всего, алгоритм на уровне реализации выбран тоже эффективный, может, и тот же quick-sort).

Krovosos May 12 2009 at 20:30

Встроенную сортировку можно применить к массиву объектов?

dsCode May 12 2009 at 21:09

var data = [
    {id: 1, name: 'a'},
    {id: 3, name: 'c'},
    {id: 2, name: 'b'}
];

// сортировка по "name"
var sorted = data.sort(function (a, b) {
    
    var aName = a.name.toLowerCase();
    var bName = b.name.toLowerCase();
    
    if (aName == bName) {
        return 0;    
    }

    if (aName < bName) {
        return -1;    
    }

    return 1;
});

Соответственно, можно улучшить — сделать универсальный функтор сортировки, который будет принимать имя поля параметром и возвращать соответствующую функцию.

Krovosos May 13 2009 at 06:00

О, спасибо.

chiaroscuro May 15 2009 at 05:12

> который принимает функтор сортировки

Не функтор, а функцию сравнения. Функтор из другой оперы (даже двух AFAIK: Си++ и теоркат)

nitpicking :)

dsCode May 15 2009 at 11:27

> Не функтор, а функцию сравнения

en.wikipedia.org/wiki/Function_object

chiaroscuro May 15 2009 at 15:28

Статья интересная, спасибо. (Это кстати то самое, что я имел в виду, когда говорил о функторах C++)

dsCode May 15 2009 at 16:58

> Это кстати то самое, что я имел в виду, когда говорил о функторах C++

Суть та же во всех языках, о которых можно говорить, применительно к этому термину. Коллбэк функции можно назвать функтором.

egoserg May 14 2009 at 18:49

Но есть ведь юзеры которые, отключают js
Понимаюю что это бред, но такие индивидуумы еще есть.

Cataclysm May 14 2009 at 19:02

Если такой индивидуум отключил js, значит он знает и как его включить. Вот пусть и включает.

egoserg May 15 2009 at 08:55

Дорогой друг, сейчас еще навлечу МИНУСОВ на свою голову.
Но могу сказать что есть пользователи которые незнаю что такое браузер,
А что такое JS и как его включить или выключить, для них это вообще темный лес.
По работе часто сталкиваюсь с такими юзерами.
Поскольку проэкты в основном социального характера, и на них 70% юзверов это домохозяйки и тинейжеры.

Cataclysm May 15 2009 at 13:25

Верю. Но я так же уверен, что не больше 1% вообще смогут js выключить.

UFO landed and left these words here

david_mz May 14 2009 at 23:20

Многабуков.

«Упорная проверка опций» делается при помощи jquery-евского extend-а: docs.jquery.com/Utilities/jQuery.extend

crocodile2u May 15 2009 at 04:36

Вы думаете, что вот это будет удобно? —

return "\
<tr><th>Ваше имя <td><INPUT name=user_name>\
<tr><th>Ваш пол <td><INPUT name=sex truevalue='u'>\
<tr><th>Страна происхождения <td><INPUT name=birth_country>\
<tr><th>Страна проживания <td><INPUT name=country>\
";

Далее…

Чего хочется?

Полностью отвязать HTML-код форм от данных. — Что-то не понимаю, мне кажется, этого вы не добились, нет?
Иметь возможность предзагрузки форм. — $(element).val() не подойдет?
Иметь возможность гибко настраивать форму. — Это вообще песня. Под такое требование можно что угодно подогнать, хоть бы и то, с чего я начал свой комментарий… К тому же, вы на этом пункте как-то совсем не остановились.
Иметь удобный выпадающий список с поиском по началу имени. — $(element).autocomplete() ? А то есть и еще куча готовых решений, незачем было в этом топике приводить полностью свое, это ведь, очевидно, не главное, о чем вы собирались поведать. (Я не говорю, что не надо писать ничего своего, просто вы смешали два топика — свой вариант автокомплита для JQuery + свое видение удобных форм)
Отвязать контролы формы от ее окружения. — Это вообще о чем? Мне одному эта фраза кажется инопланетной?
И так далее. — ???

Krovosos May 15 2009 at 06:35

> Вы думаете, что вот это будет удобно? —

Это можно автоматически генерить, я только показал что именно возвращается…

> Полностью отвязать HTML-код форм от данных.

Отчего же нет? У меня есть как минимум два интересных вызова.

director.fill('instance', object) — заполняет форму данными из javascript-объекта, а director.record('instance') возвращает данные формы в виде javascript-объекта.

То есть можно свободно перемещать данные отдельно и формы отдельно.

> Иметь возможность предзагрузки форм. — $(element).val() не подойдет?

Предзагрузки на страницу.

> Иметь возможность гибко настраивать форму

Имелось в виду, что настроечный код формы должен иметь возможность ее как угодно настроить. То бишь он должен иметь доступ к форме и ко всем возможностям jQuery, но быть отвязанным от контекста, чтобы его можно было многократно вызывать при создании экземпляра формы…

> Иметь удобный выпадающий список с поиском по началу имени.

Да, я просто хотел показать как довольно просто в jQuery сделать свой контрол.

Почти все готовое UI что я видел для jQuery — ущербно или ужасно.
Боюсь даже DatePicker не смогу взять, придется свой делать… :(

> Отвязать контролы формы от ее окружения

Имеется в виду размещение контролов. Это еще пока не сделано.

Я хочу сказать, что обычно layout контролов формы задается уже самим HTML.
А хорошее решение должно предусматривать получение контролов как отдельных элементов и «нашпиговку» ими некоей раскладки.

То бишь к форме может быть прицеплен некий layoutManager, который контролы может разместить разными способами.

Например, в виде таблицы. Или еще как-то. Например, можно ему сказать, чтобы подогнал элементы ближе друг к другу. Итд

Prometheus May 15 2009 at 05:53

@ «Ничо не понимаю»

Имхо, правильнее всего было писать html форму (select, input и т.п.), а уже после загрузки документа инициализировать скрипт, меняющий поведение формы (к примеру, заменять select)…
Такой способо вернее, т.к. форма будет работать и без поддержки JS у клиента.

sunnybear May 15 2009 at 10:57

такой способ вернее, но сам select будет тогда «прыгать» на странице — сначала покажется обычный, а потом только стилизованный…
Если вставлять JS-код перед таким селектом, то мы нестилизованный не увидим, конечно. Но и ничего вместо него тоже не увидим, пока будет скрипт грузиться и исполняться.
В общем, корректного решения данной проблемы, насколько мне известно, нет.

Prometheus May 15 2009 at 11:31

Ну если вам не подуше, как вы говорите «пряганье» элементов формы — тогда просто скройте их.
В самом начале документа, скриптом подключите таблицу стилей с display:none для элементов формы. И тогда они у вас (клиентов с JS) не покажутся, отобразится лишь сгенерированный скриптом функционал.
У тех, у кого JS неподдерживается, таблица стилей не подключится и элементы формы будут видны…

Еще можно использовать noscript, но способ выше мне кажется более изящным, без лишнего кода/веса документа.

sunnybear May 15 2009 at 13:59

я соглашусь, что Ваш вариант, пожалуй, самый верный, но он не сильно спасает. Например, если будет большая задержка в отрисовке кастомных элементов, а пользователь начнет заполнять остальные части формы? или попробует ее отправить?