Форумы портала PHP.SU :: Версия для печати

1. alexiy - 18 Сентября, 2013 - 23:15:06 - перейти к сообщению

решил сделать плагин что-то на подобии 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;
}
 