This class creates boxes for various purposes; it’s a base class for window, and used in various widget classes
Mikkel Bergmann, http://www.pointful.com
| pax.box | This class creates boxes for various purposes; it’s a base class for window, and used in various widget classes |
| Functions | |
| pax. | Shows a box at given position |
| pax. | Shows a box at given element, appending it into the dom, rather than showing it at a specific position |
| pax. | Sets the position and size of a box, plus size & position of the iFrame for IE. |
| pax. | Shows a box 5 pixels to the left of an element, optionally fading it out after timeout seconds. |
| pax. | This will hide the given box, using the (optional) given function |
| pax. | This will destroy the given box |
pax.box.show = function( id, message, className, x, y, target, displayStyle )
Shows a box at given position
| id | DOM pointer for the window element |
| message | The contents to put into the box (HTML) |
| className | The CSS class name to assign to the box |
| x | Horizontal (left) position for the box |
| y | Vertical (top) position for the box |
| target | DOM element to append the box to; if not specifed, we use the body element |
<input type='text' id='pax.box.show.example'>
[:.
var pos = pax.util.getPosition( pax.$('pax.box.show.example') );
pax.box.show( 'myWindow', '^ Hello world!', 'hintMessage', pos.x, pos.y + pos.height + 5 );
exampleCleanup = function() { pax.box.hide( 'myWindow' ); };
:]This will create a box below the input box. It uses pax.util.getPosition to find the position of the element. Also note that exampleCleanup is just a hook for the example, that hides the window again, when you’re done with it.
pax.box.append = function( id, message, className, target, location )
Shows a box at given element, appending it into the dom, rather than showing it at a specific position
| id | DOM pointer for the window element |
| message | The contents to put into the box (HTML) |
| className | The CSS class name to assign to the box |
| target | which element to append the box to |
| location | one of N, E, S, W |
<input type='text' id='pax.box.append.example'>
[:.
pax.box.append( 'myWindow', 'Hello world!', 'hintMessage', pax.$('pax.box.append.example'), 'E' );
exampleCleanup = function() { pax.box.hide( 'myWindow' ); };
:]This will create a box to the right of the input box. Note that exampleCleanup is just a hook for the example, that hides the box again, when you’re done with it.
pax.box.showOnRight = function( id, message, className, element, timeout, distance )
Shows a box 5 pixels to the left of an element, optionally fading it out after timeout seconds.
| id | DOM pointer to the window element |
| message | The contents to put into the box |
| className | The CSS class name to assign to the box |
| element | The element to place the box near |
| timeout | Optionally specify in seconds how long the box is visible, 0 = don’t hide |
| distance | Optionally specify in pixels how far away, defualt = 5px |
<input type='text' id='pax.box.showOnRight.example'>
[:.
pax.box.showOnRight( 'myBox', '<- Hello world!', 'hintMessage', pax.$('pax.box.showOnRight.example'), 7 );
:]This will create a box to the right of myElement, and remove it after 7 seconds, (default = 5 seconds).
pax.box.hide = function( box, func, callBack, duration )
This will hide the given box, using the (optional) given function
| id | DOM pointer to the window element |
| function | Optionally specify a function to be used to hide a box, such as a fading function, etc... |
<input type="button" onclick="pax.box.hide(pax.$('myBox'), pax.fx.fadeOut );" value="Hide!">
<input type='text' id='pax.box.hide.example1'>
[:.
pax.box.showOnRight( 'myBox', '<- Hello world!', 'hintMessage', pax.$('pax.box.hide.example1') );
:]This will hide a box, using the pax.fx.fadeOut method.
Shows a box at given position
pax.box.show = function( id, message, className, x, y, target, displayStyle )
Shows a box at given element, appending it into the dom, rather than showing it at a specific position
pax.box.append = function( id, message, className, target, location )
Sets the position and size of a box, plus size & position of the iFrame for IE.
pax.box.setPosition = function( box, x, y )
Shows a box 5 pixels to the left of an element, optionally fading it out after timeout seconds.
pax.box.showOnRight = function( id, message, className, element, timeout, distance )
This will hide the given box, using the (optional) given function
pax.box.hide = function( box, func, callBack, duration )
This will destroy the given box
pax.box.destroy = function( box )
Locates position and dimensions of an object
pax.util.getPosition = function( element, excludeParent )
Fades out an element in optional time miliseconds
pax.fx.fadeOut = function( ele, time, callBack )