От автора: В этом учебнике мы создадим простое меню для сайта на jQueru, которое будет выделяться каждый раз, когда мы проведем над ним мышью, затемняя все вокруг, за исключением меню. Меню останется белым, а область подменю расширится. Мы создадим этот эффект с помощью jQuery.

Перед тем, как мы приступим к созданию меню для сайта на jQuery, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Итак, давайте начнем!

Читать далее →

От автора: Локальная память HTML5 – это как cookies на стероидах; ее невероятно легко использовать, и в то же время она очень мощная. В этом учебнике я покажу вам, как создать функциональные «sticky notes» («клейкие заметки»), которые позволят пользователям делать постоянно отображаемые записи во время просмотра вашего сайта.

Читать далее →

Довелось мне повозиться с сайтом бутика «Кабуки». На главной странице используется интересная вещь, а главное для бутика, как мне кажется, совсем удачное решение – ротатор изображений. Вот только беда в том, что выглядит и работает все хорошо, как ни странно, только в IE. Поковырявшись в дебрях кода, решил написать свой ротатор картинок. В «демо» можно увидеть результат того, что получилось. А просмотрев видео, можно научиться делать самому ротатор картинок.

Читать далее →

От автора: Одной из грандиозных проблем веб-дизайнеров является отыскание возможности поместить большое количество информации на странице, не потеряв при этом в юзабилити. Разбиение содержимого на закладки – отличный способ управиться с этим вопросом и последнее время очень широко используется в блогах. Сегодня мы намереваемся построить обычный небольшой информационный блок в HTML, в виде меню с закладками, затем введем его в действие, используя немного простого Javascript’а, и, наконец, сделаем то же самое при помощи библиотеки jQuery.

Читать далее →

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

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

Читать далее →

От Автора: Итак, вы уже немножко порезвились с jQuery, начинаете приобретать мастерство, и вам это действительно нравится! Вы готовы поднять свои знания jQuery до второго уровня? Сегодня я покажу двадцать функций и свойств, которых вы, вероятно, до этого не видели!

1. after() / before()

Иногда вам нужно вставить что-нибудь в DOM, но у вас нет хороших зацепок, при помощи которых можно это сделать; append() или prepend() не позволяют идти напрямик, а вы не хотите добавлять лишний элемент или id. Две эти функции могли бы стать тем, что нужно. Они позволяют вам вставлять элементы в DOM прямо перед, или после выбранного элемента таким образом, что новый элемент помещается на тот же уровень.

Читать далее →

От Автора: Пару недель назад я создал скринкаст, в котором демонстрировал, как построить трехуровневое навигационное меню. В ответном е-мейле один из наших читателей попросил написать учебник о том, как создать навигационное меню для сайта в стиле Lava Lamp. К счастью, это довольно простая задача, особенно когда используешь библиотеку JavaScript. Сегодня мы построим одно такое «с нуля».

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Читать далее →

От Автора: Когда в особой цене пространство, использование слайдеров — оптимальный способ передачи информации. Сегодня мы посмотрим, как создать простой слайдер для сайта, аналогичный использующемуся в iTunes store.

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

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Читать далее →

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

Читать далее →

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

Читать далее →