• 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

What does this control do?

Shows an unobtrusive bubble that can be used to show an idea, a link or an error message. You can attach bubbles to elements, such as form inputs.

For an usage example check out the Meteora.Bubble demo.

How to use it

In order to use this control, paste this line of javascript right at the beginning of your script tag:

Meteora.uses('Meteora.Bubble');

You may then be able to invoke the Bubble this way:

new Bubble(
  // ELEMENT
  // This is the element you want to associate with the bubble,
  // it can be an element's ID or even a HTML object reference.
  'attach-to',
 
  // CONTENT
  // This is the element you want to put inside the bubble,
  // it can be an element's ID or even a HTML object reference.
  'content-id',
  // OPTIONS
  {
    'showEvent': 'mouseover',
    'hideEvent': 'mouseout'
  }
);

Options

showEvent

Event that triggers visibility to visible.

hideEvent

Event that triggers visibility to hidden.

showDelay

Miliseconds to wait before showing.

hideDelay

Miliseconds to wait before hiding.

destroyEvent

Event that trigger bubble's object trashing.

width

Width of the bubble (px).

height

Height of the bubble (px).

Methods

hide()

Hides the bubble.

show()

Shows the bubble.

red()

Draws a red border around the bubble, for emphasys.

blue()

Draws a blue border around the bubble, for emphasys.

yellow()

Draws a yello border around the bubble, for emphasys.

resizeTo(width, height)

Resizes the bubble to the given width and height.

Copyright © 2007-2009 Astrata Software.