Изучаем MooTools. Шаг 1 - Введение

  • Содержание

MooTools - компактный, модульный, объектно-ориентированный JavaScript фреймворк, который позволит Вам писать яркий, гибкий и кросс-браузерный код. С MooTools гораздо легче работать с CSS, обрабатывать события JavaScript. Кроме того, MooTools имеет множество расширений, которые позволяют не только изменять свойства объекта, но делать это плавно, что создает запоминающиеся анимационные эффекты.

Установка MooTools 1.2

  1. Необходимо скачать библиотеку
  2. Закачать на сервер
  3. Подключить ее тегом
<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.

Советую почитать:

Изучаем MooTools. Шаг 7 - AJAX

Следующая запись Изучаем MooTools. Шаг 2 - Селекторы Обработка ошибки 404 Предыдущая запись

Комментарии

  • Павел написал 19 декабря 2009 года

    Простите, для чайника расскажите, что значит второй пункт после скачки - ЗАКАЧАТЬ СЕРВЕР (куда именно)? уапше не понятно... а очень хочется и нужно очень:)

    Ответить
  • Александр написал 19 декабря 2009 года

    Создайте папку js в корне вашего сайта и скопируйте туда файл ядра фреймворка (mootools-1.2.4-core-yc.js). Затем подключите библиотеку тегом

    Путь к этой папке может быть любой, главное, правильно прописать src в теге script.

    Имейте в виду, начальный слеш в пути к скрипту, означает, что путь отсчитывается от корня сайта.

    Ответить