mootools 1.2 cheat sheet

Буквально на днях вышел стабильный релиз Mootools 1.2, который содержит массу новых возможностей и несколько измененный API. Чтобы было легче в нем ориентироваться, советую скачать новый cheat sheet:

Mootools cheat sheet

Источник: mediaVROG blog.

Работа с классами в Mootools

В одной из прошлых статей я писал об основах программирования с использованием Mootools, а именно о работе с элементами и событиями. В этом уроке речь пойдет о несколько более сложной теме – объектно-ориентированном программировании, в частности о создании классов и объектов, а также о наследовании. В качестве примера я покажу процесс создания класса SlideShow (для отображения слайдов) и двух его дочерних классов – ImageSlideShow (для показа изображений) и RssSlideShow (для показа лент новостей).

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

Всплывающие подсказки на JavaScript – всего 2K

Майкл Лейгебер (Michael Leigeber) снова порадовал очередной “карапулькой” – очень маленький скрипт для всплывающих подсказок, который весит всего 2 килобайта, и притом абсолютно независим от сторонних библиотек.

Всплывающие подсказки

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

onmouseover="tooltip.show('Здесь текст <strong>подсказки</strong>');"
onmouseout="tooltip.hide();"

Стоит отметить, что это уже не первый скрипт автора, который обладает таким маленьким размером (особенно с учетом их полной независимости) и хорошей функциональностью. Советую обратить внимание и на следующие скрипты: JavaScript меню со слайдером на фоне (1Кб), горизонтальное меню аккордион (1Кб).

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

Релиз Lightgallery 1.1

Lightgallery – клон популярного скрипта Lightbox, который не зависит от сторонних библиотек и весит всего 9,8К (минимизированная версия, 7,7 К в сжатом виде).

LightGallery - скрипт в работе

Возможности

  • Масштабирование изображений
  • Возможность изменять режим “во весь экран/по размеру экрана”
  • Анимированные эффекты – плавное изменение размеров и прозрачности
  • Возможность устанавливать опции: изменять скорость анимации, включать/выключать анимацию, устанавливать синхронное изменение размеров, включать/выключать масштабирование и др.
  • Возможность добавлять языковые пакеты (в данный момент доступен только русский)
  • Предварительная загрузка изображений (preload)

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

смотреть демозагрузитьдомашняя страница проекта

Phototype – работа с изображениями в JavaScript

Phototype – интересный и вместе с тем простой клиент-серверный скрипт основанный на библиотеке Prototype для работы с изображениями, который может обрезать, поворачивать, добавлять тень к изображениям и др. Все эти манипуляции выполняются на сервере при помощи GD библиотеки для PHP. На стороне клиента работа с библиотекой выглядит так:

l_oPhoto = new Photo().load('image.jpg');
l_oPhoto.resize({width:200});
l_oPhoto.rotate(3);
l_oPhoto.dropShadow();
l_oPhoto.addCaption('Get ajaxorized!', '1942.ttf');
document.body.appendChild(l_oPhoto.fetch());

И результат выполнения этого кода:

Phototype

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

Страница 10 из 20« Первая...«6789101112131415»...Последняя »

JSToolbox создан на основе WordPress