Meteora Javascript Widgets

If you're a MooTools user we'll explain very briefly some of the improvements we add to do more writing less code. And for the impacient, yes, all your Mootools scripts will work with Meteora too.

After uncompressing Meteora, you'll notice that it's around 1.1M in size, this is mainly because of all the images it contains, also because it's distributed with a full version of the MooTools framework. But do not worry about loading times, with Meteora's automatic dependency resolution your browser will download only the javascript the page needs and nothing more. And with built-in compression and cacheing loading times are simply not a problem.

Loading the core

To load Meteora add the linew below to your document's head.

You will not need to add any other javascript manually, instead of that, you would use the Meteora.uses method.

Note that all Meteora scripts are distributed in directories, so that if you want to load say 'Plugins/Accordion.js', you would do something like this:

// Meteora.uses('Directory.Filename');
Meteora.uses('Plugins.Accordion');

And Meteora will automatically pull all the script's dependencies. No more worries about manually adding dependencies, we already took care of it for you.

Note that you should start creating instances only after the element you're refering is fully loaded, for being sure, wrap the code you want to execute using Meteora.onStart such as in the example below:

Meteora.onStart(
function() {
new Meteora.ame(
domNode,
{
option1: 'value1',
option2: 'value2'
}
);
}
);

HTML elements made easy

With Meteora you can create DOM nodes easier than before, you can even create a new node with contents fetched from a local URL (AJAX).

// General Widget object's syntax
Widget.elementName({'attr1': 'prop1', 'attr2': 'prop2'}, content);

// A DIV node with some text inside.
var domNode = Widget.div({'class': 'my-div'}, 'Div\'s content');

// A SPAN node with no attributes that contains another node
var domNode = Widget.span(null, randomDomNode);

// A DIV node that contains data fetched through an AJAX request
var domNode = Widget.div(null, {'url': '/ajax/content'});

// A DIV node that contains an HTML object
var domNode = Widget.div(null, Widget.fromHTML('<b>bold text</b>'));

// An HTML object
var domNode = Widget.fromHTML('We love to <b>code</b>');

You can use as elementName any of the HTML elements below:

'a', 'abbr', 'acronym', 'address', 'area', 'b', 'base', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'caption', 'cite', 'code', 'col', 'colgroup', 'dd', 'del', 'div', 'dfn', 'dl', 'dt', 'em', 'fieldset', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'head', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'link', 'map', 'meta', 'noframes', 'noscript', 'object', 'ol', 'optgroup', 'option', 'p', 'param', 'pre', 'q', 'samp', 'script', 'select', 'small', 'span', 'strong', 'style', 'sub', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'title', 'tr', 'tt', 'ul', 'var'

AJAX requests

This is a very easy way to update objects using AJAX

domNode.setContent({url: '/ajax/content'});

To know how to use each control and its parameters read Meteora's documentation. If you're planning to hack in more deeply, you may read Mootool's documentation.

meteora

javascript widgets

Documentation

Loading the core

HTML elements made easy

AJAX requests