A relative newcomer on the scene, MooTools is one of the most compact of all the Frameworks. One of the ways that it keeps its size down is by letting you select the individual components you want to download and the compression you want, giving you a file that suits your personal needs. It takes a class-oriented approach similar to Prototype's structure and is easy-to-use. In terms of functionality, MooTools offers a little bit of everything.
Like Prototype, MooTools offers some convenience functions for
dealing with native data types, such as strings, numbers and arrays. For instance,
Array.invoke('fn', args) function applies a function to all the elements
in an array and returns the function results in another array. There are also
a number of highly useful string functions such as
string.clean(), which removes all extraneous whitespace from a string and trims
many similar string utilities, these functions act on all the words in a string,
as opposed to just one:
With MooTools, you can add multiple events to an element, create
your own custom events, or use one of the custom MooTools ones, such as the
scrollwheel event. This is nice to have because every browser handles the scrollwheel
differently. There are also
mouseleave events that improve the
mouseover/mouseout ones. While the latter sometimes just doesn't
work as expected,
mouseenter only fires once you enter the element and doesn't fire again if your mouse crosses over children of the element. The following
code adds a morph effect to both the
One of the things that makes MooTools a well rounded Framework is the inclusion of some nice effects. Included in its arsenal are fade, tween and morph effects. The latter is especially neat in that you can assign a CSS class as the target. There are also effects to manipulate page elements' height, border, size and other properties.
In MooTools the basic Ajax request object class is called
It has two methods called
Request.JSON(). The former is handy
for displaying simple Web content directly in the page, while the
JSON() method is meant
for more complex data.
Request.HTML() method requires one argument, which is
a hash object. Unless you are explicitly performing a GET or POST operation,
you'll need provide the URL of the server-side component, at a bare minimum. The HTML
operation ( GET of POST ) is not part of the options. It's assigned by chaining
a second method. In the following example an HTML get request is made, passing
in the data from the 'user-form.'
The following, more complex example, uses a POST to send some
data to the server and displays the
person class's attributes in alert boxes.
Notice how there's no processing required to convert the object from the JSON
return string. Since we're using the
Request.JSON() function, MooTools knows
exactly what to do with the Ajax response string:
As the name suggests, plug-ins are ready-made widgets that you can insert directly into your page to provide advanced functionality. They include the Accordion, Slider, Sortables and Dynamic Sortables. The accordion is like an expanding DOM document section except that it preserves screen real estate by simultaneously collapsing other document sections to make room. The slider is a control that can be used for selecting a value within an allowable range. Sortables are for applying advanced sorting options to lists, while dynamic sortables do the same for lists where the items are added dynamically.
The first example below creates a
new Sortable instance over the
list with ID 'list-1' with some extra options for the revert effect, which is
used to slide the element into its final location after sorting. The second
one creates a
new Sortable instance allowing the sorting of the lists with IDs
'list-1' and 'list-2,' with extra options. Since
constrain was set to
the items will not be able to be dragged from one list to the other. The third
example creates a
new Sortable instance which does allow sorting between the
'list-1,' 'list-2' and 'list-3' lists:
At this early stage of Framework comparisons, I'm still partial
to Prototype. I found that the Ajax calls in MooTools a little cumbersome with
post() function chaining. While a well rounded
Framework, the combination of Prototype with script.aculo.us is hard to beat!
JQuery, MochiKit, and the Yahoo! UI Library (YUI).
Original: October 2, 2008