What does this control do?
Shows a Dialog that can be dragged, minimized or maximized.
This control is perfect for showing dynamic
form elements, previews, etc.
For an usage example check out the
Meteora.Popup 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.Popup');
You may then by able to invoke the Filebrowser this way:
// Showing an AJAX resource
var popup = new Popup(
'Test popup',
{
'url': '/path/to/ajax/content'
}
);
// Showing an existing DOM object
var popup = new Popup(
'Test popup',
$('dom_object_id')
);
// Showing a simple text string
var popup = new Popup(
'Test popup',
'Hello world!'
);
// Opening an external site within an iframe
var popup = new Popup(
'Test popup',
'http://astrata.com.mx'
);
// Using standard HTML
var popup = new Popup(
'Test popup',
Widget.fromHTML('<b>Hello world!</b>')
);
Popup creation syntax
This is the basic syntax for a popup to be shown.
new Popup(
// TITLE OF THE POPUP
'Popup\'s title',
// ELEMENT
// This is a rich element, refer to the examples above
// to see all the different things that you can put
// inside.
element,
{
// OPTIONS
}
);
Options
Pixels from the top of the browser's window.
Pixels from the left of the browser's window.
Horizontal size of the widget.
Vertical size of the widget.
Set
true to allow the user to resize the widget.
Set
true to allow the user to drag the widget across the screen.
A function that will be triggered when the user closes the widget.
A function that will be triggered when the user changes the size of the widget.
A function that will be triggered when the user minimized the widget.
A function that will be triggered when the user maximizes the widget.
A function that will be triggered when the user restores the widget after minimizing or maximizing it.
A function that will be triggered when the user focuses the widget.
A function that will be triggered when the widget loses its focus.
Methods
Changes the content of the widget. Refer to the general examples to know
what kind of data you can insert.
Hides the widget leaving a small button at the bottom of the screen for restoring it.
Changes the size of the widget to completely cover the browser's window.
Reverts the original size of the widget after being minimized or maximized.
Places the widget right at the center of the screen.
Changes the size of the widget.
Sets the distance from the top and distance from the left values of the widget.
Destroys the widget (if you want to reuse it later, use
hide() instead of close()).
Makes the widget hidden, it will be still in memory.
Makes a hidden widget visible again.
Makes the widget lose its focus.
Sets the widget on top of all other HTML elements.