The MooTorial http://www.mootorial.com/wiki/ Wed, 29 Apr 2009 16:10:39 -0600 FeedCreator 1.7.2-ppt DokuWiki http://www.mootorial.com/wiki/lib/images/favicon.ico The MooTorial http://www.mootorial.com/wiki/ Sortables - old revision restored http://www.mootorial.com/wiki/mootorial/08-plugins/03-interface/00-sortables?rev=1240343451&do=diff1240343451 Here is the documentation for Sortables.js. Sortables is another one of those deceptively simple MooTools widgets. It's pretty easy to make something sortable, but to be of any use you have to do something with the new state (like ping a back end server via ajax). It's not the most complex thing to do, but to do it will requires a bit of careful thought and good design principals. I'm not going to spend a lot of time showing you how to do sortables well, but rather just demonstrate the code her… Aaron Newton mootorial:08-plugins:03-interface Tue, 21 Apr 2009 13:50:51 -0600 Request.HTML http://www.mootorial.com/wiki/mootorial/07-request/01-request.html?rev=1237417770&do=diff1237417770 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, 18 Mar 2009 17:09:30 -0600 Getting Started: What is MooTools? http://www.mootorial.com/wiki/mootorial/00-whatisit?rev=1236817683&do=diff1236817683 MooTools is a lightweight abstraction layer between the browser and the code you write (this is really the definition of nearly every js framework out there - Prototype, Dojo, jQuery, YUI, etc). It offers more functionality and richer tools for writing javascript, taking what has historically been painful and fraught with buggy environments (the browsers) and presenting you with a much more reliable environment. By adding it to your environment (i.e. including the script in your page) you are ab… James Hansen mootorial Wed, 11 Mar 2009 18:28:03 -0600 Json http://www.mootorial.com/wiki/mootorial/05-utilities/02-json?rev=1236277140&do=diff1236277140 If you aren't familiar with Json, then you best read up. Here's the documentation for Json.js. Json.encode the .encode() method of the Json object will convert an object to a JSON string that can be evaluated back into the object. Json.encode({apple: 'red', lemon: 'yellow'}); //returns: '{"apple":"red","lemon":"yellow"}' Aaron Newton mootorial:05-utilities Thu, 05 Mar 2009 11:19:00 -0600 Element Core http://www.mootorial.com/wiki/mootorial/04-element/00-element?rev=1235758401&do=diff1235758401 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 Fri, 27 Feb 2009 11:13:21 -0600 Events http://www.mootorial.com/wiki/mootorial/03-native/05-event?rev=1230241351&do=diff1230241351 The Events class is a collection of functions for handling events across browsers. Here is the documentation for Event.js. Whenever you add an event to a DOM element (not to be confused with the //Events// class in Class.Extras) the argument passed to that function will be the event native. This has been extended like other natives to have additional properties by MooTools. Aaron Newton mootorial:03-native Thu, 25 Dec 2008 14:42:31 -0600 Functions - call or apply doesn't return a function, they execute it immediately, no need to ... http://www.mootorial.com/wiki/mootorial/03-native/01-function?rev=1227688190&do=diff1227688190 Here is the documentation for Function.js. Function.create .create automatically wraps the function into another one with the defined set of functionalities, therefore shortens your code. It's used throughout mootools itself, as the foundation for .pass, .bind, .delay, .periodical. brian mootorial:03-native Wed, 26 Nov 2008 01:29:50 -0600 Fx.Tween http://www.mootorial.com/wiki/mootorial/06-fx/01-fx.tween?rev=1226596211&do=diff1226596211 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 Thu, 13 Nov 2008 10:10:11 -0600 Selectors http://www.mootorial.com/wiki/mootorial/05-utilities/00-selectors?rev=1225731376&do=diff1225731376 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. $$ $$ is defined in Element.js, but when you include Element.Selectors.js, it becomes much more useful; you'll use it a LOT. Aaron Newton mootorial:05-utilities Mon, 03 Nov 2008 09:56:16 -0600