Sql server, .net and c# video tutorial: jQuery Resizable Widget

Suggested Videos
Part 93 - Draggable element on top
Part 94 - jquery droppable widget
Part 95 - Customizing droppable widget

(追記) (追記ここまで)

In this video we will discuss jQuery Resizable Widget

(追記) (追記ここまで)

jQuery Resizable Widget allows you to change the size of an element.

Consider the following HTML and CSS

<divid="redDiv"class="divClass"style="background-color: red">

Red Div

</div>

<style>

.divClass {

font-family: Arial;

height: 150px;

width: 150px;

text-align: center;

color: white;

}

</style>

To make the div element resizable
$(document).ready(function () {
$('#redDiv').resizable();
});

jQuery Resizable Widget Options

Option Description

alsoResize Allows to resize one or more elements synchronously with the resizable element

animate Animates to the final size after resizing. Include .ui-resizable-helper class to display outline while resizing

aspectRatio Specifies whether the element should preserve aspect ratio

autoHide Specifies whether the resize handles should hide when the user is not hovering over the element

containment Constrains resizing to within the bounds of the specified element or region

ghost specifies whether a semi-transparent helper element should be shown for resizing

maxHeight The maximum height you can resize to

minHeight The minimum height you can resize to

maxWidth The maximum width you can resize to

minWidth The minimum width you can resize to

jQuery Resizable Widget Events

Event Description

start Triggered at the start of a resize operation

stop Triggered at the end of a resize operation

resize Triggered during the resize operation

Resizing redDiv will also resize blueDiv

HTML

<divid="redDiv"class="divClass"style="background-color: red">

Red Div

</div>

<br/>

<divid="blueDiv"class="divClass"style="background-color: blue">

Red Div

</div>

jQuery

$(document).ready(function () {

$('#redDiv').resizable({

alsoResize: '#blueDiv'

});

Constrains re-sizing to within the bounds of the container div

HTML

<divid="container"style="border: 3px solid black;

height: 300px; width: 300px; padding: 5px">

<divid="redDiv"class="divClass"style="background-color: red">

Red Div

</div>

jQuery
$('#redDiv').resizable({
containment: '#container'
});

The following example handles start, stop and resize events of resizable widget

<%@PageLanguage="C#"AutoEventWireup="true"

CodeBehind="WebForm1.aspx.cs"Inherits="Demo.WebForm1"%>

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<scriptsrc="jquery-1.11.2.js"></script>

<scriptsrc="jquery-ui.js"></script>

<linkhref="jquery-ui.css"rel="stylesheet"/>

<scripttype="text/javascript">

$(document).ready(function () {

$('#redDiv').resizable({

start: function (event, ui) {

$('#startDimensions').html(getDimensions(event, ui));

stop: function (event, ui) {

$('#stopDimensions').html(getDimensions(event, ui));

resize: function (event, ui) {

$('#resizingDimensions').html(getDimensions(event, ui));

}

});

function getDimensions(event, ui) {

var html = 'Height = ' + ui.size.height + '<br/>';

html += 'Width = ' + ui.size.width;

return html;

}

});

</script>

<style>

.divClass {

font-family: Arial;

height: 150px;

width: 150px;

text-align: center;

color: white;

}

</style>

</head>

<bodystyle="font-family: Arial">

<formid="form1"runat="server">

<tableborder="1"style="border-collapse: collapse;">

<tr>

<td>Dimensions at Start</td>

<td>

<divid="startDimensions"></div>

</td>

</tr>

<tr>

<td>Dimensions while Resizing</td>

<td>

<divid="resizingDimensions"></div>

</td>

</tr>

<tr>

<td>Dimensions at Stop</td>

<td>

<divid="stopDimensions"></div>

</td>

</tr>

</table>

<br/>

<divid="redDiv"class="divClass"style="background-color: red">

Red Div

</div>

</form>

</body>

</html>

jQuery tutorial for beginners

Sql server, .net and c# video tutorial

jQuery Resizable Widget

No comments:

Post a Comment