Изучаем MooTools. Шаг 1 - Введение
- Содержание
MooTools - компактный, модульный, объектно-ориентированный JavaScript фреймворк, который позволит Вам писать яркий, гибкий и кросс-браузерный код. С MooTools гораздо легче работать с CSS, обрабатывать события JavaScript. Кроме того, MooTools имеет множество расширений, которые позволяют не только изменять свойства объекта, но делать это плавно, что создает запоминающиеся анимационные эффекты.
Установка MooTools 1.2
- Необходимо скачать библиотеку
- Закачать на сервер
- Подключить ее тегом
<script src="mootools1.2core.js" type="text/javascript"></script>
Если Вам нужны не все классы библиотеки, Вы можете отобрать их в Core Builder.
Функции MooTools должны быть вызваны в событии domready:
window.addEvent('domready', function() {
exampleFunction();
});
Описание библиотек
Рассмотрим компоненты библиотеки, их основные функции.
Core
Ядро содержит общие функции фреймворка. Вы можете использовать некоторые из них:
- $chk(item) - проверить значение переменной (возвращает true, если item существует или 0, иначе false)
- $random(min, max) - возвращает случайное число в диапазоне [min, max]
- функции, позволяющие определить браузер, его возможности
Native
Этот раздел содержит функции, позволяющие управлять массивами, функциями, числами, строками, кэшем и событиями. Примеры:
- .each() - создает цикл обхода по всем объектам массива
- .getLast() - возвращает последний элемент массива
- .periodical() - создает событие, повторяющееся каждые x миллисекунд
- .round() - округляет значение до заданной точности
Class
Базовый класс фреймворка. Вернемся к использованию классов в MooTools позже.
Element
Element класс обеспечивает немного более полезные возможности библиотеки. Он содержит методы, позволяющие выбрать элементы DOM, изменять их свойства, стили.
- .getElement() - возвращает элемент по заданному ID или class
- .getElements() - возвращает все элементы по заданному ID или class
- .addClass() - добавляет класс CSS к элементу
- .getProperty(), .setProperty() - возвращает и устанавливает значение свойства елемента
- .getStyle(), .setStyle() - возвращает и устанавливает значение стиля CSS элемента
- .getCoordinates() - возвращает значения координат объекта (размеры, расположение)
Utilities
Класс расширяет возможность выборки элементов, предоставляет инструменты для работы с AJAX, cookies, swiff
FX
Класс позволяет Вам создавать анимационные эффекты, основанные на различии стилей.
Request
Содержит инструменты для работы с JavaScript XMLHttpRequest (AJAX). Класс имеет возможность передачи в формате HTML, JSON.
Plugins
Плагины MooTools расширяют функциональность ядра, что позволяет Вам легко добавить в проект новые возможности. Вы можете выбрать необходимые файлы из списка на сайте фреймворка.
- Fx.Slide
- Fx.Scroll
- Fx.Elements
- Drag
- Drag.Move
- Color
- Group
- Hash.Cookie
- Sortables
- Tips
- SmoothScroll
- Slider
- Scroller
- Assets
- Accordion
Полная документация по функция фреймворка находится на официальном сайте.
Понравилась статья? Подпишись на RSS.



Популярные статьи
Последние записи
Разделы


Комментарии
Простите, для чайника расскажите, что значит второй пункт после скачки - ЗАКАЧАТЬ СЕРВЕР (куда именно)? уапше не понятно... а очень хочется и нужно очень:)
ОтветитьСоздайте папку js в корне вашего сайта и скопируйте туда файл ядра фреймворка (mootools-1.2.4-core-yc.js). Затем подключите библиотеку тегом
Путь к этой папке может быть любой, главное, правильно прописать src в теге script.
Имейте в виду, начальный слеш в пути к скрипту, означает, что путь отсчитывается от корня сайта.
Ответить