Пример 1.js-код window.addEvent('domready', function() { $('clickMe').addEvent('click', function(e) { alert('Превед! Ты только что нажал на меня ;)'); e.stop(); }); }); html-код <a id="clickMe" href="#">Нажми меня</a> Комментарии Serg_pnz 1. Строго говоря конструкция window.addEvent('domready', function() { ... }); нужна только один раз в скрипте, всё остальное нужно разместить внутри этой конструкции (смотри исходный js-код примера.) 2. addEvent именно "слушает" страницу. Попробуйте отключить js в браузере и браузер будет выполнять переход по ссылке (в нашем случае по якорю). 3. MooTools работает или управляет именно id элементом, которые можно присвоить хоть слою, хоть картинке, хоть ячейке какой-либо таблицы... 4. $('clickMe') - обращение к элементу по id. 5. ИЕ6 очень капризен ко всему, а к качеству программирования на MooTools особенно, так что внимательно следите за скобками, запятыми при перечислении параметров и точкой-запятой при на концах строк. 6. Эксперементальным путем для страницы был подобран такой заголовок <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> он позволяет выполнять все функции MooTools на ИЕ6. 7. Первый прогон и отладку делайте в FF, но тестируйте тут же в ИЕ6, что бы не уйти с ошибкой далеко и не переписывать весь скрипт. Пример 2.Сменить содержимое слоя | Вернуть содержимое слоя Нормальное содержание
js-код window.addEvent('domready', function() { $('clickMe2').addEvent('click', function(e) { $('someDiv').set('html', 'Новое содержание'); e.stop(); }); $('clickMe3').addEvent('click', function(e) { $('someDiv').set('html', 'Нормальное содержание'); e.stop(); }); }); html-код <p><a href="#" id="clickMe2">Сменить содержимое слоя</a> | <a href="#" id="clickMe3">Вернуть содержимое слоя</a></p> <div id="someDiv">Нормальное содержание</div> Пример 3.Контент
js-код window.addEvent('domready', function() { var toggleMe = new Fx.Slide('toggleMe', { duration: 1000, transition: 'bounce:out' } ); toggleMe.hide(); $('toggler').addEvent('click', function(e) { e.stop(); toggleMe.toggle(); }); }); html-код <a href="#" id="toggler">Переключи меня</a> <div id="toggleMe">Контент</div> Пример 4.Контент
js-код window.addEvent('domready', function() { var toggleMe2 = new Fx.Slide('toggleMe2', {duration: 1500, transition: 'elastic:out', mode: 'horizontal'} ); $('toggler2').addEvent('click', function(e) { toggleMe2.slideOut(); e.stop(); }); $('toggler3').addEvent('click', function(e) { toggleMe2.slideIn(); e.stop(); }); }); html-код <a href="#" id="toggler2">Спрятать</a> | <a href="#" id="toggler3">Показать</a> <div id="toggleMe2">Контент</div> СсылкиСкачать пример (zip, 30 kb) |