Изучаем MooTools. Шаг 1 - Введение
Mootools
- Содержание
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.
Имейте в виду, начальный слеш в пути к скрипту, означает, что путь отсчитывается от корня сайта.
Ответить