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

Библиотека называется jQuery BlockUI Plugin и, как следует из названия, представляет собой плагин к jQuery.

Принцип работы следующий. Библиотека создает дополнительный слой (overlay) над всей страницей или каким-то блоком на ней.

Этот слой может содержать сообщение, картинку, диалог или вообще другую страницу с любыми элементами управления.

Если вы видели, как работают библиотеки типа Lightbox, то представляете, о чем идет речь.

Приведу простой пример. Допустим, необходимо заблокировать доступ к странице на время выполнения Ajax запроса.
Читать дальше »

На сегодняшний день практически все web приложения используют html формы. Причем именно работа с ними вызывает наибольший дискомфорт у пользователя.

В этой статье речь пойдет об инструменте, который позволяет значительно ускорить работу с формами. Называется он Autotab и представляет собой плагин к JavaScript библиотеке jQuery.

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

Autotab позволяет создать группу связанных полей с фиксированной длиной. При этом после заполнения первого поля курсор автоматически переместится в следующее поле. Точно также работает и удаление символов. Можно зажать клавишу «Del» и все связанные поля будут очищены.

Кроме того, плагин осуществляет фильтрацию вводимых данных.

Установка плагина.
Читать дальше »

О фреймворках xUnit слышали все, кто хоть немного занимался тестированием кода. Эта статье об использовании JavaScript версии этого фреймворка.

О пользе тестов написано очень много, и перечислять в очередной раз все преимущества, которые они дают, нет никакого смысла. Поэтому мы просто рассмотрим установку и настройку фреймворка. И, конечно, напишем какой-нибудь тест.
Читать дальше »

Сегодня хочу рассказать об одном очень интересном сервисе – AppJet.

Позиционируется он, насколько я понял, для обучения программированию. Во всяком случае «руководство по программированию для абсолютных новичков» присутствует.

Вообще идея очень интересная.

Чтобы написать обычное web приложение вам нужно знать несколько языков (например, HTML + JavaScript или HTML + PHP, а лучше HTML + CSS + PHP + JavaScript + SQL + библиотеки и фреймворки ).

Здесь нужны только знания JavaScript. Точнее можно только изучать JavaScript, а для реализации серверной части придется освоить лишь небольшой API.

Проще всего это объяснить на примере. Создадим обычный счетчик количества обращений к странице (код я скопировал из справки).
Читать дальше »

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

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

В качестве базы для создания изображений используются SVG и VML. Каждому объекту, созданному с помощью этой библиотеки, можно назначить обработчик. На данный момент поддерживаются следующие браузеры: Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.

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

Недавно я наткнулся на одну очень интересную тему для WordPress - WP-Coda. Выглядит просто шикарно! Но дело не в этом.

Эта тема использует довольно много эффектов, реализованных с помощью JavaScript.

Мне стало интересно, во сколько эта красота обходится посетителям, и оказалось, что не так уж и дорого. Всего один js-файл размером 45кБ.

Дело в том, что автор упаковал семь исходных файлов в один и после этого сжал его упаковщиком вроде Packer JavaScript en PHP.

Но первый же эксперимент показал, что это не предел. Если упаковать этот файл в gzip архив, то его размер уменьшается до 21кБ. А большинство современных браузеров прекрасно работают с такими архивами.

При этом нет необходимости что-либо переделывать в самой теме.
Читать дальше »

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

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

В центре будет полноразмерная фотография. По краям – кнопки «вперед», «назад». Внизу – кнопка «закрыть» и название снимка.
Читать дальше »

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

В случае web приложений ситуация только усложняется.

На мой взгляд, существует три основных источника проблем:
1) ошибки пользователя (тут вряд ли можно что-то сделать);
2) необходимость проверять данные на стороне сервера;
3) необходимость сообщать посетителю об ошибках без перезагрузки страницы.

Кроме того, существуют два способа отправки данных формы:
1) обычный (с перезагрузкой страницы);
2) асинхронный (ajax запрос, без перезагрузки страницы).

Естественно, эта ситуация привела к возникновению JavaScript библиотек, специально предназначенных для проверки данных форм перед их отправкой.

Например. jQuery Validation Plugin, о нем, кстати, написана очень хорошая статья Проверка данных форм.
Для prototype тоже есть несколько аналогичных библиотек: Dexagogo и JSValidate.

Принцип их работы примерно одинаков. Создаете форму с правилами (обычно они указываются в атрибутах class полей формы), подключаете библиотеку, если нужно, пишите свои собственные правила.
Читать дальше »

Думаю, ни для кого не секрет, что за последние несколько лет резко увеличилось число сайтов, использующих различные визуальные эффекты.

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

В этой статье мы рассмотрим пример использования очень интересного эффекта из библиотеки ScriptAculous – морфинга.

По определению, морфинг – это плавное преобразование одного объекта в другой.

Он очень часто используется в компьютерных играх и кинематографе.

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

Тем не менее, можно изменить цвет и размеры блоков и шрифтов, их границы, фон и т.п.

Как это работает
Читать дальше »

Недавно столкнулся с интересной особенностью работы эффектов в scriptaculous, о которой и хочу рассказать.

Примечание. Для тех, кто не слышал о scriptaculous, поясню. Это очень удобная JavaScript библиотека, которая значительно упрощает работу с элементами web страницы, позволяет создавать различные визуальные эффекты, элементы управления, поддержку drug&drop и т.п. В общем, советую попробовать.

Возвращаюсь к возникшей проблеме.

Нужно было применить эффект подсветки к блоку текста, а затем удалить этот блок.

На первый взгляд, кажется, что задача решается двумя строками кода:

В первой строке создается эффект подсветки и применяется к элементу с id= 'textBlock'.
Параметры эффекта:
startcolor – цвет блока в начале эффекта;
endcolor – цвет блока в конце эффекта;
duration – длительнось эффекта в секундах.

Во второй строке функция remove() удаляет блок.

Но, оказалось, что этот код не работает. Т.е. блок удаляется до того как отработает эффект.

Проблема заключается в том, что эффекты работают параллельно с основным кодом страницы.

Решение

Специально для таких ситуаций каждый эффект scriptaculous имеет четыре свойства: beforeStart, beforeUpdate, afterUpdate, afterFinish (думаю, названия говорят сами за себя). Значением этих свойств должно быть имя функции, которую нужно выполнить на соответствующем этапе работы эффекта.

В качестве параметра эта функция принимает объект с информацией об эффекте и блоке, к которому он применяется.

Например, описанная задача решается как:

Как видите, значением параметра afterFinish является анонимная функция, в которой и выполняется удаление текстового блока.

Примечание. Свойство element, параметра функции (o), позволяет работать с блоком страницы, к которому применяется эффект.

Если вы хотите больше узнать о библиотеке scriptaculous, советую почитать:
1) официальный сайт (англ.);
2) раздел JavaScript этого блога;
3) статью «Подсветка элементов web страницы»;
4) книгу «Prototype and Scriptaculous in Action» (англ.).
Кстати, если книга кому-нибудь нужна, пишите в комментариях, могу выслать на eMail или выложить для скачивания.

Удачи!