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.
|