1. Add Mootols framework to your page
First, you have to download the latest version of MooTools and add a link to the framework within the <head> tag of the page:
Copy and paste the following code within the <head> tag:
<script type="text/javascript" src="mootools.svn.js"></script>
Ok, now you are ready to use MooTools feautures in your web pages!
2. Get DOM element
To get a DOM element by ID you can use the following syntax:
var element = $('myElement');
... this line of code gets the element with ID="myElement" in your page. If you have some falimiarity with JavaScript, it's almost the same thing to get a DOM element by reference using the following code:
var element = document.getElementById('myElement');
Ok, now using $$ you can get an array of elements within a DOM element with a specific ID:
$$('#myElement li.myListElement');
...for example, this line if code returns an array of all <li> tags with the class="myListElement" within the DOM element with ID="myElement".
3. setStyle() and get Style()
These are two basic methods to set and get element properties (height, background, color...). To set a property you can use the following code:
$("myElement").setStyle("height", "200px")
...or if you have to set multiple properties you have to use the following code:
$("myElement").setStyles({
background: "#DEDEDE",
border:"solid 1px #999999",
width: "700px"
height: "80px"
});border:"solid 1px #999999",
width: "700px"
height: "80px"
To get a property you can use getStyle() specifying the property you want to get (height, background, color...):
$("myElement").getStyle("height")
The previous code returns the height of the DOM element with ID="myElement", for example "200px". If you want the number (200 and not the string "200px") you have to use the following code:
$("myElement").getStyle("height").toInt()
...in this way the value returned will be a number (200).
4. Unobtrusive Javascript
Now, we can start to see how to write unobtrusive Javascript code using MooTools in order to separate page content from JavaScript code. Your have to use the following code:
<script type="text/javascript">
window.addEvent('domready', function() {
//Some lines of code here...
});
</script>
window.addEvent('domready', function() {
//Some lines of code here...
});
</script>
For example I want to write a simple script which display an alert with "Hello World!" when an user click on a link with ID="myElement". The script is:
<script type="text/javascript">
window.addEvent('domready', function() {
$('myElement').addEvent('click', function() {
alert('Hello World!');
});
});
</script>
window.addEvent('domready', function() {
$('myElement').addEvent('click', function() {
alert('Hello World!');
});
});
</script>
...and HTML code is:
<a href="home.html" id="myElement">
Try to click here!
</a>
Try to click here!
</a>
...instead of an "obtrusive" code with onClick event which calls a function (for example doSomething()) added within the <a> tag:
<a href="home.html" id="myElement" onClick="javascript:doSomething()" >
Try to click here!</a>
Try to click here!</a>
Example 1: change background color
Ok, now we can try to write a simple code which change the background color of a layer with ID="myLayer":
<div id="myLayer">
<a href="#" id="myElement">Change Background</a>
</div>
<a href="#" id="myElement">Change Background</a>
</div>
...how you can see, you don't call a JavaScript function using an event (onClick, onFocus...) within <a> tag. The reference to the DOM element "myLayer" will be insert into the following script which you have to add below the link to the MooTools framework in the <head> tag (step 1):
<script type="text/javascript">
window.addEvent('domready', function() {
$('myElement').addEvent('click', function() {
$('myLayer').setStyle('background', '#DEDEDE');
});
});
</script>
window.addEvent('domready', function() {
$('myElement').addEvent('click', function() {
$('myLayer').setStyle('background', '#DEDEDE');
});
});
</script>
Example 2: change and reset background color
Now we can modify the previous code and make it a little bit more complex. In this example when an user clicks on "Change Background", if the background colors of the layer with ID="myLayer" is not set, then the script sets the background color of the layer to this value "#DEDEDE"; else, the script set the background color to null.
HTML code is the same of the previous example:
<div id="myLayer">
<a href="#" id="myElement">Change Background</a>
</div>
<a href="#" id="myElement">Change Background</a>
</div>
... but I changed something in the script:
<script type="text/javascript">
window.addEvent('domready', function() {
</script>
window.addEvent('domready', function() {
$('myElement').addEvent('click', function() {
});var currentBgColor = $('myLayer').getStyle('background');
if(currentBgColor==''){
$('myLayer').setStyle('background', '#DEDEDE');
} else {
$('myLayer').setStyle('background', '#FFFFFF');
}
});if(currentBgColor==''){
$('myLayer').setStyle('background', '#DEDEDE');
} else {
$('myLayer').setStyle('background', '#FFFFFF');
}
</script>
Download source codeHow you can see the code is very simple. Now you can start to write more complex functions to manipulate element properties. In the next lesson we we'll see how to interact with Forms using MooTools.
Do you have some suggest? Add a comment!
No comments:
Post a Comment