Водяная надпись в формах, с помощью плагина 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 на сайте
12 лет назад
А зачем этот знак нужен? Может пример приведете — я гляну в работе этот скриптег:)
12 лет назад
Я тоже не понял зачем это (для красоты чтоли)
WebNata
11 лет назад
О, спасибо) Как раз то, что я искала. Сейчас на своем сайте такое же сделаю)
Саня
10 лет назад
Супер. И сайт супер. Обязательно подпишусь на RSS
10 лет назад
Спасибо.