http://www.mootorial.com/wiki/ Sat, 25 Oct 2008 14:52:52 -0600 FeedCreator 1.7.2-ppt DokuWiki http://www.mootorial.com/wiki/lib/images/favicon.ico http://www.mootorial.com/wiki/ http://www.mootorial.com/wiki/mootorial/08-plugins/02-utilityplugins/03-assets?rev=1222970513&do=diff1222970513 Assets.js provides on-the-fly loading of images, css, and javascript files. Here is the documentation for Assets.js. Assets.javascript Returns a new script tag with the source and (optional) properties you specify. *Note* that it inserts the tag into the DOM (in the head) for you. Aaron Newton mootorial:08-plugins:02-utilityplugins Thu, 02 Oct 2008 12:01:53 -0600 http://www.mootorial.com/wiki/mootorial/10-whentowriteclasses?rev=1221771311&do=diff1221771311 Some of this is based on a blog post I made on clientside. Previously I had divided my code into two types: what I called "implementation" code and code designed to be reused. The implementation code (to me) was the code you had to write for a specific page and, for that reason, wasn't reusable. It references specific dom elements and is tailored to the user experience. Reusable code was the stuff that was generic. Slideshows, date pickers, etc. Aaron Newton mootorial Thu, 18 Sep 2008 14:55:11 -0600 http://www.mootorial.com/wiki/mootorial/08-plugins/01-drag/01-drag.move?rev=1220465865&do=diff1220465865 Here is the documentation for Drag.Move.js. Drag.Move extends Drag to support moving an element around the page. The usage is pretty straight forward: new Drag.Move($('fxTarget')); It takes all the options that Drag takes and adds two new ones: Aaron Newton mootorial:08-plugins:01-drag Wed, 03 Sep 2008 12:17:45 -0600 http://www.mootorial.com/wiki/mootorial/08-plugins/00-fxplugins/00-fx.slide?rev=1220465514&do=diff1220465514 Here is the documentation for Fx.Slide.js. The slide slides an element in horizontally or vertically, the contents will fold inside. Extends Fx, inherits all its properties. Think of this like an old school cash register. When you punch the keys, the value slides into view. Currently the only two directions are sliding in from the top (like a window shade) and in from the left. Aaron Newton mootorial:08-plugins:00-fxplugins Wed, 03 Sep 2008 12:11:54 -0600 http://www.mootorial.com/wiki/mootorial/05-utilities/00-selectors?rev=1220463017&do=diff1220463017 Selectors let you find elements in the DOM using CSS paths. Note that $$ is defined in Element.js, but it only lets you get elements by tag name. $E Selects a single (i.e. the first found) Element based on the selector passed in and an optional filter element. Arguments: Aaron Newton mootorial:05-utilities Wed, 03 Sep 2008 11:30:17 -0600 http://www.mootorial.com/wiki/mootorial/04-element/02-element.style?rev=1220462324&do=diff1220462324 Pretty straight forward: $('getStyleExample').getStyle('width'); //returns something like "528px" $('getStyleExample').getStyle('width').toInt(); //returns 528 (an integer) $('getStyleExample').getStyles('width', 'height'); //returns something like {width:"528px", height:"89px"} Aaron Newton mootorial:04-element Wed, 03 Sep 2008 11:18:44 -0600 http://www.mootorial.com/wiki/mootorial/02-class?rev=1220369523&do=diff1220369523 Here is the documentation page for Class.js. MooTools contains a robust Class creation and inheritance system. Creating a new class is actually pretty easy. Classes vs Functions Classes let you: * reuse and modify code without breaking things that depend on it * create a stateful object that can store information in its own scope * create more robust applications by developing small, reusable and extendable classes. Aaron Newton mootorial Tue, 02 Sep 2008 09:32:03 -0600 http://www.mootorial.com/wiki/mootorial/07-request/01-request.html?rev=1219883245&do=diff1219883245 A common practice with Ajax is to update the content of a DOM element with the results of an Ajax request. In other words, fetch new html and replace the inner HTML of some DOM element with the new HTML. MooTools provides a Request extension that automates this for you. Here is the documentation for Request.HTML.js. It takes all the same options as Request plus three new ones: Aaron Newton mootorial:07-request Wed, 27 Aug 2008 18:27:25 -0600 http://www.mootorial.com/wiki/mootorial/07-request/00-request?rev=1219882959&do=diff1219882959 Here is the documentation for Request.js. The Request class is a relatively simple wrapper for the XMLHttpRequest object (the heart of Ajax functionality). It takes the following options: Then you'll need to call the .send method to actually initiate a request. .send takes two arguments, the url, and the data to send. Aaron Newton mootorial:07-request Wed, 27 Aug 2008 18:22:39 -0600 http://www.mootorial.com/wiki/mootorial/06-fx/01-fx.tween?rev=1219882575&do=diff1219882575 Here is the documentation for Fx.Tween.js. This is where MooTools really shines. Smoothly modifying the properties of an element is super simple. You have a couple of options on how to do it, once again, and they each have trade offs. I'll start with the method of creating an object for the effect: Aaron Newton mootorial:06-fx Wed, 27 Aug 2008 18:16:15 -0600 http://www.mootorial.com/wiki/mootorial/04-element/00-element?rev=1219881669&do=diff1219881669 Here is the documentation for Element.js. The Element object gets a LOT of love in MooTools. Most of the functions in the Element object are pretty self explanatory. Element.getTag does what you'd think it would. Element Constructor This just creates a new element object - same as document.createElement, but it also applies the MooTools extensions to that element. Aaron Newton mootorial:04-element Wed, 27 Aug 2008 18:01:09 -0600