Морфинг на Mootools

22 апреля 2008

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

В 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 пикселей соответственно.

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

Добавить в закладки:         

Вышел релиз Ext JS 2.1

21 апреля 2008

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

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

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

Релиз Ext JS 2.1

Добавить в закладки:         

JavaScript Ninja Jobs

21 апреля 2008

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

Ninja Jobs

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

Добавить в закладки:         

Скрипты зеркального отражения

20 апреля 2008

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

reflex.js - эффект Cover Flow

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

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

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

Добавить в закладки:         

ddmenu - контекстное меню на Mootools

19 апреля 2008

ddmenu - это простой скрипт, основанный на Mootools, и позволяющий создавать собственные контекстные меню для разных элементов на странице. По умолчанию, вид меню очень похож на системное - с иконками слева, заголовком меню, но вид можно изменять из подключаемой таблицы стилей. Появляется меню плавно, с применением fade эффекта (можно настраивать). Также можно активировать/деактивировать любые элементы меню. Браузеры, в которых протестирован скрипт - Firefox 2, Safari 3, Internet Explorer 6/7, Opera 9 под Windows. Firefox 2, Safari 3 под Mac OS X.

Контекстное меню

В комбинации с нажатой клавишей CTRL, щелчок правой кнопкой мыши покажет меню браузера, а при нажатой клавише SHIFT будут показаны оба меню.

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

Добавить в закладки:         

Mootools для начинающих - работа с элементами и событиями

18 апреля 2008

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

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

Добавить в закладки:         

Скрипт виртуальной клавиатуры

15 апреля 2008

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

Этот скрипт виртуальной клавиатуры поможет вам создать динамически появляющуюся клавиатуру возле текстовых полей. Скрипт поддерживает множество языков, в том числе и русский, и протестирован в большинстве браузеров - Internet Explorer, Firefox, Opera, Safari и др.

Виртуальная клавиатура

Для подключения скрипта нужно добавить следующие две строки в <head>:

<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css" />

В текстовые поля, для которых нужно добавить виртуальную клавиатуру, нужно добавить класс “keyboardInput”:

<input type="text" value="" class="keyboardInput" />

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

Посмотреть примеры можно на сайте автора.

Добавить в закладки:         

Как сделать полупрозрачный ролловер на jQuery

12 апреля 2008

В этой статье я покажу простой метод создания полупрозрачной подсветки (т.н. ролловер) элементов меню, который создает эффект мягкого фонового свечения. Эффект работает во всех браузерах, включая IE 6 - это возможно за счет использования полупрозрачных изображений в формате png и скрипта pngfix для вышеупомянутого браузера. Результат будет примерно следующим:

Полупрозрачный ролловер

Этот метод был создан Брюсом Крозе (Bruce Kroeze), статью которого можно найти здесь.

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

Добавить в закладки:         

Доступна бета версия LightGallery 1.1

9 апреля 2008

LightGallery это скрипт для просмотра изображений, написанный на JavaScript (подобен популярному скрипту LightBox). Он способен отображать как одиночные изображения, так и галереи с использованием визуальных эффектов. Скрипт очень компактен (7K - сжатая версия) и полнофункциональный, и при этом он независит от других библиотек.

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

  1. animate(по умолчанию - true) - включить/выключить анимацию
  2. framesNumber (по умолчанию - 20) - количество кадров используемых при анимации
  3. speed (по умолчанию - 30) - промежуток времени между кадрами, мсек
  4. resizeSync (по умолчанию - false) - если установлено в true, то контейнер изменяет размеры одновременно и по ширине и по высоте
  5. enableZoom (по умолчанию - true) - включить/выключить изменение масштаба картинки
  6. fadeImage (по умолчанию - true) - использовать эффект плавного появления изображения (лучше выключить для изображений большого размера)
  7. alias (по умолчанию - ‘lightgallery’) - псевдоним для атрибута rel (rel = ‘lightgallery’).

Изменился и метод подключения скрипта. Если раньше достаточно было просто подключить основной скрипт, то сейчас необходимо добавить явный вызов функции lightgallery.init(), которая может принимать один параметр - объект, содержащий опции. Пример:

<script src="lightgallery/lightgallery.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
	lightgallery.init({
		enableZoom:false,
		speed:50,
		fadeImage:false
	});
}
</script>

В новую версию также добавлены файлы русификации для трех кодировок - utf-8, cp-1251, koi8-r. Чтобы русифицировать скрипт, нужно просто подключить нужный файл русификации из папки lang. Это нужно обязательно сделать сразу после подключения основного скрипта. Пример:

<script src="lightgallery/lightgallery.min.js" type="text/javascript"></script>
<script src="lightgallery/lang/ru_utf8.js" type="text/javascript"></script>

В предыдущей версии анимированное изменение размеров контейнера производилось одновременно и по ширине и по высоте, в новой версии по умолчанию размер контейнера изменяется последовательно. Если же вам по душе вариант с одновременным изменением размера, то установите опцию resizeSync в true. Также полезным может быть возможность установки псевдонима для атрибута rel. В предыдущей версии в ссылки, которые нужно было отображать, добавлялся атрибут rel=”lightgallery”. Теперь, вместо lightgallery можно использовать другое значение при помощи опции alias. Например, если установить псевдоним в значение lightbox, то ссылки можно отметить как rel=”lightbox”, таким образом можно легко перейти с LightBox на LightGallery не изменяя все ссылки.

Ну и последнее - в этой версии добавлена возможность управления при помощи клавиатуры: n - следующее изображение, b - предыдущее изображение, + / - - увеличить/уменьшить изображение, f - показывает истинный размер изображения, ESC - закрыть галерею.

На этом все. Если у вас появятся замечания, буду рад услышать.

смотреть демоскачать

Скачать LightGallery также можно на Google Code. Страница проекта находится здесь.

Добавить в закладки:         

Вышла новая версия WP-Prettify плагина

7 апреля 2008

WP-Prettify - это плагин для wordpress, созданный на основе google-code-prettify. Он предназначен для подсветки синтаксиса на web-страницах. Подсветка выполняется на стороне клиента, то есть в браузере пользователя при помощи скрипта JavaScript.

В новой версии исправлены ошибки, возникавшие при отображении HTML/XML, а также несколько оптимизирован и сокращен скрипт. Также изменен дизайн панели переключения форматирования.

скачатьстраница проекта

Добавить в закладки: