AHFX Mootools Home
Basic Mootools
Contact AHFX
|
|
Mootools 1.1 Basics
- Download Mootools - Click here to download the packed version that we will be using in our tutorials.
- Now create the following folder/file structure:
- Website Root Folder
- mootools (folder)
- mootools-release-1.11.js
- custom-mootools.js
- firstpage.html
- In firstpage.html type this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your title</title>
<script type="text/javascript" src="mootools/mootools-release-1.11.js"></script>
<script type="text/javascript" src="mootools/custom-mootools.js"></script>
</head>
<body>....</body>
</html>
Click here to view working code.
Now that doesn't really do much for us, so let's write our first mootools script. Open your custom-mootools.js file and add the following code:
window.addEvent('domready', function(){
$$('a.red').each(function(link){
link.setStyle('color','red');
});
});
Click here to view working code.
While this code might look scary, all it really does is loop through the "a" tags that have a class of red in a document and add a style to the tag of color:red;. See that wasn't hard at all.
Now let's say that you wanted to have the color change after something happened, like say a person clicks a button. We'll update our code like this in our custom-mootools.js script:
|
|
Featured Tutorials
|
