Сегодня мы рассмотрим урок как с помощью jQuery можно стилизировать различные формы.
На данный момент мы будет стилизировать формы для обратной связи.
И так приступ :)
1) Первый шаг.
По традиции создаём файлы index.html и style.css
В index.html прописываем следующее
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Урок jQuery № 2 - "Стилизация форм с помощью jQuery"</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="jquery.js" type="text/javascript"></script>
2) Второй шаг.
Создаём каркас для обратной связи.
<div id="inputArea">
<form method="post" action="#">
<label>Ваше имя:</label><input type="text" />
<label>Ваш e-mail:</label><input type="text" />
<label>Тема письма:</label><input type="text" />
<label>Текст сообщения:</label><textarea rows="4" cols="30"></textarea>
<input type="submit" value="Отправить"></form>
</div>
</body></html>
3) Третий шаг.
Теперь поработает немного над css, чтобы сделать нашу обратную связь красивее
body
{
font-fam
ily: Arial, Sans-Serif;
font-siz
e: 13px;
}
/*
=============================================================
Общие настройки
=============================================================
*/
#input
{
font-family: Arial, Sans-Serif;
font-size: 13px;
background-color: #ffffff;
padding: 10px;
width:440px;
}
#inputArea input, #inputArea textarea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
width: 430px;
}
/*
=============================================================
обводка форм
=============================================================
*/
.activeField
{
backgrou
nd-image: none;
backgrou
nd-color: #ffffff;
border&#
58; solid 1px #046e8c;
}
/*
=============================================================
Градиен форм
=============================================================
*/
.idle
{
border: solid 1px #85b1de;
background-image: url( '../images/gray_bg.png' );
background-repeat: repeat-x;
background-position: top;
background-color:#FFFFFF;
}
5) Пятый шаг
Теперь наша цель, сделать, чтобы форма правильно и красиво отображалась.
Прописываем следующий код между тегами и
<script type="text/javascript">
$(document).ready(function(){ &
nbsp;
$("input, textarea").addClass("idle"); &nbs
p;
$("input, textarea").focus(function(){
$(this).addClass("activeField").removeClass(&#
34;idle");
}).blur(function(){ &nb
sp;
$(this).removeClass("activeField").addClass(&#
34;idle");
});
});
</script>
ДемоПо материалам сайта:
Российская школа CSS
