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

meteora

javascript widgets

Documentation

  • Autocomplete
  • Bubble
  • Calendar
  • Carousel
  • Datagrid
  • Dialog
  • Editor
  • Effect
  • Filebrowser
  • Form
  • Jsonrpc
  • Menu
  • Notebook
  • Picbox
  • Popup
  • Searchlist
  • Selection
  • Spinbutton
  • Tablesort
  • Toolbox
  • Treeview

In order to use jQuery with Meteora you need to include jquery.js after meteora.js

<script type="text/javascript" src="meteora.js"></script>
<script type="text/javascript" src="jquery.js"></script>

Check out the following example featuring effects using Meteora and jQuery:

#example-div

Source code

Meteora.uses('Meteora.Effect');
Meteora.onStart(
  function() {
    // We are going to use $().click() from
    // jQuery, so we switch into jQuery mode:
    Meteora.jQuery(true);
    $('#meteora-effect').click(
      function() {
        // This is an online function. Online
        // functions have jQuery more turned off
        // by default.
        // Using Meteora's Fx.Morph (Mootools
        // Fx.Morph)
        var fx = new Fx.Morph($('example-div'));
        fx.start({
          'opacity':  0.5,
          'width':    500
        });
        $('meteora-effect').hide();
        $('jquery-effect').show();
      }
    );
    // jQuery mode off
    Meteora.jQuery(false);
    // Using Meteora's addEvent
    $('jquery-effect').addEvent(
      'click',
      function() {
        // Another online function, turning
        // jQuery mode on.
        Meteora.jQuery(true);
        $('#example-div').animate(
          {
            'width':    200,
            'opacity':  1
          }
        );
       
        $('#meteora-effect').show();
        $('#jquery-effect').hide();
        // jQuery mode off
        Meteora.jQuery(false);
      }
    );
  }
);

Copyright © 2007-2009 Astrata Software.