Meteora is built on top of MooTools and the package comes with a full version of the 1.1 version of the framework. If you're already a MooTools user you may read Quick start for mootools users, if you have not used MooTools yet just keep reading.

After you have uncompressed 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.

We recommend you to use those files that are within src directory to develop your application, at least until it is ready for production then you should use compression along with the compact-source directory.

Loading the core

To include Meteora into your project you must add just one line, the meteora.js script:

The line above loads the Meteora's lightweight core, but you haven't loaded a control yet. To load a control you should use:

Meteora.uses('Control.Controlname');

If you want to load any Mootools library, you should use:

// Meteora.uses('Directory.Name');
Meteora.uses('Plugin.Accordion');

And all script's dependencies will be automatically loaded.

When you want to use a control, you can use a line that should look like this:

If you want to pass a DOM node instead of an ID you should use:

new ControlName(
  domNode,
  {
    option1: 'value1',
    option2: 'value2'
  }
);

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 ControlName(
      domNode,
      {
        option1: 'value1',
        option2: 'value2'
      }
    );
  }
);

HTML elements made easy

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

// 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'

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 and then our Quick start for Mootools users.