Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Fucus в Jquery (https://javascript.ru/forum/misc/18399-fucus-v-jquery.html)

DoubleShot 29.06.2011 12:33

Fucus в Jquery
 
Здравствуйте, я только начал изучать Jquery и сам JS.
При верстке макета мне нужно сделать ,чтоб при фокусе на input тег p был в красной рамке а если фокус не было рамка исчезала!

// Popup window
$(document).ready(function() {   
    $('a[name="modal"]').click(function(e) {
        e.preventDefault();
        var id = $(this).attr('href');
  
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
  
        $('#mask').css({'width':maskWidth,'height':maskHeight});
  
        $('#mask').fadeTo(200, 0.2); 
  
        var winH = $(window).height();
        var winW = $(window).width();
  
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
  
        $(id).fadeIn(200); 
    });
  
    $('.window .close').click(function (e) {
        e.preventDefault();
        $('#mask, .window').hide();
    }); 
 
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    }); 
  
}); 
// Input Shadow 
$(document).ready(function() {   
    $('#login_name, #login_password').focus(function(){
        $('.login-form p').addClass('RedShadow')
    });
});


<form action='' method="post" class="login-form" >
        <label>
            <span>Логин:</span>
            <p><input type="text" name="login_name" id="login_name" /></p>
        </label>
        <label>        
            <span>Пароль:</span>
            <p><input type="password" name="login_password" id="login_password" /></p>
        </label>
    </form>

melky 29.06.2011 12:45

можно и на CSS.. частично. добалять класс к элементу. а в классе CSS находятся нужные вам стили

<style>
.focused {border:3px red solid}
</style>

<script src="http://yandex.st/jquery/1.6.1/jquery.min.js"></script>

<form action='' method="post" class="login-form" >
        <label>
            <span>Логин:</span>
            <p><input type="text" name="login_name" id="login_name" /></p>
        </label>
        <label>        
            <span>Пароль:</span>
            <p><input type="password" name="login_password" id="login_password" /></p>
        </label>
    </form>

<script>

$( "input" ).bind( 'blur focus', null,function(a){

$(this).parent().toggleClass('focused');

} )
</script>

DoubleShot 29.06.2011 13:11

Спасибо)


Часовой пояс GMT +3, время: 17:52.