Сегодня речь пойдет о JavaScript библиотеке, которая предназначена для создания всплывающих подсказок на web странице. Называется она Tooltip и представляет собой плагин для библиотеки jQuery.
Раньше я писал об аналогичном плагине для библиотеки Prototype.
Для того, чтобы сформировать общее представление о возможностях библиотеки достаточно зайти на демонстрационную страницу.
Рассмотрим несколько примеров.
Читать дальше
Сервис Gravatar за последнее время стал очень популярным. Даже в админке WordPress’а теперь отображаются аватары комментаторов. Кстати, довольно удобно. Но речь не о WP.
В этой заметке я расскажу, как добавить Gravatar на собственную web страницу.
Для того чтобы получить картинку, вам нужно указать несколько параметров и на их основе сформировать URL. Рассмотрим их подробнее:
1) eMail пользователя, иконку которого вы хотите добавить.
2) Размер иконки (в пикселях).
3) Рейтинг иконок, которые вы разрешаете показывать. Сервис позволяет присвоить иконке рейтинг, на основе которого можно отфильтровать неприличные или содержащие ненормативную лексику аватары.
4) URL картинки, которая будет загружена если gravatar отсутствует.
Теперь напишем функцию, формирующую URL.
Читать дальше
В этой статье я хочу рассказать о библиотеке, которая позволяет сделать неактивной часть web страницы или всю ее целиком.
Библиотека называется jQuery BlockUI Plugin и, как следует из названия, представляет собой плагин к jQuery.
Принцип работы следующий. Библиотека создает дополнительный слой (overlay) над всей страницей или каким-то блоком на ней.
Этот слой может содержать сообщение, картинку, диалог или вообще другую страницу с любыми элементами управления.
Если вы видели, как работают библиотеки типа Lightbox, то представляете, о чем идет речь.
Приведу простой пример. Допустим, необходимо заблокировать доступ к странице на время выполнения Ajax запроса.
Читать дальше
На сегодняшний день практически все web приложения используют html формы. Причем именно работа с ними вызывает наибольший дискомфорт у пользователя.
В этой статье речь пойдет об инструменте, который позволяет значительно ускорить работу с формами. Называется он Autotab и представляет собой плагин к JavaScript библиотеке jQuery.
Основное назначение плагина – ускорить ввод данных в несколько связанных полей. Например, гораздо удобнее вводить дату в три разных поле (отдельно день, месяц, год). Но при этом пользователю придется переключаться между полями.
Autotab позволяет создать группу связанных полей с фиксированной длиной. При этом после заполнения первого поля курсор автоматически переместится в следующее поле. Точно также работает и удаление символов. Можно зажать клавишу «Del» и все связанные поля будут очищены.
Кроме того, плагин осуществляет фильтрацию вводимых данных.
Установка плагина.
Читать дальше
Создание изображений – довольно сложная и трудоемкая задача. Если не использовать специальных библиотек.
Об одной из них я и хочу рассказать.
Open Flash Chart. Уже по названию становится ясно, что:
1) библиотека распространяется с открытыми исходниками и бесплатно;
2) предназначена для создания графиков;
3) использует технологию Flash.
Сразу остановлюсь на третьем пункте. Flash обладает одним недостатком. Если у посетителя не установлен Flash player, то график он не увидит.
Зато достоинств гораздо больше:
1) Интерактивность. При наведении указателя мыши на график появляется подсказка с данными выбранной точки.
2) Снижение нагрузки на сервер. Если использовать графики в виде картинок, то серверу придется создавать изображение при каждом запросе, а это довольно ресурсоемкая операция. В данном случае используется один и тот же Flash ролик, который входит в состав дистрибутива библиотеки. Серверный скрипт должен только создать текстовую строку с данными для построения графика.
3) Увеличение скорости загрузки, экономия трафика. Flash ролик грузится только один раз, занимает 63 кБ. При этом график может быть размером с экран браузера.
Но это все теория. Переходим практической части.
Читать дальше
В этой статье я расскажу и, естественно, покажу пример создания облака тегов для сайта (блога). Основные инструменты – PHP и фреймворк CodeIgniter (подойдет любой другой).
Но, прежде всего, хочу поблагодарить Delchyve за идею.
Итак, переходим к делу.
Вы, конечно, знаете, что облако тегов используется на многих сайтах (в основном это блоги) как элемент навигации. По-сути, облако тегов – это набор ссылок с ключевыми словами, рядом с которыми обычно пишут количество постов, которые относятся к данному тегу.
Чтобы сфокусировать внимание посетителя на наиболее актуальных темах, размер шрифта тегов в облаке меняют в зависимости от количества постов, которые к нему относятся.
Если ваш сайт (блог) использует какую-нибудь CMS, например, WordPress, Joomla и т.п., то вы без труда найдете плагины, которые сами создадут облако тегов на основе ваших данных, а вам останется только разместить его в шаблоне сайта.
Но мы рассмотрим ситуацию, когда сайт пишется «с нуля» и вам нужно сформировать облако ручками 🙂 .
Читать дальше
Работа с данными пользователя, наверное, одна из самых нудных и трудоемких частей разработки любого приложения.
В случае 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 и т.п. В общем, советую попробовать.
Возвращаюсь к возникшей проблеме.
Нужно было применить эффект подсветки к блоку текста, а затем удалить этот блок.
На первый взгляд, кажется, что задача решается двумя строками кода:
new Effect.Highlight('textBlock', {startcolor:"#FFFFFF", endcolor:"#FF0000", duration:2});
$('textBlock').remove();
В первой строке создается эффект подсветки и применяется к элементу с id= 'textBlock'.
Параметры эффекта:
startcolor – цвет блока в начале эффекта;
endcolor – цвет блока в конце эффекта;
duration – длительнось эффекта в секундах.
Во второй строке функция remove() удаляет блок.
Но, оказалось, что этот код не работает. Т.е. блок удаляется до того как отработает эффект.
Проблема заключается в том, что эффекты работают параллельно с основным кодом страницы.
Решение
Специально для таких ситуаций каждый эффект scriptaculous имеет четыре свойства: beforeStart, beforeUpdate, afterUpdate, afterFinish (думаю, названия говорят сами за себя). Значением этих свойств должно быть имя функции, которую нужно выполнить на соответствующем этапе работы эффекта.
В качестве параметра эта функция принимает объект с информацией об эффекте и блоке, к которому он применяется.
Например, описанная задача решается как:
new Effect.Highlight('textBlock',
{startcolor:"#FFFFFF",
endcolor:"#FF0000",
duration:2,
afterFinish: function(o) {
o.element.remove();
}
});
Как видите, значением параметра afterFinish является анонимная функция, в которой и выполняется удаление текстового блока.
Примечание. Свойство element, параметра функции (o), позволяет работать с блоком страницы, к которому применяется эффект.
Если вы хотите больше узнать о библиотеке scriptaculous, советую почитать:
1) официальный сайт (англ.);
2) раздел JavaScript этого блога;
3) статью «Подсветка элементов web страницы»;
4) книгу «Prototype and Scriptaculous in Action» (англ.).
Кстати, если книга кому-нибудь нужна, пишите в комментариях, могу выслать на eMail или выложить для скачивания.
Удачи!
В комментариях к одной из предыдущих статей меня попросили показать пример загрузки файлов на север с помощью технологии AJAX и фреймворка CodeIgniter.
Тогда я ответил, что это несложно и пообещал показать пример. Но, я поторопился и забыл упомянуть о паре «нюансов», связанных с этой операцией 🙂 . Так что, исправляю ошибку.
Механизм отправки
Прежде всего, нужно четко понимать, что отправить (загрузить) на сервер файл с помощью AJAX нельзя.
Тем не менее, можно организовать процесс загрузки так, что с точки зрения посетителя загрузка будет выглядеть асинхронной. Т.е. посетитель укажет имя файла и нажмет кнопку «Загрузить». После этого, увидит умную надпись вроде «Подождите, идет загрузка…» или какую-нибудь анимацию. А после окончания загрузки – сообщение с результатами. Страница, которую он видит, перезагружена не будет.
Но при этом отправка файла будет выполнена обычным способом.
Идея заключается в использовании невидимого фрейма (iframe), атрибута формы target и JavaScript.
Читать дальше
