По большему счету функции jQuery работают над коллекцией элементов, получаемых при помощи метода $(). Исключением из этого правила являются функции “геттеры” (getters - трудно сказать как правильно перевести этот термин), которые возвращают результат только для первого элемента коллекции. Таковыми являются функции attr(), width(), html() и другие. Но иногда возникает необходимость получить некоторые значения для всех элементов коллекции. Именно с этой целью Аарон Брэндон создал плагин jQuery.batch, который расширяет функциональность jQuery добавляя новые методы, которые отличаются от аналогов лишь множественным числом в названии. Так, для функции attr() объявляется функция attrs(). Новые методы обрабатывают всю полученную коллекцию, возвращая массив результатов.

Полный список методов, добавляемых jQuery.batch:

• attrs
• styles
• widths
• heights
• vals
• texts
• htmls

Дополнительно к основным методам, jQuery.batch добавляет свой собственный метод - jQuery.fn.batch(), который принимает имя существующей функции из коллекции jQuery.fn вместе с дополнительными параметрами:

$('a').batch('attr', 'href');

Этот же результат можно получить при помощи следующего выражения:

$('a').attrs('href');

Домашняя страница плагина расположена по следующей ссылке: jQuery.batch

Итак, наступает большой праздник “День победы”, одним из символов которого является конечно же праздничный салют. Как раз сегодня натолкнулся на скрипт fireworks.js, который позволяет добавлять яркие, красочные салюты на веб страницу.

Автор этого скрипта также является автором библиотеки SoundManager, для работы со звуком через JavaScript (о ней я недавно написал статью), поэтому не удивительно, что феерверк сопровождается замечательными звуковыми эффектами.

Основные возможности скрипта:

• Много разных вариаций формы и цвета феерверка
• Легкий в конфигурации API для добавления дополнительных эффектов
• Управляемые скриптом звуковые эффекты при помощи SoundManager API
• Чередующаяся анимация (позволяет легко устанавливать последовательность феерверков)
• Эффект звукового панорамирования, в зависимости от расположения салюта на странице.

Попробовать скрипт в работе можно здесь.

С праздником Вас, и до скорых встреч!

Приветствую Вас дорогие читатели!

Для тех из вас, кто знаком с RubyOnRail, CodeIgniter, CakePHP, парадигма Model, View, Controller не является новинкой. Шаблон MVC позволяет разделить данные, представление и обработку действий пользователя на три отдельных компонента: модель (Model) для предоставления данных, представление (View) для отображения информации и контроллер (Controller) для интерпретации данных, введенных пользователем.

Если для таких языков программирования, как PHP, Ruby, Python, существует множество фреймворков, использующих MVC, то для JavaScript это пока диковинка. Совсем недавно появился именно такой фреймворк для JavaScript - JavaScriptMVC

Разработка фреймворка пока еще в стадии “альфа”, но тем не менее, он уже сейчас обладает внушительными возможностями. Есть большой набор дополнительных плагинов для использования AJAX, тестирования, добавления объекта History, работы с массивами, строками и много другое. Также, что немаловажно, возможно использование JavascriptMVC с другими библиотеками - jQuery, Prototype и др.

Я решил попробовать библиотеку в действии и создать простое приложение. Вот что у меня получилось: demo.

Читать дальше »

Пока что JavaScript не способен самостоятельно воспроизводить звуковые файлы, например mp3. Однако если призвать на помощь технологию Flash, то может получиться очень неплохая связка для работы с аудио. Именно такую библиотеку я совсем недавно обнаружил в сети. Итак, SoundManager - библиотека, при помощи которой можно добавлять звуковые ролики и управлять ими при помощи JavaScript. Само же воспроизведение звука будет осуществляться маленьким (всего 2,2 К) Flash файлом, который автоматически подгружается библиотекой. Само собой разумеется, что браузер должен поддерживать Flash (не менее 8-й версии).

Читать дальше »

В этом уроке я расскажу, как можно сделать процедуру входа в систему пользователей более удобной используя AJAX. Удобство состоит в том, что пользователю не нужно ждать перезагрузки страницы при отправке формы. Плюс, добавим некоторые “бубенчики” и “свистульки” используя эффекты jQuery.

Читать дальше »

Слово Roar переводится с английского как “орать”. Именно такое громкое название придумали для виджета, который тихонечко появляется в уголочке и показывает нам разные оповещения, уведомления, сообщения об ошибках и т.п. Создан он на основе библиотеки Mootools, и работает на всех основных браузерах.

Минимальные требования - Mootools 1.2, который должен иметь следующие дополнения: Element.Dimensions, Fx.Tween, Fx.Morph, Selectors, DomReady (необязательно).

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

window.addEvent('load', function() {

	var roar = new Roar({
		position: 'lowerLeft',
		duration: 5000 // сообщение показывается 5 секунд
	});

	roar.alert('Britney Spears meets Frankenstein', 'The Beast and the Beauty, who is who!');

	roar.chain(function() {
		roar.alert('News gone crazy', 'Frankenstein is lost!');
	}).chain(function() {
		roar.alert('Frankenstein dead!', 'Who did it, we know it!');
	}).chain(function() {
		roar.alert('We fired our editor!', 'He only wrote stupid lorem ipsum dummies, hopefully we get better texts for the next showcase!');
	});
 });

В этом примере, сначала создается новый объект Roar, с параметрами position=’lowerLeft’ (всплывающее окно будет появляться внизу) и duration = 5000 (окно будет отображаться 5 секунд). Затем вызывается метод roar.alert(), который собственно и показывает сообщения. Он принимает 2 параметра - заголовок и текст сообщения. Далее, используя метод chain() выводятся последовательно три других сообщения. Посмотреть этот пример можно здесь.

перейти на сайт проекта

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

В Mootools, морфинг выполняется при помощи класса Fx.Morph, который имеет следующий синтаксис:

var myFx = new Fx.Morph(element[, options]);

Здесь, element - элемент, или его ID; options - дополнительные опции, как то скорость преобразования (duration) и его тип (transition).

Преобразование выполняется при помощи функции Morph.start(), которая принимает в качестве аргумента либо имя класса, либо объект со стилями, которые необходимо установить для объекта:

var myEffect = new Fx.Morph('myElement', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});

myEffect.start({
    'height': 100,
    'width': 300
});

В этом примере, для скорости указан параметр “short”, что значит быстрый переход, для параметра transition установлено значение Sine.easeOut (подробнее о нем см. здесь). В функцию start() передан объект с двумя свойствами height и width, это значит что объект изменит размер с текущих значений высоты до 100 и 300 пикселей соответственно.

Читать дальше »

В этот релиз добавлены следующие нововведения:

• Полная поддержка REST
• Добавлен компонент Ext.StatusBar с примерами
• Добавлен компонент Ext.Slider Component с примерами
• Дополнительнительные примеры.

Что самое главное, изменилась лицензия с Ext на GPLv3.

John Resig - создатель библиотеки jQuery получал так много предложений о работе, что сначала делился ими со своими читателями, а теперь решил создать бесплатный сайт, посвященный работе на JavaScript - jobs.jsninja.com. Есть там и работа для фрилансеров.

Так что, если вы сильны в JavaScript, ищете работу и английский язык для вас не проблема, пробуйте.

Не так давно я написал заметку о reflection.js - скрипте, создающем зеркальные отражения для изображений. Пару дней назад я нашел похожий скрипт Reflection.js for Mootools, который может делать то же самое, но с библиотекой Mootools, а вчера наткнулся на еще более продвинутый скрипт - reflex.js. Помимо создания простого отражения, reflex.js может поворачивать их вокруг своей оси, создавая эффект Cover Flow.

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

Дополнительно, в дистрибутиве имеется скрипт cvi_reflex_lib.js, который добавляет еще больше гибкости. Подключив его вместо reflex.js, вы сможете заставить изображения реагировать на действия пользователя - например, если пользователь наводит мышкой на изображение, ее тень изменяет прозрачность, а изображение слегка поворачивается.

Скачать скрипт и посмотреть демо и инструкции можно здесь. Также советую посмотреть список проектов на этом же сайте: http://www.netzgesta.de/cvi/. Все перечисленные там скрипты (их там 12), предназначены для придания специальных эффектов изображениям - создание закругленных углов, превращение изображений в слайды, создание изображений с размытыми границами и многое другое.