rss

Jquery форма — корректируем поля.

(1 оценили, 5 баллов, средний: 5,00 из 5)
{lang: 'ru'}

Я думаю, многие сталкивались с тем, что когда требуется подредактировать какую-нибудь форму, к примеру, форму обратной связи, либо создать свою с нуля, то поля в форме нужно выравнивать, ну не красиво, если все поля будут "разнокалиберными", т.е. разной ширины, поэтому их нужно будет привести к одной и той же ширине. Можно сделать это с помощью css, но можно и достаточно быстро сделать это
с помощью jquery. Форма от этого не пострадает.

Разработчик Janko Jovanovic, предложил довольно-таки простое и удобное решение для наших с вами полей. Давайте, разберемся с этим решением. Для начала добавим с вами библиотеку jquery. Как вставить jquery в html? Очень просто, сначала скачайте ее с официального сайта, набрав в поисковике jquery. Затем положите файл в папку с файлом .html, а в самом .html между тегами <head></head>, разместите такую строку - <script type="text/javascript" src="/jquery_forma_polya/jquery_1.10.2.min.js"></script> (название скрипта, пишите то, которое скачали).

fieldset label {
float: left;
text-align: right;
}

jquery-forma

Теперь, сам скрипт модифицированный) неравнодушными  пользователями скрипта.

$(function() {
    maxi = 0
    $("fieldset").each(function() {
    $(this).find("label").each(function() {
    width = $(this).width()
    if (width > maxi) {
    maxi = width
    }
    });
    $(this).find("label").width(maxi);
    maxi = 0
    });
    });

jquery-forma-2

Небольшая функция, как видите, делает большое дело. В ней сначала создается переменная, которой присваивается 0. Затем скрипт выполняет фун-цию для каждого из элементов, находит label и сравнивается переменная maxi и width.
В результате мы имеем то, что имеем. Мы могли бы определить ширину полей при помощи css-стилей, просто прописав, для label, input[type="text"] - ширину в 107 пикселей, именно такую ширину имеют поля по умолчанию, но за нас это сделал скрипт, к тому же можно определить свой size для каждого поля самостоятельно, а вот если использовать правила css, то при определении ширины, мы получим поля одинаковой величины, а задача состояла определить поля верного для себя размера.

Прилагаю, то что получилось в итоге, в архиве, кому лень самому писать или что-то не получается...качайте

 

Нет меток к этой записи

Получайте уроки по почте:

0 Comment , источник - wordpress-f1.ru

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: