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

25 августа 2009 года, Размещено в категории: jQuery / MooTools

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

скачать

HTML - код:






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

СSS - код:

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>

 

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

// 

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

Мой блог находят по следующим фразам
флеш плеер для сайта html
как правильно росположить картинку для сайта
dicim.net
css чтобы работала на ie8
чем торговать в интернет магазине
player на сайте






5 комментариев

  • 8 лет назад Ответить

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

  • 7 лет назад Ответить

    О, спасибо) Как раз то, что я искала. Сейчас на своем сайте такое же сделаю)

  • 6 лет назад Ответить

    Супер. И сайт супер. Обязательно подпишусь на RSS

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы:

Метки: