Улучшаем блог с помощью jQuery

Многие бесплатные WP-темы бедны на эффекты. Я поддерживаю минимализм, но считаю, что проходить мимо некоторых приятных глазу эффектов просто глупо.

Для начала обратите взгляд на форму комментариев. Хотите, чтобы при фокусировке на поле ввода текст расстворялся, а при расфокусировке появлялся снова, если пользователь ничего не ввел (как на Grabr.ru, к примеру)? Это не так и сложно. Потребуется только подключенная к блогу jQuery (как это сделать, читайте здесь)

 

Сначала html-каркас:

 

<div class="input-wrapper">

<p><input type="text" name="author" id="author" value="" size="22" tabindex="1" />

<label>Name</label></p>

</div>

<div class="input-wrapper">

<p><input type="text" name="email" id="email" value="" size="22" tabindex="2" />

<label>E-mail</label></p>

</div>

<div class="input-wrapper">

<p><input type="text" name="url" id="url" value="" size="22" tabindex="3" />

<label>Your personal website</label></p>

</div>

Стили CSS:

 

.input-wrapper{

position:relative;

}

 

label{

position:absolute;

left:5px;

top:1px;

z-index:1;

color:#939393;

}

Блок с отностительным (relative) позиционированием, обрамляющий поле ввода, нужен, чтобы текст надписи (label) не убегал наверх. Ну, и наконец jQuery-код:

 

jQuery("input").focus(function(){

if (jQuery(this).val() == ''){

jQuery(this).next('label').fadeOut('fast');

}

});

jQuery("input").blur(function(){

if (jQuery(this).val() == ''){

jQuery(this).next('label').fadeIn('slow');

}

});

 

jQuery("label").click(function(){

if (jQuery(this).prev('input').val() == ''){

jQuery(this).fadeOut('fast');

}

});

Ну, и немного CSS на десерт. Закругляем углы у полей и текстовой области (textarea):

 

input [type="text"], textarea{

border:1px solid gray!important;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

}

input[type="text"]:hover, textarea:hover{

border:1px solid #808080;

}

IE, конечно (даже восьмой) с углами идет лесом. Вас это удивляет?