MooTools Behavior Class
I had a bit of contract programmer work recently (my first contract programming work since Elvis died) which required that I read up on a MooTools class called “Behavior.” Behavior is part of the Clientcide library, which I use heavily on my site. My autocompleter (which won’t be user-facing until I get around to opening up personal message support) is from Clientcide, for instance.
<a id="sillylink" href="/newpage/">Click me to go to a new page</a>
With Behavior, you’d instead do this:
<a data-behavior="LinkHijack" href="/newpage/">Click me to go to a new page</a>
By assigning a data-behavior property to an element, you tell the Behavior class, which is instantiated via the new Behavior().apply(document.body) call at the end of the domready event handler, to call the “setup” function associated with that particular data-behavior property on the element. In this case, a click handler is added to the link.
That may look like a lot of extra code for nothing, but here’s where behavior really becomes powerful:
<a data-behavior="LinkHijack" data-LinkHijack-text="Ooga Booga" data-LinkHijack-useAlert=true href="/newpage/">Click me to go to a new page</a>
In the above example, I’ve made it so that you can pass a text field containing the message that is output on click, a useAlert field which specifies whether to use alert or console.log() for output, and a preventDefault field which specifies whether to stop the link click event from proceeding.
I’m not sure if Behavior is being supported anymore, but it’s something whose basic functionality I think I could make myself should the need arise, so I’ve been switching many aspects of my site to it of late.
I have Behavior automatically pick out the following elements:
This uses the Mootools tips class, but I added a couple of properties for specifying the text without using the title or ref fields, as the tips class wasn’t blocking the default ugly html tip thing from appearing.
This uses the excellent Mootools DatePicker class to make a date picker appear when the user clicks on an input. I’ve added an option to automatically submit the enclosing form when the date has been selected.
This makes anchor links — links with the “#” in the url — animate to their destination on the page using the MooTools Fx.Scroll class. You can pass all the FX.Scroll options.
Send message tags
This adds clickability to the site’s dropdown menus. My menus are mostly open-on-hover, but I do need clickability for more complex menus.
A couple of other points:
- You can assign multiple behaviors to a single element — data-behavior=”ToolTip,DatePicker”
- You can set a delay for when the “setup” function is called for a particular handler. You can set the delay to x milliseconds, or wait until a particular action is taken on the event — a click for instance.
- You can manually call the Behavior instantiation function after the page is loaded. This is great for dynamic content, as Behavior will not reinstantiate old elements, and it can be called over a specific section of the page for efficiency.