jQuery UI Helpers / Resizable

Simple Resizable

You can create a resizable widget with the BeginResizable method.

You should call the BeginResizable method in a using statement. This is required to emit all the necessary HTML tags into the response.

The following example creates a simple resizable, which means the element has a draggable resize handle. You should use CSS and some configuration to get more sophisticated results.

@using (Html.JQueryUI().BeginResizable())
{
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa. </p>
}

The element below is resizable - you can move the handle in the bottom right corner.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa.

Configuration

Like the other widgets the resizable also has a fluent configuration API. To use it, create the resizable with the Begin method which takes a Resizable as its argument. The following example demonstrates this.

@using (Html.JQueryUI().Begin(new Resizable(new { @class = "resizable" })
    .MinWidth(200).MinHeight(150).Animate(true)))
{
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa. </p>
}

This creates the resizable below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa.

HTML Helpers

Fluent Configuration API