Raphaël это маленькая библиотека JavaScript, которая может упростить работу с векторной графикой. Если вам нужно создать специфический график, обрезать или повернуть изображение, сделать отражение рисунка, то все это можно легко сделать при помощи этой библиотеки.

Raphaël использует SVG и VML в качестве основы для создания графики. Поскольку все создаваемые объекты являются элементами DOM, вы можете добавлять к ним обработчики событий JavScript или модифицировать их как и любой другой элемент DOM. Цель библиотеки заключается в том, чтобы предоставить адаптер, который позволить легко и кроссбраузерно создавать графику. В данный момент библиотека поддерживает Firefox 2.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.

Использование

Нужно загрузить и подключить библиотеку raphael.js в HTML страницу, затем использовать предоставляемые ею функции:

// Создаём палитру 320 × 200 с координатами 10, 50
var paper = Raphael(10, 50, 320, 200);
// Создаем круг x = 50, y = 40, с радиусом 10
var circle = paper.circle(50, 40, 10);
// Устанавливаем цвет заполнения для круга
circle.attr("fill", "#f00");
// Устанавливаем цвет обводки
circle.attr("stroke", "#fff");

Скачать, просмотреть документацию и демо примеры библиотеки можно здесь.

В этой статье я хочу поделиться с Вами некоторыми приемами усовершенствования HTML форм при помощи JavaScript. В частности, в приведенных здесь примерах используется библиотека jQuery. Речь здесь пойдет о четырех усовершенствованиях – подсказках, автозаполнении, счетчике введенных символов и скрытых полях.

<< читать дальше >>

Я думаю большинство из нас привыкли к более продвинутому методу получения элементов DOM, чем простые document.getElementById() или document.getElementsByTagName(). В большинстве современных JavaScript фреймворков используются функции позволяющие получать коллекцию элементов по CSS селектору:

var elems = $('.list li a');

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

Однако, ничто не стоит на месте, и все меняется с приходом новых стандартов и новых браузеров. Так, в новом стандарте Selectors API имеются функции document.querySelector() и document.querySelectorAll(), способные делать выборку элементов по CSS. Реализация этих функций на уровне браузера даст возможность избавиться от необходимости добавлять вышеупомянутые скрипты во фреймворки, значительно увеличит производительность и ёмкость скриптов.

До сих пор обе эти функции были реализованы в Webkit и Internet Explorer 8 beta, но буквально на днях вышла новая версия Firefox 3.1 alpha, где одним из новшеств являются CSS селекторы.

Типичное применение:

var elem = document.querySelector('#myelem');
var elems = document.querySelectorAll('ul > li:not(".selected"):hover');

Дабы придать функциям более привычный вид, можно использовать следующий прием (об этом писал Dustin Diaz):

var $$ = function(q, b) {
  if (b) {
    return document.querySelector(q);
  } else {
    return document.querySelectorAll(q);
  }
};

Если в качестве второго параметра передаем true, то используется querySelector, возвращающий единственный элемент, если этот параметр не указан, то тогда используется querySelectorAll, который в свою очередь возвращает коллекцию элементов nodeList. Чтобы преобразовать полученный nodeList в массив, можно использовать функцию slice():

var nodes = [].slice.call($$('ul > li:not(".selected"):hover'), 0);

Последним из наиболее популярных браузеров, где пока не реализованы эти функции, это Opera, но и там не все так плохо, ибо работы над этим уже ведутся.

На днях мне пришлось разрабатывать сайт, в котором необходимо было сделать AJAX навигацию на Mootools. Естественно, нужно было сохранить возможность добавлять ссылки на страницы сайта в закладки и также сохранить поддержку кнопок Назад/Вперед в браузере. В общем типичная проблема для AJAX приложений. Ранее я писал, как сделать History при помощи YUI, однако, мне желательно было сделать все в Mootools, поэтому пришлось искать решения для этой библиотеки. После некоторых поисков я все же нашел подходящий скрипт на digitarald.de, совместимый со всеми основными браузерами (Internet Explorer 6+, Opera 9, Firefox 1.5+, Safari 2+), однако он написан под Mootools 1.11. Этот же скрипт, но переделанный под новую версию (Mootools 1.2), я нашел на aNobii Blog. Однако он тоже отказался работать, поэтому пришлось его немного переделать. В результате я получил вполне работоспособный скрипт, которым хочу поделиться с вами. Скачать его можно здесь.

Теперь о том как им пользоваться.

<< читать дальше >>

Vuzit – это online сервис, позволяющий добавлять pdf документы на веб страницы, причем для просмотра документов пользователю не требуется устанавливать pdf плагин в браузер. Для работы с сервисом используется JavaScript/AJAX, соответственно, управление просмотрищком – перелистывание страниц, масштабирование документов и прочее, можно осуществлять при помощи JavaScript.

<< читать дальше >>