Classes in MooTools.
Creating your own class in MooTools is very simple:
All class is ready. Now you can create objects of this class:
')
The result is an alert with the words: “Hello, world”.
example 1
initialize is a class constructor. Called automatically when creating an instance of a class. (it is not called if the first argument when creating a class object is $ empty)
A class may have methods:
Here are four methods (not including constructor) - draw, hide, show and toggle.
draw makes the element cool with a blue border
hide hides the item
show shows item
toggle changes the item's visibility
Example of use:
The result is that the element is red and flashes every second.
example 2
Note that to call the show method from the toggle method, use this.show (); this is a magic variable.
The magic property Implements adds new methods to the class. A classic example is adding the setOptions method.
Implements: [Options] means to add all the methods of the Options class to this class. The Options class has only one method - setOptions.
If the options are not specified, the default options will be used (color - red, border thickness - 1px).
Examples of using the class:
example 3
Implements are usually used to add methods to a new class. And so the methods are added to the already created class:
The result is an alert: “I am an added method”
example 4
Question: "And if I add a method that already exists, what will happen?".
Answer: “In the classroom there will be only a new method, you can forget about the old one, you cannot return it.”
Another magical property is Extends. With the help of it a new class is created that expands the existing one. Example:
Expand the class from the first example (Hello, world):
The result is an alert “Hello, world!” From the initialize method of the base class and an alert “extended Hello, world!”
example 5
Question: “Are there any other magic methods besides Implements and Extends?”
Answer: “No, but you can add to Class.Mutators, an example is Binds Mutator ”
MooTools has several classes that are used very often. These are the Options, Events, and Chain classes. Example c Options has already been. But with Events:
addEvent - add event
fireEvent - execute event
In this example, the event is explicitly added using the addEvent method. You can also add an event by specifying it in options with the prefix on and the first uppercase:
example 6
In options there is a magic property - initialize, executed after the class constructor:
example 7
The basics are set out, if you have questions - ask. Answers to all questions can be found in the documentation. And remember, the best documentation is the source code.
archive with examples
// Example 1
var someClass = new Class ({
initialize: function () {
alert ( 'Hello, world!' );
}
}); * This source code was highlighted with Source Code Highlighter .
All class is ready. Now you can create objects of this class:
')
var classObject = new someClass (); * This source code was highlighted with Source Code Highlighter .
The result is an alert with the words: “Hello, world”.
example 1
initialize is a class constructor. Called automatically when creating an instance of a class. (it is not called if the first argument when creating a class object is $ empty)
A class may have methods:
// Example 2
var testClass = new Class ({
initialize: function (element) {
this .element = $ (element);
},
draw: function () {
this .element.setStyles ({
'background-color' : 'red' ,
border: 'solid 1px blue'
});
},
hide: function () {
this .element.setStyle ( 'display' , 'none' );
},
show: function () {
this .element.setStyle ( 'display' , 'block' );
},
toggle: function () {
this .element.style.display == 'none' ? this .show (): this .hide ();
}
}); * This source code was highlighted with Source Code Highlighter .
Here are four methods (not including constructor) - draw, hide, show and toggle.
draw makes the element cool with a blue border
hide hides the item
show shows item
toggle changes the item's visibility
Example of use:
var elMgr = new testClass ( 'el' );
elMgr.draw ();
( function () {
elMgr.toggle ();
}). periodical (1000); * This source code was highlighted with Source Code Highlighter .
The result is that the element is red and flashes every second.
example 2
Note that to call the show method from the toggle method, use this.show (); this is a magic variable.
Implements
The magic property Implements adds new methods to the class. A classic example is adding the setOptions method.
// Example 3
var exampleClass3 = new Class ({
Implements: [Options],
options: { // default options
bgColor: 'red' ,
borderWidth: 1
},
initialize: function (element, options) {
this .setOptions (options);
this .element = $ (element);
},
draw: function () {
this .element.setStyles ({
'background-color' : this .options.bgColor,
'border-style' : 'solid' ,
'border-color' : 'black' ,
'border-width' : this .options.borderWidth
});
}
}); * This source code was highlighted with Source Code Highlighter .
Implements: [Options] means to add all the methods of the Options class to this class. The Options class has only one method - setOptions.
If the options are not specified, the default options will be used (color - red, border thickness - 1px).
Examples of using the class:
var elMgr = new exampleClass3 ( 'el' , {
bgColor: 'yellow'
}); * This source code was highlighted with Source Code Highlighter .
example 3
Implements are usually used to add methods to a new class. And so the methods are added to the already created class:
// example 4
someClass = new Class ();
someClass.implement ({
extraMethod: function () {
alert ( 'I am an added method' );
}
});
( new someClass) .extraMethod (); * This source code was highlighted with Source Code Highlighter .
The result is an alert: “I am an added method”
example 4
Question: "And if I add a method that already exists, what will happen?".
Answer: “In the classroom there will be only a new method, you can forget about the old one, you cannot return it.”
Extends
Another magical property is Extends. With the help of it a new class is created that expands the existing one. Example:
Expand the class from the first example (Hello, world):
// example 5
var extendedSomeClass = new Class ({
Extends: someClass,
initialize: function () {
this .parent (); // call the base class initialize method
alert ( 'extended Hello, world!' );
}
});
new extendedSomeClass (); * This source code was highlighted with Source Code Highlighter .
The result is an alert “Hello, world!” From the initialize method of the base class and an alert “extended Hello, world!”
example 5
Question: “Are there any other magic methods besides Implements and Extends?”
Answer: “No, but you can add to Class.Mutators, an example is Binds Mutator ”
Class.Extras
MooTools has several classes that are used very often. These are the Options, Events, and Chain classes. Example c Options has already been. But with Events:
// example 6
var exampleClass6 = new Class ({
Implements: [Options, Events],
options: { // default options
bgColor: 'red' ,
borderWidth: 1
},
initialize: function (element, options) {
this .setOptions (options);
this .element = $ (element);
},
draw: function () {
this .element.setStyles ({
'background-color' : this .options.bgColor,
'border-style' : 'solid' ,
'border-color' : 'black' ,
'border-width' : this .options.borderWidth
});
this .fireEvent ( 'draw' ); // event draw
}
});
var obj = new exmpleClass6 ( 'el' , {
bgColor: '# 561' ,
borderWidth: 4
});
obj.addEvent ( 'draw' , function () {
alert ( 'draw completed' );
});
obj.draw (); * This source code was highlighted with Source Code Highlighter .
addEvent - add event
fireEvent - execute event
In this example, the event is explicitly added using the addEvent method. You can also add an event by specifying it in options with the prefix on and the first uppercase:
var obj = new exampleClass6 ( 'el' , {
bgColor: '# 561' ,
borderWidth: 4,
onDraw: function () {
alert ( 'draw completed' );
}
}); * This source code was highlighted with Source Code Highlighter .
example 6
In options there is a magic property - initialize, executed after the class constructor:
// example7
var someClass = new Class ({
Implements: [Options],
options: {
initialize: function () {
alert ( 'after initialize' );
}
},
initialize: function () {
alert ( 'initialize' );
}
}); * This source code was highlighted with Source Code Highlighter .
example 7
The basics are set out, if you have questions - ask. Answers to all questions can be found in the documentation. And remember, the best documentation is the source code.
archive with examples
Source: https://habr.com/ru/post/39794/
All Articles