решил сделать плагин что-то на подобии Placeholder
CODE ( javascript):
скопировать код в буфер обмена
(function( $ ){ $.fn.plh = function(){ var inputField = this.children('div').children('input'); var label = this.children('div').children('label'); inputField.focus(function(){ $(this).prev('label').addClass('hide'); }); inputField.blur(function(){ $(this).prev('label').addClass('show'); }); }; })( jQuery );
CODE ( html):
скопировать код в буфер обмена
<html> <head> <script type = "text/javascript" src = "jquery.js"></script> <script type = "text/javascript" src = "jquery.placeholder.js"></script> <link rel="stylesheet" href="style.css"/> <script type = "text/javascript"> $(document).ready(function(){ $('#plh_form').plh(); }); </script> </head> <body> <form action="" id = "plh_form"> <div> <label for="name">Name</label> <input type="text" id="name"> </div> <div> <label for="surname">Surname</label> <input type="text" id="surname"> </div> <div> <label for="password">Password</label> <input type="password" id="password"> </div> <div> <label for="city">City</label> <input type="text" id="city"> </div> </form> </body> </html>
CODE ( htmlphp):
скопировать код в буфер обмена
form#plh_form div { margin: 5px 20px 5px 20px; position: relative; } form#plh_form div label { position: absolute; top: 3px; left: 6px; color: #999999; } form#plh_form div input { margin-right: 10px; width: 150px; } .hide{ visibility: hidden; } .show{ visibility: visible; }
работает как и хотел, но фишка в том, что когда потыкаешь на все инпуты, если снова нажать на один из инпутов, то код не сработает, плагин сработает только один раз для каждого элемента, как это можно исправить?
|
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)
Без описания
