A Mootools Example from Scratch :: A Beginner's Guide

The point of this document is to show you how to actually put the code examples in my Mootools Tutorial into a page. I'm not going to demonstrate everything here, but this page should get you started. Unlike my other examples, this one is meant for you to download and to look at the source.

A draggable box

Let's make a box for us to play with. I've already styled this in my css:

My css defines it as being hidden, but that's no good, so let's show it.

Note that I have already made all the fxTarget boxes in this example draggable. Look at the source of this page and find the javascript function called setUpFxTargets and read the comments to see how it works.

How about some of the plugins?

Accordions

Ok, how about an accordion? Here's the example from the tutorial, but instead of the fancy code block that you have to run, I've already made this one. View the source of this page and check out the makeAccordions function, as well as how it gets run on page load using window.onDomReady

first section
I'm the content for the first section. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
second section
I'm the content for the second section. Velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
third section
I'm the content for the third section. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Sliders

Let's have a box with some buttons that slide out from behind it.





Let's write a class

Ok, let's do something a little more complicated. Let's write a class. Here's a class I wrote for CNET - it's a really, really simple slideshow gallery.

If you view the source of this html page, you'll see the class and how it works.

 of  PreviousNext