Mootools Manual

1

What is Mootools, a Javascript framework to build dynamic web applications compatible with any browser. Introduction to Mootools.

two

We can download Mootools from the framework page itself. We must choose the modules with which we want to work and the compression of the file.

3

A first example of a web page that uses Mootools to make a simple effect that allows us to get to know the framework without any prior knowledge of the system.

4

Let’s go to another simple example with Mootools to create a scroll on a page layer.

5

Various developers offer components made with Mootools for use in web pages.

6

We can associate the Mootools domready event to the window object, to do things when the DOM is ready (Dom Ready).

7

We begin the description of the mootools framework by commenting on the core, a library of functions that are part of the mootools core.

8

The explanations of the Mootools core library continue, which forms the core of the framework.

9

Description and explanations about the classes in Mootools. How to create object-oriented programming classes with the Mootools Framework.

10

Now let’s look at creating objects from Mootools classes and using those objects to access their properties and call their methods.

eleven

What is a constructor and how to create constructors to Mootools classes. We continue explaining about working with classes in Mootools.

12

We are going to see how to perform class inheritance (object-oriented programming) in Mootools. How to extend classes, using Extends.

13

With the $extend() function of the Mootools core, we can extend some objects with the properties and methods of other objects. We also show how to create classes by extending other classes with objects.

14

With implement we can implement new features and functionality in Mootools classes, modifying the class itself instead of creating new classes.

fifteen

Let’s take a look at the $merge() function, from the Mootools core, which is used to merge several source objects into a single destination object, without altering the source objects.

16

The Mootools Element module is one of the most important, which allows us to access any element on the page and alter its properties. We start by learning about the Window $() method.

17

We continue to see the Mootools Element module, now explaining the $$() function, which is used to obtain a group of page elements.

18

Explanations about the Mootools Element class and the Element constructor, to make new elements on the page.

19

How to build elements and inject them into the page with Mootools. We build elements with the Element constructor and insert them into the page with the inject method.

twenty

We use Mootools’ getElement() function to select an element from the web page, which we can then alter to change its properties with other Element methods.

twenty-one

The getElements() method of the Mootools Element class allows you to select all elements of a type or tag.

22

To continue with the Mootools Element class, we provide explanations and examples on the getProperty() and setProperty(), addClass() and removeClass() methods.

23

We continue to offer explanations about methods of the Mootools Element class: empty(), destroy() and clone().

24

First notions for working with events in Mootools elements, we see the addEvent method of the Element class.

25

The bind() method of Mootools functions is used to change the scope of the this variable when calling a function. Mootools Events is widely used, we will see why.

26

We continue to see the Mootools Element.Event class, which contains a method called fireEvent that is used to fire events for any element on the page.

27

An example is the use of Mootools to collect and consolidate the knowledge seen so far in the Mootools manual. We are going to create a textarea that counts the characters that have been typed by the user.

28

Extended features of Arrays with Mootools, with various functions and methods to do things on tables.

29

Various methods that can be applied to a function, to extend and improve the possibilities of working with functions in Mootools.

30

Number is a Mootools library for working with numbers, which provides few but useful features such as rounding, dimensions and format conversions.

31

Features that Mootools adds to the String class, native to Javascript, for working with character strings.

32

Mootools Hash offers us very useful features to access properties and methods of objects, to analyze objects and go through all their properties or iterate with their elements.

33

A class that helps us perform advanced tasks with events in Mootools. We will explain the Native Event class, how to use it, and how to stop the execution and propagation of events.

3. 4

Let’s see how to define keyboard events, which are fired when the user presses keys on the keyboard, using the Mootools Javascript framework.

35

We started to study the effects that can be done with Mootools with the Fx class and several others that inherit from it.

36

We learn to use the fade() method of the Mootools Element class, which is used to make fade effects with transparency.

37

An effect with Mootools to illuminate or highlight an element that you want to highlight in response to user actions.

38

We explain the Mootools tween method, which is used to make a simple transition between two values ​​of a CSS attribute.

39

The FX.Tween class is used to make fully customizable effects in Mootools, with a CSS property, from one value to another.

40

How to define events on effects with Mootools and the Fx class, to do things when the effect starts or ends.

41

Chaining Mootools functions and effects through the Chain class, for sequential execution, one by one.

42

Now we will see how to chain different Mootools effects with the Fx class that implements Chain.

43

The Mootools Options class provides a simple mechanism for our classes to have configuration options that can be set to default values.

44

Mootools’ window.getSize method, to get browser area and page scroll sizes. Depending on the Doctype declaration it will work fine or not in Internet Explorer.

Four. Five

Bases to learn to work with Ajax using the Mootools Javascript framework and the Request class.

46

Explanation of the process of creating an Ajax connection with Mootools and a couple of simple examples of using the Request class.

47

In a simple way, in Ajax calls with Mootools, we can send data by both POST and GET methods to the page we request.

48

Video in which we will show two very simple Ajax examples with the Mootools Javascript framework.

49

How to submit a form with Ajax and show the results on the page itself without reloading it, with Mootools.