JUICE UI

Supercharge ASP.NET
Web Forms with jQuery UI

resizable

Interaction — Makes selected elements resizable (meaning they have draggable resize handles).

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.

Examples

Default functionality

<asp:Panel runat="server" ID="_Default" CssClass="ui-widget-content resizable">
	<h3 class="ui-widget-header">Resizable</h3>
</asp:Panel>
<Juice:Resizable runat="server" TargetControlID="_Default"  />

Resizable

Textarea

<style>
	.textarea .ui-resizable-se { bottom: 17px; right: 8px; }
</style>

<div class="textarea">
	<asp:Textbox ID="_Textarea" runat="server" TextMode="MultiLine" Rows="5" Columns="20" />
	<Juice:Resizable runat="server" TargetControlID="_Textarea"  />
</div>

Preserve Aspect Ratio

<asp:Panel runat="server" ID="ResizeMe" CssClass="ui-widget-content resizable">
	<h3 class="ui-widget-header">Resizable</h3>
</asp:Panel>
<Juice:Resizable runat="server" TargetControlID="ResizeMe" AspectRatio="1.77" /> <!-- 16 / 9 -->

Resizable

Maximum / Minimum Size

<asp:Panel runat="server" ID="_MinMax" CssClass="ui-widget-content resizable">
	<h3 class="ui-widget-header">Resizable</h3>
</asp:Panel>
<Juice:Resizable runat="server" TargetControlID="_MinMax" MaxHeight="250" MaxWidth="350" MinHeight="150" MinWidth="200" />

Resizable

Snap to Grid

<asp:Panel runat="server" ID="_Grid" CssClass="ui-widget-content resizable">
	<h3 class="ui-widget-header">Resizable</h3>
</asp:Panel>
<Juice:Resizable runat="server" TargetControlID="_Grid" Grid="50" />

Resizable

Animate

<asp:Panel runat="server" ID="_Animate" CssClass="ui-widget-content resizable">
	<h3 class="ui-widget-header">Resizable</h3>
</asp:Panel>
<Juice:Resizable runat="server" TargetControlID="_Animate" Animate="true" />

Resizable

Properties