Опубликовано пн, 11/18/2013 - 21:02 пользователем stillfinder
Допустим у нас есть форма созданная с помощью модуля webform и мы хотим, чтобы название поля выводилось внутри самого поля, а при наведении мышки на это поле название исчезало. Для этого добавляем в наш css следующий код:
CSS:
.webform-component label { position:absolute; color: grey; margin-top: 4px; margin-left: 4px; }
А в javascript файл темы такой кучек кода:
JavaScript:
$(document).ready(function(){ //alert(1); $('.webform-client-form label').each(function(i){ var label=this; var input=$("#"+($(this).attr('for')).toString()); $(input).blur(function(){ $(input).removeClass("focus"); if($(input).attr("value")==""){ $(label).stop(); $(label).animate({"opacity":1},500); } }); $(input).focus(function() { $(input).addClass("focus") }); if ($(input).attr("value")!=""){ $(label).css("opacity",0); } $(input).bind('mouseover', function (){ $(label).stop(); $(label).animate({"opacity":0},500); $('.webform-client-form label').css("cursor","text"); }); $(input).bind("mouseout", function (){ if (!$(input).hasClass("focus")){ if($(input).attr("value")==""){ $(label).stop(); $(label).animate({"opacity":1},500); } } }); $(input).bind('keyup', function (){ if($(input).attr("value")==""){ $(label).stop(); $(label).animate({"opacity":0},500); } else { $(label).stop(); $(label).animate({"opacity":0},500); } }); }); });
Для использования не с webforms нужно только заменить в коде js следующие классы: webform-client-form, а в css webform-component на свои.
Комментарии
закинул код в js, прописал
Какая у Вас Версия Drupal?
Добавить комментарий