jQuery

индекс

283,92

Улучшаем формы с jqTransform

Если у вас не хватает времени привести в порядок формы на вашем сайте, в помощь придет небольшой плагин jqTransform.
Подключите его и скормите форму. На выходе получится визуально более приятная форма с подсветкой полей в фокусе.

Посмотреть демо
Скачать исходники с примером

Пример:

<script type="text/javascript"> $(function() { $(".myform").jqTransform(); }); </script> * This source code was highlighted with Source Code Highlighter.

PS: работает с jQuery от 1.2.6 до последней версии

13 августа 2010, 12:41

Butylski

комментарии (48)

–6

Kakysha 13 августа 2010, 12:54 #

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

+12

rzoner 13 августа 2010, 12:54 #

Симпатично, в фф 3.6.8 курсор в поле ввода вылазит за рамку.

–4

Butylski 13 августа 2010, 12:57 # ↑

точно, посмотрел под Ubuntu в FF 3.6.8 так же, думаю доточить немного css не проблема :)

noRerih 13 августа 2010, 13:31 # ↑

то есть если нет времени на «привести в порядок формы», надо искать время на ручные допилы?))

–3

Butylski 13 августа 2010, 13:36 # ↑

нет ;) зайти на Хабр и взять готовое решение

UUSER 13 августа 2010, 13:06 # ↑

В опере тоже сбит вниз

mdss 13 августа 2010, 13:11 # ↑

в стилях у класса .jqTransformInputInner div input свойству padding задать величину равную нулю надо, тогда все нормально с отступами станет

–4

wpm1 13 августа 2010, 13:18 # ↑

Йода магистр вы?

+11

madimp 13 августа 2010, 12:57 #

Довольно бажно сверстано. Неверная обработка «событий клавиатуры» в селектах.
Пилить и пилить.

Butylski 13 августа 2010, 12:59 # ↑

да. в принципе многие опенсорсные проекты недоработаны, надо дотачивать напильником

madimp 13 августа 2010, 13:01 # ↑

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

XuMiX 13 августа 2010, 13:37 # ↑

так допиливайте и выкладывайте! на то он и опенсорс, возможностей сейчас масса- тот же bitbucket/github/gc

madimp 13 августа 2010, 13:39 # ↑

Я бы допилил, не грозил бы если допил переписыванием заново.
Проще с нуля написать.

XuMiX 13 августа 2010, 13:44 # ↑

тогда перепишите и выкладывайте, в чем проблема-то?
вы же хотите, чтобы вам было все готовое, а сами при этом делиться наработками не желаете

madimp 13 августа 2010, 13:44 # ↑

Очень даже желаю и делюсь. Только более или менее допиленными.

Butylski 13 августа 2010, 13:03 #

на то оно и opensource, чтобы общественность доделывала то, что предыдущие не успели ;)

madimp 13 августа 2010, 13:05 # ↑

Сам проект от этого развития не получит. Каждый для себя допилит и все. Бессмысленный информационный мусор.

ImEugene 13 августа 2010, 13:05 #

Однозначно, конечно, говорить не стоит, но не стал бы использовать. Уж лучше потратить некоторое, пусть и очень ограниченное время, но привести форму в кое-какой божеский вид, чем использовать это =)

madimp 13 августа 2010, 13:06 # ↑

Полностью согласен с Вами.

Butylski 13 августа 2010, 13:13 #

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

madimp 13 августа 2010, 13:25 # ↑

Отличная идея :)

Kain_Haart 13 августа 2010, 16:31 # ↑

Было бы здорово

ChemAli 13 августа 2010, 13:27 #

Чем CSS не устроил?

be3_max 13 августа 2010, 14:00 # ↑

CSS хорошо, но c select, radio, checkbox… — проблемы которые займут много времени. Есть время\желание строим на css что сможем, нет, то пользуем такие плагины. Есть выбор, все счастливы :)

rule 13 августа 2010, 13:30 #

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

Butylski 13 августа 2010, 13:32 # ↑

мне дефолтные тоже нравятся, только в разных ОС они выглядят по-разному.

rule 13 августа 2010, 13:44 # ↑

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

glazs 13 августа 2010, 13:32 #

Убожество.

glazs 13 августа 2010, 13:34 # ↑

К тому же, навигация с клавиатуры работает убого.

rednaxi 13 августа 2010, 13:33 #

Не очень разработка, кое-где плывет img841.imageshack.us/img841/9876/18122753.jpg

Ну и что не нравится что субъективно форма стала «тормозить» — например выпадающий список разворачивается гораздо дольше, чем обычный. Использовать не стал бы, лучше верстальщика попросить написать нормальные css для форм

mdss 13 августа 2010, 14:40 # ↑

систменые стили (такие как выпадающий список, чекбокс, радиокнопка) нельзя украсить с помощью css (ну разве что только задать рамку другого цвета и шрифты), это все делается только с помощью скриптов (

wpm1 13 августа 2010, 13:43 #

Есть opensource компонент форм для joomla довольно прилично выглядящий во всех браузерах
forms.amadika.ru/index.php?option=com_electroforms&view=form&id=1&Itemid=53
Но это только для Joomla, повторюсь.

GRINDER33 13 августа 2010, 13:50 #

Попробовал прикрутить в своём проекте — всё разъехалось и только. Никаких плавных веб2.0 инпутов не образовалось. Жаль.

XuMiX 13 августа 2010, 13:52 # ↑

vdv-up.ru/add вот тут у меня вроде неплохо справляется

GeniyZ 13 августа 2010, 14:03 # ↑

в IE8 — да, неплохо.
а вы браузерами проверяли??
FF 3.6.8 — убого =(

–1

XuMiX 13 августа 2010, 14:12 # ↑

у меня в хроме/ие/FF3.4@mac работало нормально

s1im 13 августа 2010, 13:58 #

Вот тут еще тьма этих плагинов: plugins.jquery.com
Давайте же скорее напишем о каждом!!!

WarGot 13 августа 2010, 14:01 #

Ох сколько нам жизни попортил этот JqTransform. Если вы предполагаете возможность работать с формой с помощью jq, например догружать какие-то данные после выбора из выпадающего списка или что-нить подобное, в общем любые манипуляции с элементами формы лучше сразу откажитесь от этого плагина вместо того чтобы наравачивать лишний код.

XuMiX 13 августа 2010, 14:49 # ↑

то есть сделать .jqTransSelect() или .jqTransText() не получалось?(не помню уже точные называния методов)

SpirITzzz 13 августа 2010, 15:14 # ↑

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

В общем, проблем было много, в итоге мы на это дело плюнули и отказались от этого плагина. Хотя свою нишу применения он всё-таки имеет, но для сложных интерфейсов (ну или несложных), где предполагается манипуляция с формами и полями, лучше сразу откажитесь от затеи использования сиво чуда :)

XuMiX 13 августа 2010, 16:10 # ↑

ну, у меня вроде нормально получилось. Просто этот плагин оказался самым рабочим «из коробки»

SpirITzzz 14 августа 2010, 00:00 # ↑

Вам очень повезло :) Видимо Вы не пытались мучить его так, как это делали мы :)))

FTDeBUGgeR 13 августа 2010, 14:48 #

А это что, красиво? Мне кажется легче десяток строк на css набросать (отступы и ширину элементов), и то что в примере «ДО» будет смотреться вполне себе ничего.