Приветствую Вас Прохожий | RSS Суббота, 10.12.2016, 08:00
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 4
Гостей: 4
Пользователей: 0



Главная » Файлы » Для веб мастера » Разное Веб мастер

Эффект растягивания форм как в соц. сетях

Эффект растягивания форм как в соц. сетях apple, jquery, focus, animate, растягивание, форм, вконтакте
Я уже ненавижу слово - "Как вконтакте" но что делать если именно пользователи системы uCoz, задают такие вопросы, поэтому я стараюсь не отойти от традиции их понимания :) извиняюсь если пишу не понятно.
Этот скрипт написан на jQuery, (естественно) он растягивает любые формы с анимацией, а если вы хотите без анимацией, то не нужно писать мне а просто возьмите учебники по css и выучите пару строк кода.




Из начале такой эффект придумала компания apple, после этого многие социальные сети, начиная с твиттера и фейсбука и продолжая сети вконтакте.ру ее используют. И вот уже были вопросы про этот эффект, что бы в дальнейшем не возникали вопросы просто показываю пример из своих учебников с 2010 года.

Установка: У вас есть на сайте вот такой код:
Code
$SEARCH_FORM$

кто не знает внутри этого кода есть вот такой код внутри тега form:
Code
<input id="srch" placeholder="Поиск..." type="text">

Все что вам нужно это добавить класс к input, кстати вот сам класс:
Code
class="example-anm"

Во многих шаблонах у этих форм есть свои классы и вам просто нужно в скрипте заменить класс
сам скрипт:
Code
<script>
$(".example-anm").focus(function(){
$(this).animate({width:'200px'}, 500); /* после клика */
});
$(".example-anm").focusout(function(){
$(this).animate({width:'150px'}, 500); /* стандартная */
});
</script>





Демопример можно посмотреть на нашем демо сайте: посмотреть...
Автор\Источник: http://ucozon.ru/

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 2048 | Комментарии: 3 | Рейтинг: 3.9/7 | |Категория: Разное Веб мастер | Добавил: STAFF | Дата: 16.12.2011 | Скачали: 0 | Теги: формы, контакте, Растягивание, поиска
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 3
3 LUIS75   Дата: 18.04.2013  Время: 17:41   [№ 14611]
Теперь это не "Как ВКонтакте")

+2   Спам
2 Kapusha   Дата: 16.12.2011  Время: 16:20   [№ 11536]
Самое приятное, что даже я могу разобрать этот скрипт)

+2   Спам
1 mdbaner   Дата: 16.12.2011  Время: 09:29   [№ 11534]
Интересный пример, с поиском.


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru