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

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

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

    Пример:
    <script type="text/javascript">
    $(function() {
      $(".myform").jqTransform();
    });
    </script>


    * This source code was highlighted with Source Code Highlighter.


    PS: работает с jQuery от 1.2.6 до последней версии
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 48

      –6
      Довольно приятно, взял на заметку.
        +12
        Симпатично, в фф 3.6.8 курсор в поле ввода вылазит за рамку.
          –4
          точно, посмотрел под Ubuntu в FF 3.6.8 так же, думаю доточить немного css не проблема :)
            +4
            то есть если нет времени на «привести в порядок формы», надо искать время на ручные допилы?))
              –3
              нет ;) зайти на Хабр и взять готовое решение
            +4
            В опере тоже сбит вниз
              +2
              в стилях у класса .jqTransformInputInner div input свойству padding задать величину равную нулю надо, тогда все нормально с отступами станет
                –4
                Йода магистр вы?
              +11
              Довольно бажно сверстано. Неверная обработка «событий клавиатуры» в селектах.
              Пилить и пилить.
                0
                да. в принципе многие опенсорсные проекты недоработаны, надо дотачивать напильником
                  0
                  И это не радует. Не потому что допиливать, а потому что выпускаются в свет сырые продукты, которые чаще всего таковыми и остаются.
                    0
                    так допиливайте и выкладывайте! на то он и опенсорс, возможностей сейчас масса- тот же bitbucket/github/gc
                      0
                      Я бы допилил, не грозил бы если допил переписыванием заново.
                      Проще с нуля написать.
                        0
                        тогда перепишите и выкладывайте, в чем проблема-то?
                        вы же хотите, чтобы вам было все готовое, а сами при этом делиться наработками не желаете
                          0
                          Очень даже желаю и делюсь. Только более или менее допиленными.
                0
                на то оно и opensource, чтобы общественность доделывала то, что предыдущие не успели ;)
                  +8
                  Сам проект от этого развития не получит. Каждый для себя допилит и все. Бессмысленный информационный мусор.
                  +2
                  Однозначно, конечно, говорить не стоит, но не стал бы использовать. Уж лучше потратить некоторое, пусть и очень ограниченное время, но привести форму в кое-какой божеский вид, чем использовать это =)
                    0
                    Полностью согласен с Вами.
                    +4
                    хм… надо организовать проект HabraTesting, разработка качественно улучшится
                      0
                      Отличная идея :)
                        0
                        Было бы здорово
                        0
                        Чем CSS не устроил?
                          0
                          CSS хорошо, но c select, radio, checkbox… — проблемы которые займут много времени. Есть время\желание строим на css что сможем, нет, то пользуем такие плагины. Есть выбор, все счастливы :)
                          +1
                          а мне стандартные элементы намного больше нравятся, чем эти. Может конечно иногда и есть необходимость изменить внешний вид элементов форм, но мне кажется, что лучше использовать эту возможность в крайних случаях.
                            0
                            мне дефолтные тоже нравятся, только в разных ОС они выглядят по-разному.
                              +1
                              в том их прелесть, так как они выглядят нативно (от браузера конечно зависит, но обычно это так).
                            +7
                            Убожество.
                              +1
                              К тому же, навигация с клавиатуры работает убого.
                              0
                              Не очень разработка, кое-где плывет img841.imageshack.us/img841/9876/18122753.jpg

                              Ну и что не нравится что субъективно форма стала «тормозить» — например выпадающий список разворачивается гораздо дольше, чем обычный. Использовать не стал бы, лучше верстальщика попросить написать нормальные css для форм
                                0
                                систменые стили (такие как выпадающий список, чекбокс, радиокнопка) нельзя украсить с помощью css (ну разве что только задать рамку другого цвета и шрифты), это все делается только с помощью скриптов (
                                0
                                Есть opensource компонент форм для joomla довольно прилично выглядящий во всех браузерах
                                forms.amadika.ru/index.php?option=com_electroforms&view=form&id=1&Itemid=53
                                Но это только для Joomla, повторюсь.
                                  0
                                  Попробовал прикрутить в своём проекте — всё разъехалось и только. Никаких плавных веб2.0 инпутов не образовалось. Жаль.
                                    0
                                    vdv-up.ru/add вот тут у меня вроде неплохо справляется
                                      +1
                                      в IE8 — да, неплохо.
                                      а вы браузерами проверяли??
                                      FF 3.6.8 — убого =(
                                        –1
                                        у меня в хроме/ие/FF3.4@mac работало нормально
                                    +5
                                    Вот тут еще тьма этих плагинов: plugins.jquery.com
                                    Давайте же скорее напишем о каждом!!!
                                      +1
                                      Ох сколько нам жизни попортил этот JqTransform. Если вы предполагаете возможность работать с формой с помощью jq, например догружать какие-то данные после выбора из выпадающего списка или что-нить подобное, в общем любые манипуляции с элементами формы лучше сразу откажитесь от этого плагина вместо того чтобы наравачивать лишний код.
                                        0
                                        то есть сделать .jqTransSelect() или .jqTransText() не получалось?(не помню уже точные называния методов)
                                          +1
                                          именно, у нас выползло много ситуаций, из которых приходилось выходить очень извращенными способами, были проблемы с селекторами полей и выпадающими списками, и тд и тп.

                                          В общем, проблем было много, в итоге мы на это дело плюнули и отказались от этого плагина. Хотя свою нишу применения он всё-таки имеет, но для сложных интерфейсов (ну или несложных), где предполагается манипуляция с формами и полями, лучше сразу откажитесь от затеи использования сиво чуда :)
                                            0
                                            ну, у меня вроде нормально получилось. Просто этот плагин оказался самым рабочим «из коробки»
                                              +1
                                              Вам очень повезло :) Видимо Вы не пытались мучить его так, как это делали мы :)))
                                        0
                                        А это что, красиво? Мне кажется легче десяток строк на css набросать (отступы и ширину элементов), и то что в примере «ДО» будет смотреться вполне себе ничего.
                                          0
                                          ctrl+A у Вас заблокирован? в текстареа понадобилось сделать ctrl+A, но увы…
                                            +1
                                            Плагин не его, он просто разместил объяву.
                                            +1
                                            Какие страшные инпуты!
                                              0
                                              Мне наоборот нравится что у каждого браузера свой стиль отображения форм.
                                                0
                                                Не воодушевил меня этот плагин. Мне понравился вот этот: pixelmatrixdesign.com/uniform/#example

                                                Only users with full accounts can post comments. Log in, please.