Xpages Resizable Panel Custom Control my 3rd custom control that I created for the Xpages contest on OpenNTF.

The control uses jQuery to create resizable panels for Xpages. It can work with xp:panels, xp:div and normal div's. It's even usable on Dojo dialogs, check the included demo page!  The custom control connects itself to a existing panel and makes it resizable. That’s it. You can define multiple properties on the control so you can for example effectively change the exact proportions the panel may resize. See chapter 4 of the documentation for more info.

 

 

 

Property

Type

Example

Description

styleClassToResize

String

"jqueryResize"

Add an extra styleClass to your panel so jQuery can make it resizable. If you have multiple panel that must be resizable you may give them all the same styleClass.

disabled

boolean

false

Disables (true) or enables (false) the resizable. Can be set when initialising (first creating) the resizable

alsoResize

String

""

A styleClass that also resizes.

Resize these elements synchronous when resizing.

animate

boolean

false

Animates to the final size after resizing. See Demo 2 for the resize animation.

animateDuration

int

500

Duration time for animating, in milliseconds.

aspectRatio

boolean

false

If set to true, resizing is constrained by the original aspect ratio.

autoHide

boolean

true

If set to true, automatically hides the handles except when the mouse hovers over the element.

delay

Int

0

Tolerance, in milliseconds, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond duration. This can help prevent unintended resizing when clicking on an element.

distance

int

0

Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. This can help prevent unintended resizing when clicking on an element.

ghost

boolean

false

If set to true, a semi-transparent helper element is shown for resizing.

helper

String

""

This is the css class that will be added to a proxy element to outline the resize during the drag of the resize handle.

maxHeight

Int

800

This is the maximum height the resizable should be allowed to resize to.

maxWidth

Int

400

This is the maximum width the resizable should be allowed to resize to.

minHeight

Int

100

This is the minimum height the resizable should be allowed to resize to.

minWidth

Int

150

This is the minimum width the resizable should be allowed to resize to.