Здравствуйте. В этом уроке Вы узнаете, как можно встроить небольшое изображение в поля формы с помощью jQuery.
Шаг 1. HTML-каркас формы.
Каркас необходимой нам формы будет предельно простым. Вы можете сами построить его, а затем сравнить полученный результат с моим или просто скопировать ниже приведенный текст и вставить там, где Вам будет это нужно:
Code
<fieldset id="sampleForm">
<label>Полное имя (Ф. И. О.)</label><input type="text" />
<label>Дата рождения</label><input type="text" class="inputWithImge" />
<img src="calendar.png" alt="Нажмите на календарик для выбора даты" onclick="alert('А здесь должен вылетать Ваш календарик!');" />
<label>Город</label><input type="text" />
<label>Индекс</label><input type="text" />
<label>Страна</label><input type="text" />
<p><input name="send" type="button" value="Отправить" /></p>
</fieldset>
Здесь я уже присоединил необходимые стили к полям формы и изображение с календариком.
Шаг 2. Стилизация формы:
Вторым этапом нашей работы будет конечно же стилизация формы. Здесь мы всего лишь изобразим те стили, которые присваивали элементам формы и немного поиграемся с ними. Код стилизации будет выглядеть следующим образом вставьте его между тегами <head> и </head>
Code
<style type="text/css">
body { font-family: Arial, Helvetica, Sans-serif; font-size:13px;}
#sampleForm label { display:block; margin-top:10px;}
#sampleForm input[type="text"] { width:200px; border:solid 1px #000; padding:3px 0px;}
#sampleForm img { vertical-align:middle; cursor:pointer; }
.imageInputWrapper{ width:200px; border:solid 1px #000; }
#sampleForm input.inputWithImge { width:175px; border:none; margin-right:5px;}
</style>
Шаг 3. "Привязка" основного фреймфорка jQuery.
Теперь мы обязательно должны "привязать" фреймворк jQuery. Ниже я разместил код так называемой "привязки", который Вы должны вставить между тегами head и /head своего документа:
Code
<script src="jquery.js" type="text/javascript"></script>
Шаг 4. jQuery-доработки.
Теперь мы должны немного доработать нашу форму. Чтобы она правильно и красиво отображалась нам нужно вставить небольшой jQuery-код между тегами head и /head. Выглядеть он будет следующим образом:
Code
<script type="text/javascript">
$(document).ready(function() {
$(".inputWithImge").each(function(){
$(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>');
});
});
</script>
Вот и все готово!
icons-in-inputs.zip
Сайт
Форум
Фотоальбом
Настройки
Расширенный поиск
Лента новостей
05.06.2010, Суббота в 22:48
