Introducing MooTools and MooFX - MooFX2 Modules
(Page 4 of 4 )
The MooFX library has its very own mini site, distinct from the main MooTools site, which gives you information and download links for the library, showcased in the excellent accordion effect. The reason for the additional site seems to be because a version of the effects library is available for use with the Prototype JavaScript library, where the methods and syntax for using the different effects has been changed to work with Prototype instead of MooTools. MooFX for MooTools can be downloaded from the main MooTools site, and you have full control over which of the effects you want to obtain. With MooFX for Prototype however, you get the whole package or nothing.
The effects module is a series of components that provide animation in the form of scrolling, or sliding elements and classes that make it easy to target the CSS and style properties of any DOM element or series of elements. The Fx.Base module is the core module of the Effects component and provides the basic animation logic used by the other components; it is a requirement for using any of the other effects.
An Fx.CSS component is used internally by some of the other effects components (such as Fx.Style, Fx.Styles and Fx.Elements) to adjust a CSS property on a single element or collection of elements or any number of CSS properties on any number of elements. It is something that you need not concern yourself with, other than including it if necessary in the <head> of your documents.
The Fx.Element component is used to target any element or selection of elements for transitional effects such as fading opacity and the like. Whereas the Scroller Plugin component allows you to scroll the window under certain conditions, the Fx.Scroll component provides a class for scrolling any DOM element and gives you a set of properties to adjust to achieve the desired result. Similarly, the Fx.Slider component provides the class and properties required to create an element that smoothly slides horizontally or vertically under certain circumstances.
Conclusion
While other some other JavaScript libraries, like the YUI for example, provide custom, pre-built solutions that are easily implemented and controlled, MooTools (and MooFX) act more like programming languages in their own right, giving you a set of objects, classes and properties as an entire framework within which you create your own solutions and implementations, a little like the .NET framework for example. While this makes it harder for beginners and novices to get to grips with (something compounded by the lack of documentation and sparse example code), it does give the more experienced JavaScript programmer a lot more scope and power, and can save huge amounts of time and troubleshooting when writing code for cross-browser web solutions.
It is still an excellent resource for those that want to learn more about JavaScript and although the learning curve is steep, once you get your head around the object creation and class instantiation syntax the plateaus provides many exciting opportunities. For those of you interested in learning more about how to use MootTools and MooFX, I'll be writing a follow-up article soon that provides a step-by-step example of how to create something visually appealing and useful with these libraries.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 5 
