• download
• documentation
• forums
• demo
• contact
• blog

meteora

javascript widgets

Getting started

Meteora is built on top of MooTools. Since release 0.7 Meteora is distributed along with a full 1.2 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 files 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.

Using Meteora with JQuery

You can mix Meteora with jQuery too.

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('Meteora.ControlName');

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

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:

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 MeteoraControl(
      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.