Пример 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) |