Водяная надпись в формах, с помощью плагина Watermark

25.08.2009   |  

jQuery   |  

Комментарии (2)

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

скачать

HTML – код:

1
2
3
4
5

<label for="txtKeyword">Логин:</label>
<input id="txtKeyword" class="txt" title="Введите желаемый логин" name="txtKeyword" size="40" type="text" />
 
<label for="txtLocation">Пароль:</label>
<input id="txtLocation" class="txt" title="Не более 15 символов" name="txtLocation" size="40" type="text" />

Теперь форма у нас есть.

СSS – код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

body  {
font-family: Sans-serif;
font-size: small;
}
 
label  {
vertical-align: middle;
}
 
.txt  {
border: solid 1px #999;
padding: 2px;
margin: 0;
height: 1.25em;
vertical-align: middle;
}
 
.updnWatermark  {
position: relative;
width: 0;
height: 1.25em;
vertical-align: middle;
}
/* IE7/6 */
.updnWatermark  {
*zoom: 1;
}
.updnWatermark label  {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
color: #999;
padding-left: 4px;
height: 1.25em;
vertical-align: middle;
}

Css код с комментариями, вы сможете найти, скачал архив.

Не забываем прикрутить фреймворк jQuery.
1.  Фреймворк jQuery (jquery-1.3.2.min.js)
2. Наш плагин (jquery.updnWatermark.js)
Все эти файлы есть в архиве, и не забывайте их вставить между тегами <head></head>

1
2

<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="jquery.updnWatermark.js" type="text/javascript"></script>

Вставляем JavaScript между тегами <body> </ body>

1
2
3

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){$.updnWatermark.attachAll();});
// ]]></script>

Жду Ваших комментариев! Подписываемся на RSS-новости.

Нет времени на  продвижение сайта, тогда обратись к профессионалам, они найдут время продвинуть твой сайт, за небольшую плату.

Интересные статьи:

  1. А зачем этот знак нужен? Может пример приведете – я гляну в работе этот скриптег:)

  2. Green 28.08.2009 04:04

    Я тоже не понял зачем это (для красоты чтоли)

Оставь свое мнение:




Подпишись на обновление блога