Home arrow JavaScript arrow Page 4 - Introducing MooTools and MooFX
JAVASCRIPT

Introducing MooTools and MooFX


MooTools and MooFX are JavaScript libraries designed to save you time and effort. Both are completely open source. Keep reading to find out what these versatile libraries can do for you.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
June 05, 2007
TABLE OF CONTENTS:
  1. · Introducing MooTools and MooFX
  2. · MooTools Modules
  3. · More MooTools Modules
  4. · MooFX2 Modules

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 10 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials