Регистрация    Вход    Форум    Поиск    FAQ

  •  Новости
  • Beeline + Twitter = чирикай через SMS!

    Beeline + Twitter = чирикай через SMS! На первой картинке обозначены команды, при помощи которых через SMS Вы сможете кого-либо зафолловить или же отписаться, ретвитнуть чей-либо пост или же написать личное сообщение.

    Open Graph Protocol. От создателей Facebook

    Open Graph Protocol. От создателей Facebook Разбираясь с Facebook API, случайно наткнулся на другую интересную разработку от этих людей.

    Глобальное ускорение Wordpress

    Глобальное ускорение Wordpress Не считая очевидных решений типа отключения некоторых плагинов и перехода на тему попроще, я вижу 2 пути для оптимизации: кэширование и сжатие траффика.




  •  Часы


  •  Поиск

Optimaze » Программирование » Улучшаем блог с помощью jQuery




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

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


Многие бесплатные 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, конечно (даже восьмой) с углами идет лесом. Вас это удивляет?



Рейтинг: 4.6/5, основан на 25 голосах.


Нравится



Вернутся назад


   

Вам будет интересно:

JSR 292 Review Ballot

Данная спецификация призвана решить проблему языков с динамической типизацией, таких как PHP, Perl, Python при реализации их на Java платформе (имеется ввиду JVM).

Организация навигации по сайту

Всем передвижением по сайту управляет два GET – параметра, передаем мы их в адресной строке, как известно.

Библиотека NHibernate

Тут на помощь пришла библиотека NHibernate, являющаяся реализацией под технологию .NET библиотеки Hibernate под Java.

Silverlight & Web ADF ArcGIS Server

Если у вас есть чувство, что в достаточной мере знаете что такое CLR и прочее - не слишком обольщайтесь.



  •  Публикации


8 методов раскрутки своего форума с нуля

8 методов раскрутки своего форума с нуля Итак, у вас имеется свой собственный форум, но его никто не посещает? Мы готовы помочь вам справиться с этой нелегкой проблемой.

Как привлекать посетителей на проект

Как привлекать посетителей на проект Данная статья в основном рассчитана на тех, кто самостоятельно занимается продвижением своего проекта.

Про MySQL, серверы и PayPal

Про MySQL, серверы и PayPal Проклял все настройки кодировок, проклял DirectAdmin и еле-еле нашел то место где располагается и задается общий пароль для ...

Реклама в Твиттере. Как подать свой продукт

Реклама в Твиттере. Как подать свой продукт Твиттер уже давно стал из нового web 2. 0 сервиса рекламной площадкой с огромным количеством потенциальных пользователей ...

Пока блог на локалхосте

Пока блог на локалхосте Самое время кратко описать, чем нам придется заниматься. Прежде всего нужно понять, что блог ты будешь делать для получения ...

Авторитет блоггера притягивает

Авторитет блоггера притягивает Долго не знал с чего начать данную статью. Статья что-то типа мыслей вслух и философии.