MooTools Tip: Class.toElement
Many of you may not know of a feature that's baked into MooTools' Class internals: Class.toElement. Class.toElement allows you to pass the $ (or document.id) method an instance of your class and the instance will be treated as an element.
The MooTools Class.toElement Usage
/* baking into the class */
var myClass = new Class({
initialize: function(container,options) {
this.container = $(container);
},
// .. lots more methods //
toElement: function() {
return this.container;
}
});
/* usage */
var mc = new MyClass('wrapper');
$(mc).fade('out'); //fades the container out
This isn't a groundbreaking piece of code but it's just another example of the flexibility that MooTools affords its developers. Happy coding!
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![Create Namespaced Classes with MooTools]()
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event...
![pointer Media Query]()
As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become. In order to write good CSS, we need some indicator about device capabilities. We've used CSS media queries thus far, with checks for max-width and pixel ratios.
![Creating Spacers with Flexbox]()
I was one of the biggest fans of flexbox before it hit but, due to being shuffled around at Mozilla, I never had the chance to use it in any practice project; thus, flexbox still seems like a bit of a mystery to me. This greatly...
Haven’t noticed this wonderful tiny yet so useful method before. Thanks for bringing this up :)
i was actually just reading about this today.
it seems often times the method is used to create the element that gets returned as well, in which case its important to make sure the method doesn’t re-define the element it returns.
toElement: function() { if (this.element) return this element; return this.element = new Element(...); }Hey, that’s a useful thing! Didn’t know this before, THX for sharing!