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!
![5 Ways that CSS and JavaScript Interact That You May Not Know About]()
CSS and JavaScript: the lines seemingly get blurred by each browser release. They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely. We have our .js files and our .css, but...
![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...
![iPhone Click Effect Using MooTools or jQuery]()
One thing I love about love about Safari on the iPhone is that Safari provides a darkened background effect when you click a link. It's the most subtle of details but just enforces than an action is taking place. So why not implement that...
![Create Tiny URLs with TinyURL, MooTools, and PHP]()
Since we've already figured out how to create TinyURL URLs remotely using PHP, we may as well create a small AJAX-enabled tiny URL creator. Using MooTools to do so is almost too easy.
The XHTML (Form)
We need an input box where the user will enter...
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!