Getting started with MooTools Behavior.js
A simple tutorial that explains the steps to get you started with Behavior.js
MooTools offers an elegant solution to dealing with messy, unusable JavaScript code that is used to build simple, disposable UI effects and elements, that should normally be abstracted from your application code, with the use of a library called Behavior.js. The library contains two main tools: Behaviour which is used for mapping layout elements to classes (plugins) and Delegator which is used to relate the options identified in HTML elements to predefined, reusable filters (subroutines).
This article will go through the steps involved with getting this awesome plugin working with your application.
Last Updated
This page was last updated on December 24rd 2011 and was first published on December 23rd 2011
In a Nutshell
Behavior scans the page looking for any elements that contain the data-behavior attribute and then it will fire the assigned filter for any of the class(es) defined within the attribute value. This is what it looks like:
In this example, Behavior will scan the page (once the Behavior.attach() method is fired) and then look for any elements that match the selector (data-behavior=”Tip”) and then will append the options fetched from data-tip-options and built the api variable from that. It is up to you as to how you wish to instantiate the plugin (or perform a series of operations).
Delegator is pretty similar. It too looks for an attribute selector (data-trigger=”..”) and applies the associated options to the function call. The function call is registered with the Delegator:
The code is here pretty straightforward and it follows the flow of the Behavior example.
How to set this up
First you’ll need to clone the Git repository or download the source. Next extract all the files into a folder accessible within your web application. Include the following files (in the following order):
- ./Source/Element.Data.js
- ./Source/BehaviorAPI.js
- ./Source/Behavior.js
- ./Source/Behavior.Startup.js
- ./Source/Delegator.js
Next, define the filters that you want for your behavior operations with the following code:
Then register the Delegator events for the items that you wish to apply delegation operations on:
Once all the filters and delegation callbacks have been created, now any HTML element that contains the data-behavior or data-trigger attributes that match a behavior filter or delegation registration function will be ready. They won’t fire automatically, so you’ll need to define a run method:
Anything else?
Not so much. This toolkit is really sweet. Once you start using it you’ll see how the majority of your page or element class-specific code will trim itself down. The UI interactivity can be fully abstracted from the application core. I will blog more and more about this later on once I start to use the library within my own projects.