Здравствуйте. Сегодня мы будем выравнивать, как поля, так и их названия по левому краю. Для этого мы будем использовать CSS-таблицы и небольшой jQuery-скрипт. Что ж, для начала просмотрите демо урока и скачайте необходимые файлы для его выполнения:
Шаг 1. Каркас полей формы
Для начала, мы создадим основу полей нашей формы. Собственно, для примера я взял три поля. Примерный код конструкции полей формы я привожу ниже. Вы можете его использовать и в своей работе:
<div>
<label for="txtName" class="fieldLabel">Имя: </label>
<input typ="text" ID="txtName" class="fieldInput" />
</div><div>
<label for="txtEmail" class="fieldLabel">E-mail: </label>
<input typ="text" ID="txtEmail" class="fieldInput" />
<br />
</div><div>
<label for="txtWeb" class="fieldLabel">Веб-сайт: </label>
<input typ="text" ID="txtWeb" class="fieldInput" />
</div>
Кстати, использование тегов div для отступа между полями здесь обязательно!
Шаг 2. Подключение библиотеки jQuery
Теперь подключим библиотеку jQuery к нашему файлу. Сделаем это следующим образом:
<script type="text/javascript" src="js/jquery.js"></script>
Шаг 3. Подключение каскадных таблиц.
Далее, как Вы уже поняли, нам нужно подключить каскадные таблицы стилей. Использовать стилей мы будем совсем немного и поэтому разместим их сразу между тегами <head> и </head>:
<style type="text/css">label, input[type="text"]{
float:left;
display:block;
}
label
{
margin-right: 5px;
}
.field{
width:100%;
overflow:auto;
margin:5px 0px;
}
</style>
Шаг 4. Вставка основного jQuery-кода.
Остался последний этап, в котором мы вставим основной jQuery-скрипт, играющий основную роль в выравнивании полей и их названий. Размещать его мы будем перед закрытием тега head, сразу после подключения нашего фреймворка. Ну, собственно, вот и этот код:
<script type="text/javascript">$(document).ready(function() {
var max = 0;
$("label").each(function(){
if ($(this).width() > max)
max = $(this).width();
});
$("label").width(max);
});
</script>
Заключение.
Вот, собственно, и все. Думаю, этот урок пришелся Вам по душе. До новых встреч!