http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/docs/resizable.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/docs/resizable.html b/content/development-bundle/docs/resizable.html new file mode 100644 index 0000000..bfffe08 --- /dev/null +++ b/content/development-bundle/docs/resizable.html @@ -0,0 +1,1797 @@ + + + + + jQuery UI resizable documentation + + + + + +

+Resizable Widgetversion added: 1.0 +

+
+

Description: Change the size of an element using the mouse.

+

QuickNavExamples +

+ +
+

Events

+
create
+
resize
+
start
+
stop
+
+

The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height.

+ +

Dependencies

+ +
+

Additional Notes:

+
  • + This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point. +
+

Options

+

alsoResizeType: Selector or jQuery or Element +

+
+Default: false +
+
One or more elements to resize synchronously with the resizable element.
+Code examples:

Initialize the resizable with the alsoResize option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ alsoResize: "#mirror" });
+
+
+ +

Get or set the alsoResize option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
// setter
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" );
+
+
+ +
+
+

animateType: Boolean +

+
+Default: false +
+
Animates to the final size after resizing.
+Code examples:

Initialize the resizable with the animate option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ animate: true });
+
+
+ +

Get or set the animate option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var animate = $( ".selector" ).resizable( "option", "animate" );
// setter
$( ".selector" ).resizable( "option", "animate", true );
+
+
+ +
+
+

animateDurationType: Number or String +

+
+Default: "slow" +
+
How long to animate when using the animate option.
+Multiple types supported:
    +
  • +Number: Duration in milliseconds.
  • +
  • +String: A named duration, such as "slow" or "fast".
  • +
+Code examples:

Initialize the resizable with the animateDuration option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ animateDuration: "fast" });
+
+
+ +

Get or set the animateDuration option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
// setter
$( ".selector" ).resizable( "option", "animateDuration", "fast" );
+
+
+ +
+
+

animateEasingType: String +

+
+Default: "swing" +
+
Which easing to apply when using the animate option.
+Code examples:

Initialize the resizable with the animateEasing option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
+
+
+ +

Get or set the animateEasing option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
// setter
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" );
+
+
+ +
+
+

aspectRatioType: Boolean or Number +

+
+Default: false +
+
Whether the element should be constrained to a specific aspect ratio.
+Multiple types supported:
    +
  • +Boolean: When set to true, the element will maintain its original aspect ratio.
  • +
  • +Number: Force the element to maintain a specific aspect ratio during resizing.
  • +
+Code examples:

Initialize the resizable with the aspectRatio option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ aspectRatio: true });
+
+
+ +

Get or set the aspectRatio option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
// setter
$( ".selector" ).resizable( "option", "aspectRatio", true );
+
+
+ +
+
+

autoHideType: Boolean +

+
+Default: false +
+
Whether the handles should hide when the user is not hovering over the element.
+Code examples:

Initialize the resizable with the autoHide option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ autoHide: true });
+
+
+ +

Get or set the autoHide option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
// setter
$( ".selector" ).resizable( "option", "autoHide", true );
+
+
+ +
+
+

cancelType: Selector +

+
+Default: "input,textarea,button,select,option" +
+
Prevents resizing from starting on specified elements.
+Code examples:

Initialize the resizable with the cancel option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ cancel: ".cancel" });
+
+
+ +

Get or set the cancel option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var cancel = $( ".selector" ).resizable( "option", "cancel" );
// setter
$( ".selector" ).resizable( "option", "cancel", ".cancel" );
+
+
+ +
+
+

containmentType: Selector or Element or String +

+
+Default: false +
+
Constrains resizing to within the bounds of the specified element or region.
+Multiple types supported:
    +
  • +Selector: The resizable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.
  • +
  • +Element: The resizable element will be contained to the bounding box of this element.
  • +
  • +String: Possible values: "parent" and "document".
  • +
+Code examples:

Initialize the resizable with the containment option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ containment: "parent" });
+
+
+ +

Get or set the containment option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var containment = $( ".selector" ).resizable( "option", "containment" );
// setter
$( ".selector" ).resizable( "option", "containment", "parent" );
+
+
+ +
+
+

delayType: Number +

+
+Default: 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.
+Code examples:

Initialize the resizable with the delay option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ delay: 150 });
+
+
+ +

Get or set the delay option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var delay = $( ".selector" ).resizable( "option", "delay" );
// setter
$( ".selector" ).resizable( "option", "delay", 150 );
+
+
+ +
+
+

disabledType: Boolean +

+
+Default: false +
+
Disables the resizable if set to true.
+Code examples:

Initialize the resizable with the disabled option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ disabled: true });
+
+
+ +

Get or set the disabled option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var disabled = $( ".selector" ).resizable( "option", "disabled" );
// setter
$( ".selector" ).resizable( "option", "disabled", true );
+
+
+ +
+
+

distanceType: Number +

+
+Default: 1 +
+
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.
+Code examples:

Initialize the resizable with the distance option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ distance: 30 });
+
+
+ +

Get or set the distance option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var distance = $( ".selector" ).resizable( "option", "distance" );
// setter
$( ".selector" ).resizable( "option", "distance", 30 );
+
+
+ +
+
+

ghostType: Boolean +

+
+Default: false +
+
If set to true, a semi-transparent helper element is shown for resizing.
+Code examples:

Initialize the resizable with the ghost option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ ghost: true });
+
+
+ +

Get or set the ghost option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var ghost = $( ".selector" ).resizable( "option", "ghost" );
// setter
$( ".selector" ).resizable( "option", "ghost", true );
+
+
+ +
+
+

gridType: Array +

+
+Default: false +
+
Snaps the resizing element to a grid, every x and y pixels. Array values: [ x, y ].
+Code examples:

Initialize the resizable with the grid option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ grid: [ 20, 10 ] });
+
+
+ +

Get or set the grid option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var grid = $( ".selector" ).resizable( "option", "grid" );
// setter
$( ".selector" ).resizable( "option", "grid", [ 20, 10 ] );
+
+
+ +
+
+

handlesType: String or Object +

+
+Default: "e, s, se" +
+
Which handles can be used for resizing.
+Multiple types supported:
    +
  • +String: A comma delimited list of any of the following: n, e, s, w, ne, se, sw, nw, all. The necessary handles will be auto-generated by the plugin.
  • +
  • +Object: +

    The following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.

    +

    Note: When generating your own handles, each handle must have the ui-resizable-handle class, as well as the appropriate ui-resizable-{direction} class, .e.g., ui-resizable-s.

    +
  • +
+Code examples:

Initialize the resizable with the handles option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ handles: "n, e, s, w" });
+
+
+ +

Get or set the handles option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var handles = $( ".selector" ).resizable( "option", "handles" );
// setter
$( ".selector" ).resizable( "option", "handles", "n, e, s, w" );
+
+
+ +
+
+

helperType: String +

+
+Default: false +
+
A class name that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized.
+Code examples:

Initialize the resizable with the helper option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ helper: "resizable-helper" });
+
+
+ +

Get or set the helper option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var helper = $( ".selector" ).resizable( "option", "helper" );
// setter
$( ".selector" ).resizable( "option", "helper", "resizable-helper" );
+
+
+ +
+
+

maxHeightType: Number +

+
+Default: null +
+
The maximum height the resizable should be allowed to resize to.
+Code examples:

Initialize the resizable with the maxHeight option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ maxHeight: 300 });
+
+
+ +

Get or set the maxHeight option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
// setter
$( ".selector" ).resizable( "option", "maxHeight", 300 );
+
+
+ +
+
+

maxWidthType: Number +

+
+Default: null +
+
The maximum width the resizable should be allowed to resize to.
+Code examples:

Initialize the resizable with the maxWidth option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ maxWidth: 300 });
+
+
+ +

Get or set the maxWidth option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
// setter
$( ".selector" ).resizable( "option", "maxWidth", 300 );
+
+
+ +
+
+

minHeightType: Number +

+
+Default: 10 +
+
The minimum height the resizable should be allowed to resize to.
+Code examples:

Initialize the resizable with the minHeight option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ minHeight: 150 });
+
+
+ +

Get or set the minHeight option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
// setter
$( ".selector" ).resizable( "option", "minHeight", 150 );
+
+
+ +
+
+

minWidthType: Number +

+
+Default: 10 +
+
The minimum width the resizable should be allowed to resize to.
+Code examples:

Initialize the resizable with the minWidth option specified:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable({ minWidth: 150 });
+
+
+ +

Get or set the minWidth option, after initialization:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
+
// getter
var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
// setter
$( ".selector" ).resizable( "option", "minWidth", 150 );
+
+
+ +

Methods

+

destroy()Returns: jQuery (plugin only) +

+
+ Removes the resizable functionality completely. This will return the element back to its pre-init state. +
+
  • This method does not accept any arguments.
+
+Code examples:

Invoke the destroy method:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable( "destroy" );
+
+
+ +
+
+
+

disable()Returns: jQuery (plugin only) +

+
+ Disables the resizable. +
+
  • This method does not accept any arguments.
+
+Code examples:

Invoke the disable method:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable( "disable" );
+
+
+ +
+
+
+

enable()Returns: jQuery (plugin only) +

+
+ Enables the resizable. +
+
  • This method does not accept any arguments.
+
+Code examples:

Invoke the enable method:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable( "enable" );
+
+
+ +
+
+
+
+

option( optionName )Returns: Object +

+
Gets the value currently associated with the specified optionName.
+
  • +
    optionName
    +
    Type: String +
    +
    The name of the option to get.
    +
+
+Code examples:

Invoke the method:

+
+ + + + + + + +
+ +
1
+ +
+
var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
+
+
+ +
+
+
+

option()Returns: PlainObject +

+
Gets an object containing key/value pairs representing the current resizable options hash.
+
  • This signature does not accept any arguments.
+
+Code examples:

Invoke the method:

+
+ + + + + + + +
+ +
1
+ +
+
var options = $( ".selector" ).resizable( "option" );
+
+
+ +
+
+
+

option( optionName, value )Returns: jQuery (plugin only) +

+
Sets the value of the resizable option associated with the specified optionName.
+
    +
  • +
    optionName
    +
    Type: String +
    +
    The name of the option to set.
    +
  • +
  • +
    value
    +
    Type: Object +
    +
    A value to set for the option.
    +
  • +
+
+Code examples:

Invoke the method:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable( "option", "disabled", true );
+
+
+ +
+
+
+

option( options )Returns: jQuery (plugin only) +

+
Sets one or more options for the resizable.
+
  • +
    options
    +
    Type: Object +
    +
    A map of option-value pairs to set.
    +
+
+Code examples:

Invoke the method:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).resizable( "option", { disabled: true } );
+
+
+ +
+
+
+
+

widget()Returns: jQuery +

+
+ Returns a jQuery object containing the resizable element. +
+
  • This method does not accept any arguments.
+
+Code examples:

Invoke the widget method:

+
+ + + + + + + +
+ +
1
+ +
+
var widget = $( ".selector" ).resizable( "widget" );
+
+
+ +
+

Events

+

create( event, ui )Type: resizecreate +

+
+ Triggered when the resizable is created. +
+
    +
  • +
    event
    +
    Type: Event +
    +
    +
  • +
  • +
    ui
    +
    Type: Object +
    +
    +
  • +
+

Note: The ui object is empty but included for consistency with other events.

+
+Code examples:

Initialize the resizable with the create callback specified:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
+
$( ".selector" ).resizable({
create: function( event, ui ) {}
});
+
+
+ +

Bind an event listener to the resizecreate event:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).on( "resizecreate", function( event, ui ) {} );
+
+
+ +
+
+
+

resize( event, ui )Type: resize +

+
This event is triggered during the resize, on the drag of the resize handler.
+
    +
  • +
    event
    +
    Type: Event +
    +
    +
  • +
  • +
    ui
    +
    Type: Object +
    +
    +
      +
    • +
      element
      +
      Type: jQuery +
      +
      The jQuery object representing the element to be resized
      +
    • +
    • +
      helper
      +
      Type: jQuery +
      +
      The jQuery object representing the helper that's being resized
      +
    • +
    • +
      originalElement
      +
      Type: jQuery +
      +
      The jQuery object representing the original element before it is wrapped
      +
    • +
    • +
      originalPosition
      +
      Type: Object +
      +
      The position represented as { left, top } before the resizable is resized
      +
    • +
    • +
      originalSize
      +
      Type: Object +
      +
      The size represented as { width, height } before the resizable is resized
      +
    • +
    • +
      position
      +
      Type: Object +
      +
      The current position represented as { left, top } +
      +
    • +
    • +
      size
      +
      Type: Object +
      +
      The current size represented as { width, height } +
      +
    • +
    +
  • +
+
+Code examples:

Initialize the resizable with the resize callback specified:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
+
$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
+
+
+ +

Bind an event listener to the resize event:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).on( "resize", function( event, ui ) {} );
+
+
+ +
+
+
+

start( event, ui )Type: resizestart +

+
This event is triggered at the start of a resize operation.
+
    +
  • +
    event
    +
    Type: Event +
    +
    +
  • +
  • +
    ui
    +
    Type: Object +
    +
    +
      +
    • +
      element
      +
      Type: jQuery +
      +
      The jQuery object representing the element to be resized
      +
    • +
    • +
      helper
      +
      Type: jQuery +
      +
      The jQuery object representing the helper that's being resized
      +
    • +
    • +
      originalElement
      +
      Type: jQuery +
      +
      The jQuery object representing the original element before it is wrapped
      +
    • +
    • +
      originalPosition
      +
      Type: Object +
      +
      The position represented as { left, top } before the resizable is resized
      +
    • +
    • +
      originalSize
      +
      Type: Object +
      +
      The size represented as { width, height } before the resizable is resized
      +
    • +
    • +
      position
      +
      Type: Object +
      +
      The current position represented as { left, top } +
      +
    • +
    • +
      size
      +
      Type: Object +
      +
      The current size represented as { width, height } +
      +
    • +
    +
  • +
+
+Code examples:

Initialize the resizable with the start callback specified:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
+
$( ".selector" ).resizable({
start: function( event, ui ) {}
});
+
+
+ +

Bind an event listener to the resizestart event:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).on( "resizestart", function( event, ui ) {} );
+
+
+ +
+
+
+

stop( event, ui )Type: resizestop +

+
This event is triggered at the end of a resize operation.
+
    +
  • +
    event
    +
    Type: Event +
    +
    +
  • +
  • +
    ui
    +
    Type: Object +
    +
    +
      +
    • +
      element
      +
      Type: jQuery +
      +
      The jQuery object representing the element to be resized
      +
    • +
    • +
      helper
      +
      Type: jQuery +
      +
      The jQuery object representing the helper that's being resized
      +
    • +
    • +
      originalElement
      +
      Type: jQuery +
      +
      The jQuery object representing the original element before it is wrapped
      +
    • +
    • +
      originalPosition
      +
      Type: Object +
      +
      The position represented as { left, top } before the resizable is resized
      +
    • +
    • +
      originalSize
      +
      Type: Object +
      +
      The size represented as { width, height } before the resizable is resized
      +
    • +
    • +
      position
      +
      Type: Object +
      +
      The current position represented as { left, top } +
      +
    • +
    • +
      size
      +
      Type: Object +
      +
      The current size represented as { width, height } +
      +
    • +
    +
  • +
+
+Code examples:

Initialize the resizable with the stop callback specified:

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
+
$( ".selector" ).resizable({
stop: function( event, ui ) {}
});
+
+
+ +

Bind an event listener to the resizestop event:

+
+ + + + + + + +
+ +
1
+ +
+
$( ".selector" ).on( "resizestop", function( event, ui ) {} );
+
+
+ +
+

Example:

+

A simple jQuery UI Resizable.

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+ +
7
+ +
8
+ +
9
+ +
10
+ +
11
+ +
12
+ +
13
+ +
14
+ +
15
+ +
16
+ +
17
+ +
18
+ +
19
+ +
20
+ +
21
+ +
22
+ +
23
+ +
24
+ +
25
+ +
+
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>resizable demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
#resizable {
width: 100px;
height: 100px;
background: #ccc;
} </style>
<script src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div id="resizable"></div>
<script>
$( "#resizable" ).resizable();
</script>
</body>
</html>
+
+
+ +

Demo:

+
+
+
+ + + http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/docs/scale-effect.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/docs/scale-effect.html b/content/development-bundle/docs/scale-effect.html new file mode 100644 index 0000000..821dfa6 --- /dev/null +++ b/content/development-bundle/docs/scale-effect.html @@ -0,0 +1,226 @@ + + + + + jQuery UI scale-effect documentation + + + + + +

Scale Effect

+
+

Description: + Shrink or grow an element by a percentage factor. +

+ +

Examples:

+

Example: Toggle a div using the scale effect. +

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+ +
7
+ +
8
+ +
9
+ +
10
+ +
11
+ +
12
+ +
13
+ +
14
+ +
15
+ +
16
+ +
17
+ +
18
+ +
19
+ +
20
+ +
21
+ +
22
+ +
23
+ +
24
+ +
25
+ +
26
+ +
27
+ +
28
+ +
29
+ +
+
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scale demo</title>
<link r el="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>< /span>
$( document ).click(function() {
$( "#toggle" ).toggle( "scale" );
});
</script>
</body>
</html>
+
+
+ +

Demo:

+
+
+
+

Example: Toggle a div using the scale effect in just one direction. +

+
+ + + + + + + +
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+ +
7
+ +
8
+ +
9
+ +
10
+ +
11
+ +
12
+ +
13
+ +
14
+ +
15
+ +
16
+ +
17
+ +
18
+ +
19
+ +
20
+ +
21
+ +
22
+ +
23
+ +
24
+ +
25
+ +
26
+ +
27
+ +
28
+ +
29
+ +
+
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scale demo</title>
<link r el="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>< /span>
$( document ).click(function() {
$( "#toggle" ).toggle({ effect: "scale", direction: "horizontal" });
});
</script>
</body>
</html>
+
+
+ +

Demo:

+
+
+
+ + + --------------------------------------------------------------------- To unsubscribe, e-mail: server-dev-unsubscribe@james.apache.org For additional commands, e-mail: server-dev-help@james.apache.org