Блог старого компьютера

Блог старого компьютера


Главная Jquery Всплывающая подсказка у формы ввода на jquery

Всплывающая подсказка у формы ввода на jquery

19.10.2012 07:21 Администратор Jquery
Печать PDF

Продолжаем довольно модную и популярную тему про jquery, но на этот раз это скорее не урок, а готовое решение. Довольно часто нужно сделать поля ввода более интересными и информативными, и даже тут к нам придет на помощь jquery. В данной статье я опишу как сделать всплывающую подсказку которая появляется при условии что форма находится в фокусе.

 И так приступим к написанию кода, а самого исполняющего кода тут будет совсем чуть больше всего будет css которые вы с легкостью сможете изменить под себя и достичь нужного оформления и расположения.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".form").focus(function (){
$(this).next('div.help').fadeIn(500);
});

$(".form").blur(function (){
$(this).next('div.help').fadeOut(300);
});
});
</script>

<style>
body{
font-size:13px;
font-family:Tahoma;
}
input{
border:1px solid silver;
}
.wrappinput{
position:relative;
}
.help{
position:absolute;
opacity:0.7;
background:black;
top:0px;
left:140px;
border:1px solid black;
color:white;
font-size:10px;
padding:2px;
display:none;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}
</style>
</head>

<body>
<div class="wrappinput">
<div>Ваше имя:</div>
<input type="text" name="name" class="form">
<div class="help">Введите свое имя</div>
</div>

<div class="wrappinput">
<div>Email:</div>
<input type="text" name="name" class="form">
<div class="help">Введите ваш Email</div>
</div>

<div class="wrappinput">
<div>Телефон:</div>
<input type="text" name="name" class="form">
<div class="help">Введите свой Телефон</div>
</div>
</body>
</html>

 Вот сообственно и все, в данном коде используется jquery эффект плавного появления fadeIn, который плавно меняет прозрачность элемента до тех пор пока он не достигнет 100 процентов при условии что элемент находится в фокусе. Так же используется функция обратного эффекта fadeOut которая наоборот увеличивает прозрачность элемента и когда прозрачность равна 0 изменяет css свойство display в none при условии что элемент потерял фокус. Дальше и пояснять думаю ни чего не надо, а если и надо то обратившись к остальным темам по jquery все будет ясно.

Далее предлогаю скачать пример этого всего, и обсудить что непонятно в комментариях.

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?