Сегодня СЏ продолжу рассказ Рѕ библиотеке mootols. Это РѕРґРЅР° РёР· наиболее известных javascript-библиотек, позволяющих внедрить РЅР° веб-страницу немножко эффектов Рё чуть-чуть анимации. Сегодня РјС‹ заверС?РёРј знакомство СЃ обязательной частью mootols Рё попробуем создавать всплывающие подсказки, управлять перемещением элементов, эффектами перехода РѕРґРЅРѕРіРѕ изображения РІ РґСЂСѓРіРѕРµ. Р’ РїСЂРѕС?лый раз РјС‹ остановились РЅР° изучении методов РїРѕРёСЃРєР° html-элементов РЅР° странице. “СтраС?РЅРѕРµ” чередование вызовов getElementsByTagName Рё getElementById осталось РІ далеком РїСЂРѕС?лом: РІСЃРµ современные javascript-библиотеки имеют средства для того, чтобы выполнить РїРѕРёСЃРє элемента РЅР° странице, записав его характеристики: id, класс css, РёРјСЏ тега или РёС… комбинацию. Честно РіРѕРІРѕСЂСЏ, РІ этом плане mootools слабее jquery (РѕР± этой библиотеке СЏ писал РІ серии статей летом 2007), РЅРѕ сегодня разговор прежде всего РѕР± анимации.

Начнем СЃ простенького задания: РїСЂРё наведении РјС‹С?Рё РЅР° некоторое изображение РѕРЅРѕ должно смениться РґСЂСѓРіРёРј. Сложность РЅРµ РІ том, чтобы создать обработчик события omouseover Рё onmouseout, Р° РІ сущей безделице: РІ том, чтобы запустить процесс анимации именно тогда, РєРѕРіРґР° РІСЃРµ нужные для нее ресурсы Р±СѓРґСѓС‚ загружены браузером. Рў.Рµ. РјС‹ навели РјС‹С?СЊ РЅР° картинку, Рё РѕРЅР° должна тут же смениться РЅРѕРІРѕР№, Р° РЅРµ так: сначала исчезает старая картинка, Рё только через несколько секунд появляется новая. Даже самый начинающий javascript-разработчик знает, что можно предварительно загрузить нужные картинки, РЅРѕ РЅРµ показывая РёС… РґРѕ РїРѕСЂС‹ РґРѕ времени — например, так:

<img src="1.png" onmouseover="this.src='2.png'" onmouseout="this.src='1.png'"/>
var imgHover = new Image ();
imgHover.src = '2.png';

Р РІСЃРµ было Р±С‹ С…РѕСЂРѕС?Рѕ, если Р±С‹ веб-страница РЅРµ содержала множество изображений, css- Рё javascript-файлов, загружающихся РІ хаотичном РїРѕСЂСЏРґРєРµ. Р’РѕРІСЃРµ РЅРµ факт, что Рє тому времени, как пользователь наведет РјС‹С?СЊ РЅР° изображение, то, второе, изображение будет уже загружено. Р’ составе mootols есть класс Asset, его назначение — динамическая загрузка css- Рё js-файлов, изображений. Для картинок (Рє сожалению, только для РЅРёС…) можно установить обработчик события “РІСЃРµ картинки были загружены”. Р’РѕС‚ первый пример:

new Asset.javascript ('js/logic.js', {id: 'js_logic});
new Asset.css ('css/for_ie.css', {id: 'css_ie_fix'});

Первый параметр вызова функции css или javascript — РёРјСЏ загружаемого файла, затем идет перечисление атрибутов, которые Р±СѓРґСѓС‚ назначены для динамически созданных тегов “<script>” Рё “<link>”. Можно загрузить РѕРґРЅСѓ картинку, Р° РІ обработчике события “загрузка заверС?ена” назначить, РІ СЃРІРѕСЋ
очередь, обработку событий mouseover Рё mouseout для изображения (предполагается, что РЅР° странице есть картинка СЃ id, равным “roll”): function onloadComplete (){

$('roll').onmouseover = function (){this.src = '2.png'};
$('roll').onmouseout = function (){this.src = '1.png'}; }
new Asset.image ('2.png', {onload: onloadComplete});

Если РІС‹ хотите динамически загрузить несколько картинок, удобнее будет воспользоваться функцией images. Ей РІ качестве параметра передается РЅРµ только массив СЃ именами картинок, РЅРѕ Рё РґРІРµ функции (хотя РѕРЅРё Рё РЅРµ обязательны). Первая функция onComplete вызывается тогда, РєРѕРіРґР° РІСЃРµ картинки были загружены, вторая — onProgress — вызывается каждый раз, как загрузится очередное изображение.

new Asset.images (['1.png', '2.png'], {
onComplete: function (){alert ('all images loaded');},
onProgress: function (){alert ('next pic was loaded'); } });

Загруженную картинку можно автоматически переместить РІ определенное место страницы. Для этого Рє результату вызова “new Asset.image” следует применить функцию injectInside, Р° ей РІ качестве параметра указать id того элемента страницы, внутрь которого будет помещена эта картинка. Р’ примере предполагается, что РЅР° странице существует некоторый тег div СЃ id, равным “block”. Картинка РЅРµ затрет старое содержимое элемента “block”, Р° добавит изображение Рє этому содержимому РІ самый конец.

window.addEvent ('domready', function (){
new Asset.image ('2.png', {alt : 'pic', title : 'info' }).injectInside ('block'); });

Если вам хочется вставить картинку внутрь block, РЅРѕ РЅРµ РІ конце, Р° РІ самом начале — используйте вызов injectTop. Найдется Рё еще пара функций: injectAfter — изображение будет помещено после тега div, injectBefore — РґРѕ блока div. Естественно, использовать injectInside, injectBefore, injectTop можно РЅРµ только для динамически создаваемых картинок, РЅРѕ Рё для существующих тегов:

$('friend').injectTop ('block');

Здесь предполагается, что friend Рё block — РґРІР° блока div, размещенных РІ тексте страницы. Общая рекомендация: РЅРµ забывайте весь РєРѕРґ mootols помещать внутрь функции, обрабатывающей событие domready. Р’ противном случае РєРѕРґ может Рё РЅРµ работать — возможно, РЅР° момент выполнения js-РєРѕРґР°, перемещающего РѕРґРёРЅ div внутрь РґСЂСѓРіРѕРіРѕ, сами эти div’С‹ еще РЅРµ СЃСѓС‰