Здравствуйте уважаемые пользователи! Простите, что так долго не было новостей.
Сегодня мы продолжаем уроки о JQuery, а вот по конкретнее как с помощу JQuery стилизировать различные формы.
В этом уроке мы рассмотрим только форму обратной связи, но в следующем уже более сложные вещи.
И так приступ ;)
1) Шаг первый.
Нам в этом уроке нужно три файла, а конкретнее index.php, jquery.js и style.css. Внимание это полностью рабочая форма вы можете в своем сайте создать каталог, далее туда копировать эти два файла и поставить ссылку с вашего сайта.
И так в файле index.php должно быть следующее:
Это был файл index.php, теперь перейдем дальше.
Шаг 2 файл style.css
body
{
font-family: Arial, Sans-Serif;
font-size: 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
{
background-image: none;
background-color: #ffffff;
border: 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;
}
Шаг три файл jquery.js
<script type="text/javascript">
$(document).ready(function(){
$("input, textarea").addClass("idle");
$("input, textarea").focus(function(){
$(this).addClass("activeField").removeClass("idle");
}).blur(function(){
$(this).removeClass("activeField").addClass("idle");
});
});
</script>
На этом все все должно работать. Ну если, что то не так обращайтесь.
Сегодня мы продолжаем уроки о JQuery, а вот по конкретнее как с помощу JQuery стилизировать различные формы.
В этом уроке мы рассмотрим только форму обратной связи, но в следующем уже более сложные вещи.
И так приступ ;)
1) Шаг первый.
Нам в этом уроке нужно три файла, а конкретнее index.php, jquery.js и style.css. Внимание это полностью рабочая форма вы можете в своем сайте создать каталог, далее туда копировать эти два файла и поставить ссылку с вашего сайта.
И так в файле index.php должно быть следующее:
<?php
// Эмеил админа
$adminmail = "mymail@mail.ru";
// тут проверяем отправлена ли форма
if(!$_POST['send']){
?>
<!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>Форма обратной связи</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<!--Каркас-->
<div id="inputArea">
<form method="post">
<label>Ваше имя:</label><input type="text" name="Uname" />
<label>Ваш e-mail:</label><input type="text" name="Uemail" />
<label>Тема письма:</label><input type="text" name="Usubject" />
<label>Текст сообщения:</label><textarea rows="4" cols="30" name="Umessage"></textarea>
<input type="hidden" name="send" value="send" />
<input type="submit" value="Отправить">
</form>
</div>
</body>
</html>
<?php
} else {
// Получаем информацию и удаляем пробелы по бокам
$uname = trim( $_POST['Uname'] );
$uemail = trim( $_POST['Uemail'] );
$usubject = trim( $_POST['Usubject'] );
$umessage = trim( $_POST['Umessage'] );
// Теперь сделаем такое :)
if( mail( $adminmail, $usubject, "Пользователь, $uname.
Отправил сообщение вам:
---
$umessage
---
Его майл: $uemail;
С уважением,
Ваш любимый робот." ) ){
?>
<!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>Форма обратной связи</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<!--Сообщение о отправке-->
Отправлено, в течении 2-3 дней вам ответят
</body>
</html>
<?php
} else {
?>
<!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>Форма обратной связи</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<!--Сообщение о ошибке-->
Ошибка попробуйте еще раз
</body>
</html>
<?php
}
}
?>
Это был файл index.php, теперь перейдем дальше.
Шаг 2 файл style.css
body
{
font-family: Arial, Sans-Serif;
font-size: 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
{
background-image: none;
background-color: #ffffff;
border: 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;
}
Шаг три файл jquery.js
<script type="text/javascript">
$(document).ready(function(){
$("input, textarea").addClass("idle");
$("input, textarea").focus(function(){
$(this).addClass("activeField").removeClass("idle");
}).blur(function(){
$(this).removeClass("activeField").addClass("idle");
});
});
</script>
На этом все все должно работать. Ну если, что то не так обращайтесь.
Комментариев нет:
Отправить комментарий