diff --git a/demos/resizable/animate.html b/demos/resizable/animate.html index f5b6383ba..93bdad2a6 100644 --- a/demos/resizable/animate.html +++ b/demos/resizable/animate.html @@ -1,7 +1,7 @@ - jQuery UI Resizable - Animate Demo + jQuery UI Resizable - Animate @@ -31,9 +31,7 @@
-

- -

+

Animate the resize action using the animate option (boolean). When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop.

diff --git a/demos/resizable/aspect-ratio.html b/demos/resizable/aspect-ratio.html new file mode 100644 index 000000000..aa97f4191 --- /dev/null +++ b/demos/resizable/aspect-ratio.html @@ -0,0 +1,37 @@ + + + + jQuery UI Resizable - Preserve aspect ratio + + + + + + + + + +
+ +
+

Preserve aspect ratio

+
+ +
+ +
+ +

Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the aspectRatio option to true, and optionally pass in a new ratio (i.e., 4/3)

+ +
+ + diff --git a/demos/resizable/constrain-area.html b/demos/resizable/constrain-area.html new file mode 100644 index 000000000..b27fc598b --- /dev/null +++ b/demos/resizable/constrain-area.html @@ -0,0 +1,42 @@ + + + + jQuery UI Resizable - Constrain resize area + + + + + + + + + +
+ +
+

Containment

+
+

Resizable

+
+
+ +
+ +
+ +

Define the boundaries of the resizable area. Use the containment option to specify a parent DOM element or a jQuery selector, like 'document.'

+ +
+ + diff --git a/demos/resizable/default.html b/demos/resizable/default.html index f00fa39a5..6dad88eef 100644 --- a/demos/resizable/default.html +++ b/demos/resizable/default.html @@ -1,7 +1,7 @@ - jQuery UI Resizable - Default Demo + jQuery UI Resizable - Default functionality @@ -28,9 +28,7 @@
-

- -

+

Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.

diff --git a/demos/resizable/delay-start.html b/demos/resizable/delay-start.html new file mode 100644 index 000000000..49fc45c46 --- /dev/null +++ b/demos/resizable/delay-start.html @@ -0,0 +1,49 @@ + + + + jQuery UI Resizable - Delay start + + + + + + + + + +
+ +

Time delay (ms):

+
+

Time

+
+ +

Distance delay (px):

+
+

Distance

+
+ + + +
+ +
+ +

Delay the start of resizng for a number of milliseconds with the delay option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the distance option.

+ +
+ + diff --git a/demos/resizable/index.html b/demos/resizable/index.html index e6221c80f..561b5bf87 100644 --- a/demos/resizable/index.html +++ b/demos/resizable/index.html @@ -9,17 +9,15 @@

Examples

diff --git a/demos/resizable/max-min.html b/demos/resizable/max-min.html new file mode 100644 index 000000000..9008e8997 --- /dev/null +++ b/demos/resizable/max-min.html @@ -0,0 +1,40 @@ + + + + jQuery UI Resizable - Maximum / minimum size + + + + + + + + + +
+ +
+

Resize larger / smaller

+
+ +
+ +
+ +

Limit the resizable element to a maximum or minimum height or width using the maxHeight, maxWidth, minHeight, and minWidth options.

+ +
+ + diff --git a/demos/resizable/snap-to-grid.html b/demos/resizable/snap-to-grid.html new file mode 100644 index 000000000..4a6a19663 --- /dev/null +++ b/demos/resizable/snap-to-grid.html @@ -0,0 +1,37 @@ + + + + jQuery UI Resizable - Snap to grid + + + + + + + + + +
+ +
+

Grid

+
+ +
+ +
+ +

Snap the resizable element to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.

+ +
+ + diff --git a/demos/resizable/synchronous-resize.html b/demos/resizable/synchronous-resize.html new file mode 100644 index 000000000..14f6a65c9 --- /dev/null +++ b/demos/resizable/synchronous-resize.html @@ -0,0 +1,44 @@ + + + + jQuery UI Resizable - Synchronous resize + + + + + + + + + +
+ +
+

Resize

+
+ +
+

will also resize

+
+ +
+ +
+ +

Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the alsoResize option.

+ +
+ + diff --git a/demos/resizable/visual-feedback.html b/demos/resizable/visual-feedback.html new file mode 100644 index 000000000..504c5de57 --- /dev/null +++ b/demos/resizable/visual-feedback.html @@ -0,0 +1,38 @@ + + + + jQuery UI Resizable - Visual feedback + + + + + + + + + +
+ +
+

Ghost

+
+ +
+ +
+ +

Instead of showing the actual element during resize, set the ghost option to true to show a semi-transparent part of the element.

+ +
+ +