К примеру, вы создали форму обратной связи при помощи модуля Drupal «webform». Теперь мы хотели бы, чтоб название в поле (label) выводилось в самом поле ( имеется ввиду, не над полем и не с лева от него, а именно внутри данного поля. При наведении курсора на данное поле, название плавно исчезало и не создавало дополнительных лишних действий.
Для чего это необходимо? А все просто, вы наверное часто замечали формы обратной связи, в которых необходимо удалять текст приведенный для примера в поле «Имя» пишут надпись «ИВАН», как будто мы не понимаем, что необходимо написать. Ну и мало того, эту надпись ещё необходимо удалить, так вот, что бы не мучать наших клиентов мы сегодня научимся её удалять при наведении мышки.
Для этого нам понадобиться добавить в наш css следующий код:
.webform-component label { position:absolute; color: grey; margin-top: 4px; margin-left: 4px; }
Затем нам нужно будет в папке js темы создать новый фаил javascript в который вставим следущий кусочек кода:
jQuery(document).ready(function($){ $(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 на свои.
Как видите, сделать красивую и удобную форму обратной связи либо заказа, довольно просто. Если у кого-то остались ещё вопросы, пишите в комментариях и ставьте лайки.