The official home of the Python Programming Language: JqueryUI Resizable

JqueryUI Resizable

jQueryUI provides resizable() method to resize any DOM element. This method simplifies the resizing of element which otherwise takes time and lot of coding in HTML. The resizable () method displays an icon in the bottom right of the item to resize.

Syntax

The resizable() method can be used in two forms:

$(selector, context).resizable (options)Method

$(selector, context).resizable ("action",params) Method

$(selector, context).resizable (options) Method

The resizable (options) method declares that an HTML element can be resized. The optionsparameter is an object that specifies the behavior of the elements involved when resizing.

Syntax

$(selector, context).resizable (options);

You can provide one or more options at a time of using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows:

$(selector, context).resizable({option1: value1, option2: value2..... });

Following table lists the different options that can be used with this method:

Option

Description

alsoResize

This option is of type Selector, jQuery ,or any DOM Element. It represents elements that also resize when resizing the original object. By default its value is false.

animate

This option when set to true is used to enable a visual effect during resizing when the mouse button is released. The default value is false(no effect).

animateDuration

This option is used to set the duration (in milliseconds) of the resizing effect. This option is used only whenanimate option is true. By default its value is "slow".

animateEasing

This option is used to specify whicheasing to apply when using theanimate option. By default its value is "swing".

aspectRatio

This option is used to indicate whether to keep the aspect (height and width) ratio for the item. By default its value is false.

autoHide

This option is used to hide the magnification icon or handles, except when the mouse is over the item. By default its value is false.

cancel

This option is used to prevent resizing on specified elements. By default its value isinput,textarea,button,select,option.

containment

This option is used restrict the resizing of elements within a specified element or region. By default its value is false.

delay

This option is used to set tolerance or delay in milliseconds. Resizing or displacement will begin thereafter. By default its value is 0.

disabled

This option disables the resizing mechanism when set to true. The mouse no longer resizes elements, until the mechanism is enabled, using the resizable ("enable"). By default its value is false.

distance

With this option, the resizing starts only when the mouse moves adistance(pixels). By default its value is1 pixel. This can help prevent unintended resizing when clicking on an element.

ghost

This option when set to true, a semi-transparent helper element is shown for resizing. This ghost item will be deleted when the mouse is released. By default its value is false.

grid

This option is of type Array [x, y], indicating the number of pixels that the element expands horizontally and vertically during movement of the mouse. By default its value is false.

handles

This option is a character string indicating which sides or angles of the element can be resized. By default its values are e, s, se.

helper

This option is used to add a CSS class to style the element to be resized. When the element is resized a new <div> element is created, which is the one that is scaled (ui-resizable-helper class). Once the resize is complete, the original element is sized and the <div> element disappears. By default its value is false.

maxHeight

This option is used to set the maximum height the resizable should be allowed to resize to. By default its value is null.

maxWidth

This option is used to set the maximum width the resizable should be allowed to resize to. By default its value is null.

minHeight

This option is used to set the minimum height the resizable should be allowed to resize to. By default its value is 10.

minWidth

This option is used to set the minimum width the resizable should be allowed to resize to. By default its value is 10.

Following section will show you few working examples of resize functionality.

Default Functionality

The following example demonstrates a simple example of resizable functionality, passing no parameters to the resizable() method .

<!doctype html>

<head>

<title>jQuery UI Resizable functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

.ui-widget-content {

background: #cedc98;

border: 1px solid #DDDDDD;

color: #333333;

}

#resizable { width: 150px; height: 150px; padding: 0.5em;

text-align: center; margin: 0; }

</style>

$(function() {

$( "#resizable" ).resizable();

});

</script>

</head>

<body>

<h3 class="ui-widget-header">Pull my edges to resize me!!</h3>

</div>

</body>

</html>

Let's save above code in an HTML fileresizeexample.htm and open it in a standard browser which supports javascript, you must see the following outout. Now you can play with the result:

Pull my edges to resize me!!

Drag the square border to resize.

Use of animate and ghost

The following example demonstrates the usage of two options animate and ghost in the resize function of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Resizable functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

.ui-widget-content {

background: #cedc98;

border: 1px solid #DDDDDD;

color: #333333;

}

#resizable-2,#resizable-3 {

width: 150px; height: 150px; padding: 0.5em;

text-align: center; margin: 0; }

</style>

$(function() {

$( "#resizable-2" ).resizable({

animate: true

});

$( "#resizable-3" ).resizable({

ghost: true

});

</script>

</head>

<body>

Pull my edges and Check the animation!!

</h3>

</div><br>

<h3 class="ui-widget-header">I'm ghost!!</h3>

</div>

</body>

</html>

Let's save above code in an HTML fileresizeexample.htm and open it in a standard browser which supports javascript, you must see the following outout. Now you can play with the result:

Pull my edges and Check the animation!!

I'm ghost!!

Drag the square border to resize and see the effect of animate and ghost options.

Use of containment, minHeight and minWidth

The following example demonstrates the usage of three options containment, minHeight andminWidth in the resize function of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Resizable functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

.ui-widget-content {

background: #cedc98;

border: 1px solid #DDDDDD;

color: #333333;

}

#container-1 { width: 300px; height: 300px; }

#resizable-4 {background-position: top left;

width: 150px; height: 150px; }

#resizable-4, #container { padding: 0.5em; }

</style>

$(function() {

$( "#resizable-4" ).resizable({

containment: "#container",

minHeight: 70,

minWidth: 100

});

</script>

</head>

<body>

Resize contained to this container

</h3>

</div>

</body>

</html>

Let's save above code in an HTML fileresizeexample.htm and open it in a standard browser which supports javascript, you must see the following outout. Now you can play with the result:

Resize contained to this container

Drag the square border to resize, you cannot resize beyond the main container.

Use of delay, distance and autoHide

The following example demonstrates the usage of three options delay, distance and autoHidein the resize function of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Resizable functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

.ui-widget-content {

background: #cedc98;

border: 1px solid #DDDDDD;

color: #333333;

}

.square {

width: 150px;

height: 150px;

border: 1px solid black;

text-align: center;

float: left;

margin-left: 20px;

-right: 20px;

}

</style>

$(function() {

$( "#resizable-5" ).resizable({

delay: 1000

});

$( "#resizable-6" ).resizable({

distance: 40

});

$( "#resizable-7" ).resizable({

autoHide: true

});

</script>

</head>

<body>

Resize starts after delay of 1000ms

</h3>

</div><br>

Resize starts at distance of 40px

</h3>

</div><br>

Hover over me to see the magnification icon!

</h3>

</div>

</body>

</html>

Let's save above code in an HTML fileresizeexample.htm and open it in a standard browser which supports javascript, you must see the following outout. Now you can play with the result:

Resize starts after delay of 1000ms

Resize starts at distance of 40px

Hover over me to see the magnification icon!

Drag the square border to resize and you can notice that:

The first square box resizes after a delay of 1000ms,

Second square box starts resizing after the mouse moves 40px .

Hover the mouse on the third square box, and the magnification icon appears.

Use of alsoResize

The following example demonstrates the usage of option alsoResize in the resize function ofJqueryUI.

<!doctype html>

<head>

<title>jQuery UI Resizable functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

.ui-widget-content {

background: #cedc98;

border: 1px solid #DDDDDD;

color: #333333;

}

#resizable-8,#resizable-9{ width: 150px; height: 150px;

padding: 0.5em;text-align: center; margin: 0; }

</style>

$(function() {

$( "#resizable-8" ).resizable({

alsoResize: "#resizable-9"

});

$( "#resizable-9" ).resizable();

});

</script>

</head>

<body>

<h3 class="ui-widget-header">Resize!!</h3>

</div><br>

<h3 class="ui-widget-header">I also get resized!!</h3>

</div>

</body>

</html>

Let's save above code in an HTML fileresizeexample.htm and open it in a standard browser which supports javascript, you must see the following outout. Now you can play with the result:

Resize!!

I also get resized!!

Drag the square border to resize and you can notice that the second square box also resizes with the first square box.

Use of aspectRatio, grid

The following example demonstrates the usage of option aspectRatio and grid in the resize function of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Resizable functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

.ui-widget-content {

background: #cedc98;

border: 1px solid #DDDDDD;

color: #333333;

}

.square {

width: 150px;

height: 150px;

border: 1px solid black;

text-align: center;

float: left;

margin-left: 20px;

margin-right: 20px;

}

</style>

$(function() {

$( "#resizable-10" ).resizable({

aspectRatio: 10 / 3

});

$( "#resizable-11" ).resizable({

grid: [50,20]

});

</script>

</head>

<body>

Resize with aspectRatio of 10/3

</h3>

</div>

Snap me to the grid of [50,20]

</h3>

</div>

</body>

</html>

Let's save above code in an HTML fileresizeexample.htm and open it in a standard browser which supports javascript, you must see the following outout. Now you can play with the result:

Resize with aspectRatio of 10/3

Snap me to the grid of [50,20]

Drag the square border to resize, the first square box resizes with the aspect ratio of 10 / 3 and the second one resizes with grid of [50,20].

$(selector, context).resizable ("action",params) Method

The resizable ("action", params) method can perform an action on resizable elements, such as allowing or preventing resizing functionality. The action is specified as a string in the first argument (e.g., "disable" to prevent the resize). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).resizable ("action", params);;

Following table lists the different actions that can be used with this method:

Action

Description

destroy

This action destroys the resizable functionality of an element completely. This will return the element back to its pre-init state.

disable

This action disables the resizing functionality of an element. This method does not accept any arguments.

enable

This action enables the resizing functionality of an element. This method does not accept any arguments.

option( optionName)

This action retrieves the value of the specifiedoptionName. This option corresponds to one of those used with resizable (options).

option()

Gets an object containing key/value pairs representing the current resizable options hash.This does not accept any arguments.

option(optionName, value )

This action sets the value of the resizable option with the specifiedoptionName. This option corresponds to one of those used with resizable (options).

option( options )

This action sets one or more options for the resizable.

widget()

This action returns ajQuery object containing the resizable element. This method does not accept any arguments.

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of destroy() and disable()methods.

<!doctype html>

<head>

<title>jQuery UI Resizable functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

.ui-widget-content {

background: #cedc98;

border: 1px solid #DDDDDD;

color: #333333;

}

#resizable-12,#resizable-13 { width: 150px; height: 150px;

padding: 0.5em;text-align: center; margin: 0; }

</style>

$(function() {

$( "#resizable-12" ).resizable();

$( "#resizable-12" ).resizable('disable');

$( "#resizable-13" ).resizable();

$( "#resizable-13" ).resizable('destroy');

});

</script>

</head>

<body>

<h3 class="ui-widget-header">I'm disable!!</h3>

</div><br>

<h3 class="ui-widget-header">I'm Destroyed!!</h3>

</div>

</body>

</html>

Let's save above code in an HTML fileresizeexample.htm and open it in a standard browser which supports javascript, you must see the following outout:

I'm disable!!

I'm Destroyed!!

You cannot resize the first square box as its disabled and the second square box is destroyed.

Event Management on resizable elements

In addition to the resizable (options) method we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below:

Event Method

Description

create(event,ui)

This event is triggered when the resizable element is created.

resize(event,ui)

This event is triggered when the handler of resizable element is dragged.

start(event,ui)

This event is triggered at the start of a resize operation.

stop(event,ui)

This event is triggered at the end of a resize operation.

Example

The following example demonstrates the event method usage during resize functionality. This example demonstrates the use of events create, and resize.

<!doctype html>

<head>

<title>jQuery UI Resizable functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

.ui-widget-content {

background: #cedc98;

border: 1px solid #DDDDDD;

color: #333333;

}

#resizable-14{ width: 150px; height: 150px;

padding: 0.5em;text-align: center; margin: 0; }

</style>

$(function() {

$( "#resizable-14" ).resizable({

create: function( event, ui ) {

$("#resizable-15").text ("I'm Created!!");

resize: function (event, ui)

{

$("#resizable-16").text ("top = " + ui.position.top+

", left = " +ui.position.left +

", width = " +ui.size.width +

", height = " +ui.size.height);

}

});

</script>

</head>

<body>

<h3 class="ui-widget-header">Resize !!</h3>

</div><br>

</body>

</html>

Let's save above code in an HTML fileresizeexample.htm and open it in a standard browser which supports javascript, you must see the following outout:

Resize !!

I'm Created!!

Drag the square box and you will see the outoutgetting displayed on resize event.

The official home of the Python Programming Language

JqueryUI Resizable

ليست هناك تعليقات:

إرسال تعليق