Javascript & Ajax \ jQuery

Адаптивное многоуровневое меню

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

Продолжить чтение

Javascript & Ajax \ Javascript

Установка видео плеера на сайте

От автора: при создании сайтов очень часто возникает необходимость в публикации видеоматериалов на его страницах, а для отображения видео, как Вы знаете, необходим видеоплеер. Поэтому в данном уроке мы с Вами рассмотрим, как установить видео плеер на странице сайта, как добавить видео для воспроизведения и как настроить видеоплеер под свои собственные нужды.

В данном уроке мы с Вами будем говорить об одном из наиболее популярных и наиболее удобных видеоплееров под названием jwplayer.

Продолжить чтение

Javascript & Ajax \ Javascript

Индивидуальный таймер обратного отсчета

От автора: в комментариях к уроку Таймер обратного отсчета для сайта и на нашем форуме многих из Вас заинтересовал вопрос индивидуализации таймера. Под индивидуализацией в данном случае понимается индивидуальный отсчет таймера по времени для каждого конкретного клиента.

Например, мы хотим, чтобы наш таймер отсчитывал по времени ровно сутки, для каждого пользователя индивидуально. В таком случае, если Пользователь №1 зашел на страницу с таймером 1-го января в 13:00, то отсчет именно для него закончится 2-го января в 13:00. Для Пользователя №2, который, к примеру, зашел в этот же день в 15:00, отсчет закончится на следующий день в 15:00.

Итак, приступи к созданию онлайн таймера обратного отсчета времени

Продолжить чтение

Javascript & Ajax \ Javascript

Создание привлекательной формы

От автора: в предыдущем уроке мы с Вами создали форму для отзывов и, на мой неприхотливый взгляд, придали ей довольно симпатичное стилевое оформление. Но создание формы — это только начало. Поскольку наша форма имеет некоторое количество обязательных к заполнению полей, то неплохо было бы доверить клиенту (браузеру) проверку заполнения всех обязательных полей перед отправкой формы.

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

Итак, приступим к написанию клиентского скрипта.

Продолжить чтение

Javascript & Ajax \ jQuery

Управление виджетом слайдер библиотеки jQuery UI при помощи колесика мыши

От автора: в сегодняшнем уроке я хотел бы рассмотреть очень интересный плагин библиотеки jQuery под названием jquery.mousewheel, который позволяет совершать какие-то действия при вращении колесика мыши. Другими словами, он позволяет нам обрабатывать событие вращения колесика мыши по своему усмотрению.

Продолжить чтение

Javascript & Ajax \ Javascript

Добавляем эмоций в текстовую область формы

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

Продолжить чтение

Javascript & Ajax \ jQuery

Пользовательские подсказки средствами jQuery

От автора: довольно часто возникает потребность «повесить» на некий элемент сайта описание, своеобразную всплывающую подсказку. Такая необходимость может быть вызвана тем, что необходимо объяснить пользователю какие функции выполняет тот или иной элемент сайта. Или попросту Вы хотите добавить некое описание к фото или картинке.

Продолжить чтение

Javascript & Ajax \ Javascript

Эффект перетаскивания товаров в корзину

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

В этом уроке мы реализуем возможность перемещения товаров в корзину при помощи мыши на основе таких библиотек как jQuery и jQuery UI, а также используя метод AJAX.

Продолжить чтение

Javascript & Ajax \ jQuery

Использование виджета аккордеон для меню

От автора: в этом уроке мы познакомимся с одним из виджетов библиотеки jQuery UI под названием Accordion (Аккордеон). Чаще всего данный виджет используется для размещения в нем некой блочной связанной информации, что-то сродни с табами. Гораздо реже можно найти использование виджета в качестве меню.

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

Итак, приступим…

Продолжить чтение

Javascript & Ajax \ Javascript

Создаем сайт с параллакс-прокруткой при помощи Stellar.js

От автора: одним из самых заметных трендов современного веб-дизайна является применение эффектов параллакс-прокрутки (parallax scrolling). В этом учебнике я намереваюсь показать вам, как создать на вашем собственном сайте этот эффект, использовав немного воображения и помощь от Stellar.js.

Продолжить чтение