Jquery форма {lang: ‘ru’}
Я думаю, многие сталкивались с тем, что когда требуется подредактировать какую-нибудь форму, к примеру, форму обратной связи, либо создать свою с нуля, то поля в форме нужно выравнивать, ну не красиво, если все поля будут»разнокалиберными», т. е. разной ширины, поэтому их нужно будет привести к одной и той же ширине. Можно сделать это с помощью css, но можно и достаточно быстро сделать это с помощью jquery. Форма от этого не пострадает.
Разработчик Janko Jovanovic, предложил довольно-таки простое и удобное решение для наших с вами полей. Давайте, разберемся с этим решением. Для начала добавим с вами библиотеку jquery. Как вставить jquery в html? Очень просто, сначала скачайте ее с официального сайта, набрав в поисковике jquery. Затем положите файл в папку с файлом. html, а в самом. html между тегами, разместите такую строку — (название скрипта, пишите то, которое скачали).
fieldset label {
float: left;
text-align: right;
}
Теперь, сам скрипт модифицированный) неравнодушными пользователями скрипта.
$ (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
});
});
Небольшая функция, как видите, делает большое дело. В ней сначала создается переменная, которой присваивается 0. Затем скрипт выполняет фун-цию для каждого из элементов, находит label и сравнивается переменная maxi и width. В результате мы имеем то, что имеем. Мы могли бы определить ширину полей при помощи css-стилей, просто прописав, для label, input[type=»text»] — ширину в 107 пикселей, именно такую ширину имеют поля по умолчанию, но за нас это сделал скрипт, к тому же можно определить свой size для каждого поля самостоятельно, а вот если использовать правила css, то при определении ширины, мы получим поля одинаковой величины, а задача состояла определить поля верного для себя размера.
Прилагаю, то что получилось в итоге, в архиве, кому лень самому писать или что-то не получается… качайте
[embedded content]
Похожие статьи:
Нет меток к этой записи