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

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Теперь переходим к созданию главной страницы (index.php). Html разметку постараемся максимально упростить, т.к. нам придется изменять ее в процессе работы web приложения.
Заголовок страницы, в общем-то, обычный

Прежде всего, мы подключаем файл dbdata.php с функцией подключения к БД, затем указываем тип страницы, кодировку, размещения файлов с таблицей стилей и JavaScript библиотеками.
Читать дальше »

Сейчас в интернете можно найти множество статей о web2.0. Но для меня понятие web2.0 прежде всего связано с технологией Ajax. Казалось бы, предельно простая идея, отправлять запросы с помощью JavaScript, но благодаря ей web приложения приобрели ряд новых возможностей.

В этой статье я покажу, как написать редактор списка, использующий технологию Ajax. Серверная часть будет реализована на PHP.

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Требования
Прежде всего, определимся с требованиями к нашему web приложению. Они довольно простые:
1) читать список записей из базы данных и показывать его на web странице;
2) добавлять новые записи (вставленная запись должна подсвечиваться);
3) удалять записи;
4) при щелчке по записи должно появляться поле редактирования с текстом этой записи и кнопки «Обновить» и «Отмена»;
5) все операции должны выполняться без перезагрузки страницы.

Для того чтобы сократить объем JavaScript кода мы используем библиотеки Prototype и Scriptaculous, о которых я уже неоднократно писал. Главное преимущество этих библиотек в данном случае состоит в том, что Scriptaculous содержит готовый компонент для реализации четвертого требования. Это т.н. in-place text editor (встраиваемый текстовый редактор).
Читать дальше »

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

Настоящую елку украшать все умеют с детства. Поэтому сегодня я покажу, как сделать виртуальную елочку, и дать посетителям сайта возможность ее украсить по своему вкусу.

Возможный результат показан на скриншоте.

Демонстрационная страница с елочкой размещена здесь.

Исходные материалы: рисунки с елочкой (firtree.jpg) и шариками (ball1_1.gif, ball1_2.gif, …), библиотека prototype.

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

Посмотрите на разметку страницы.

И таблицу стилей.

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

Кстати, обратите внимание на изображения шариков, которые вставлены после блока content. Эти шарики не отображаются браузером, т.к. для них установлено правило display:none. Невидимые картинки нам, конечно, не нужны, но этот прием позволяет устранить задержки при развешивании шариков.

Дело в том, что браузер загружает одну и туже картинку только один раз. Если эта картинка повторяется на странице (в нашем случае может быть несколько шариков одного цвета), то используется уже загруженное изображение.

Если мы уберем невидимые изображения шариков, то они будут загружаться после щелчка пользователя по елке, а это создаст задержку между щелчком и появлением шарика (особенно на dialup’е).

Теперь перейдем к добавлению шариков. В обработчике события onclick блока content мы вызываем функцию addBall(event) и передаем ей объект с параметрами события.

Посмотрите на ее исходный код:

Прежде всего, мы объявили глобальную переменную i. С ее помощью будем создавать уникальные идентификаторы (id) для каждого добавленного шарика. Они нам необходимы для того, чтобы задать размещение для каждого шарика отдельно.

Выбор шарика мы выполняем с помощью генератора случайных чисел (Math.random()). Т.к. он возвращает числа в диапазоне от 0 до 1, а у нас 5 шариков, умножаем результат на 5 и округляем до ближайшего большего целого числа (Math.ceil()).

Вставка шарика осуществляется с помощью функции Bottom объекта Insertion из библиотеки prototype. Использовать ее несложно. В первом параметре указываем id блока, в который нужно добавить html разметку, а во втором – указываем саму разметку (здесь мы вставили тег img с нужным шариком).

Теперь рассчитываем координаты левого верхнего угла картинки с шариком. Для этого определяем координаты курсора:

Здесь ничего сложного, единственная заморочка заключается в том, что в IE координаты определяются не так как в Netscape, Mozilla.

От координат курсора отнимаем 10px (это половина длины и ширины изображения с шариком) и получаем координаты левого верхнего угла.

Для установки этих координат используем метод setStyle (строка 8). В его первом параметре указываем id элемента, а во втором – CSS правила.

В таблице стилей задаем для всех изображений абсолютное позиционирование.

Вот и все. Можно наряжать елочку
Чтобы убрать шарики обновите страницу.

С Новым Годом!

P.S. Вы можете скачать архив с исходными файлами примера или посмотреть рабочую версию страницы.

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

Дело было так. Добавляю я эффекты из Scriptaculous, и, естественно, настраиваю их параметры. Все идет отлично. Эффекты работают как надо, работа кипит.

Тестирую, как обычно, в FireFox. Все прекрасно работает. Начинаю проверять в IE и Opera.

И тут возникает проблема. Один эффект не работает. Ни в какую. Причем я точно знаю, что сам эффект должен работать (использовал его раньше). Складывается впечатление, что не вызывается сама JavaScript функция.

Код был такой.

Короче, провозился я полчаса. В конце концов, до меня дошло, что лишняя запятая в конце массива с параметрами вызывает ошибку. (Эта запятая осталось случайно после экспериментов с параметрами).

Вроде бы ничего сложного. Но получается, что FireFox (с установленным плагином Firebug) исправил ошибку автоматически и даже предупреждения не вывел.
А я, естественно, начал думать, что это глюки браузеров.

Ошибка, конечно, пустяковая, но полчаса времени на ее исправление, плюс не самые приятные ощущения – это далеко не пустяк.

Может кто-то знает надежный способ отладки JavaScript кода (а заодно и CSS)?

Можно ли написать web приложение, использующее Ajax, без JavaScript? Правильный ответ: “Нельзя. Потому что сама технология ajax основана на запросах, которые отправляются с помощью JavaScript”. Но, кто сказал, что мы должны писать JavaScript код сами? Похоже, разработчики библиотеки xajax думали именно так.

Прежде всего, разберем, что представляет собой xajax. Это PHP библиотека, предназначенная для упрощения работы с ajax. Принцип работы заключается в том, что JavaScript код генерируется автоматически, а вы с помощью php функций указываете, где его разместить.
Читать дальше »

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

Сегодня я расскажу о JavaScript библиотеке, которая позволяет легко решить эту задачу. Называется она Prototip и состоит всего из одного файла prototip.js. Только учтите, что Prototip, по сути, является надстройкой над другой библиотекой – prototype (о которой я уже неоднократно рассказывал), поэтому без нее он работать не будет.

Прежде всего, разберемся, что представляет собой всплывающая подсказка.
Обычно это блок с текстом или картинкой, который появляется, когда вы наводите курсор на определенный элемент страницы.
Чтобы этот блок двигался вместе с курсором, для него в таблице стилей устанавливают абсолютное позиционирование, и с помощью javascript меняют координаты при перемещении мышки.
Естественно, такой блок может содержать практически любую html разметку с текстом, картинками, баннерами, flash роликами и т.п.

Переходим к созданию подсказок
Качаем библиотеку с официального сайта. В архиве вы найдете две папки:
js/ - в ней находятся два файла prototip.js и prototype.js, т.е. все необходимое для работы;
css/ - здесь размещены: файл с таблицей стилей и несколько картинок, которые используются для создания стандартных подсказок.

После этого подключаем файлы библиотек к странице:

Если вы хотите использовать обычные подсказки, то подключите файл с таблицей стилей из папки css. Но, в большинстве случаев, лучше использовать свои собственные стили (так больше шансов, что подсказка впишется в дизайн сайта ).

Теперь делаем простенькую страничку:

Как видите, она состоит из двух абзацев, в каждом из которых есть фраза, выделенная тегами <span id="…"></span>. Вместо тега <span> можно использовать любой другой, главное указать id элемента.

Для фразы в первом абзаце (id="needtip") сделаем простую текстовую подсказку. Для этого создаем файл simpletip.js, подключаем его к странице:

И добавляем в него обработчик события window.onload (таким образом, наш код будет автоматически выполняться при загрузке страницы).
Читать дальше »

Библиотека Scriptaculous содержит массу красивых и полезных эффектов, которые удобно использовать в web приложениях. О некоторых из них я уже писал в предыдущих статьях (например, Подсветка элементов web страницы и Использование Scriptaculous для изменения прозрачности элементов web страницы). Любой из этих эффектов представляет ценность сам по себе, но только использование их комбинаций позволяет раскрыть возможности библиотеки в полной мере.

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

Прежде всего, немного теории. Scriptaculous позволяет применить несколько эффектов к одному и тому же блоку web страницы двумя способами:
1) последовательно (эффекты будут применяться по очереди);
2) параллельно (т.е. все выбранные эффекты будут работать одновременно).

Рассмотрим небольшой пример. Допустим, у нас есть web страница с текстовым блоком, к которому мы хотим применить два эффекта:
1) подсветки (Highlight);
2) и перемещения (MoveBy).

Разметка страницы предельно простая:

Как видите, страницы содержит один блок (textBlock) и две кнопки, нажатия на которые вызывают javascript функции runParallel() и runSerial(). Эти функции будут запускать наши эффекты параллельно и последовательно.

Теперь представим, что мы написали такой код:

Как вы думаете, в каком порядке они будут выполнены?
Правильный ответ: “В большинстве случаев параллельно”. Почему в “большинстве случаев”? Потому что, если мы не задали последовательность выполнения явно, то она может зависеть от браузера.

Отсюда простой вывод: “Если используете несколько эффектов, всегда указывайте, в каком порядке их выполнять”.
Читать дальше »

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

Современные JavaScript библиотеки позволяют кардинально изменять внешний вид страницы с помощью буквально нескольких строчек кода. В этой статье я покажу как с помощью библиотеки Prototype можно изменить стили практически любого набора элементов на html странице.
Читать дальше »

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