AJAX Cntorl Toolkit ResizeableControl(可缩放控件)

1.Resizable Server Properties

TargetControlID - The ID of the element that becomes resizable

HandleCssClass - The name of the CSS class to apply to the resize handle

ResizableCssClass - The name of the CSS class to apply to the element when resizing

MinimumWidth/MinimumHeight - Minimum dimensions of the resizable element

MaximumWidth/MaximumHeight - Maximum dimensions of the resizable element

OnClientResizeBegin - Event fired when the element starts being resized

OnClientResizing - Event fired as the element is being resized

OnClientResize - Event fired when the element has been resized

HandleOffsetX/HandleOffsetY - Offsets to apply to the location of the resize handle

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
    <strong>Resizable image with buttons for automatic resizing</strong>
    <br /><br />

    <asp:Panel ID="PanelImage" runat="server" CssClass="frameImage">
        <asp:Image ID="Image1" runat="server" ImageUrl="~/images/AJAX.gif"
                   AlternateText="ASP.NET AJAX" style="100%; height:100%;" />
    </asp:Panel>
    <div style="float: right;  160px; border: 1px dotted Gray; text-align: right">
        <asp:LinkButton ID="Button1" runat="server" Text="Submit" /><br />
        <asp:LinkButton ID="Button2" runat="server" Text="Shrink (via Server)" OnClick="Button2_Click" /><br />
        <asp:LinkButton ID="Button3" runat="server" Text="Grow (via Client)" OnClientClick="return OnClientClickGrow();" /><br />
        <p id="lastResize">Last image resize: Unknown</p>
    </div>
    ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers. 
    <br /><br />
    <strong>Resizable text with "onresize" event handler</strong>
    <br /><br />
    <asp:Panel ID="PanelText" runat="server" CssClass="frameText">
        This text resizes itself to be as large as possible within its container.
    </asp:Panel>
    ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.
    <br /><br />

<script type="text/javascript">
    function OnClientClickGrow () 
    {
        var rcp = $find('ResizableControlBehavior1');
        var size = rcp.get_Size();
        rcp.set_Size( {  size.width*2, height: size.height*2 } );
        return false;
    }

    function OnClientResizeImage(sender, eventArgs) 
    {
        $get("lastResize").innerHTML = "Last image resize at " + (new Date()).toString();
    }

    var fontSize = 12;
    function OnClientResizeText(sender, eventArgs) 
    {
        // This sample code isn't very efficient, but demonstrates the idea well enough
        var e = sender.get_element();
        // Make the font bigger until it's too big
        while((e.scrollWidth <= e.clientWidth) || (e.scrollHeight <= e.clientHeight)) {
            e.style.fontSize = (fontSize++)+'pt';
        }
        var lastScrollWidth = -1;
        var lastScrollHeight = -1;
        // Make the font smaller until it's not too big - or the last change had no effect
        // (for Opera where e.clientWidth and e.scrollWidth don't behave correctly)
        while (((e.clientWidth < e.scrollWidth) || (e.clientHeight < e.scrollHeight)) &&
            ((Sys.Browser.agent !== Sys.Browser.Opera) || (e.scrollWidth != lastScrollWidth) || (e.scrollHeight != lastScrollHeight))) 
            {
            lastScrollWidth = e.scrollWidth;
            lastScrollHeight = e.scrollHeight;
            e.style.fontSize = (fontSize--)+'pt';
            }
    }
</script>
        
<ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server"
                                      BehaviorID="ResizableControlBehavior1" 
                                      TargetControlID="PanelImage"
                                      ResizableCssClass="resizingImage"
                                      HandleCssClass="handleImage"
                                      MinimumWidth="50"
                                      MinimumHeight="26"
                                      MaximumWidth="250"
                                      MaximumHeight="170"
                                      HandleOffsetX="3"
                                      HandleOffsetY="3"
                                      OnClientResize="OnClientResizeImage" />
<ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender2" runat="server"
                                      TargetControlID="PanelText"
                                      ResizableCssClass="resizingText"
                                      HandleCssClass="handleText"
                                      MinimumWidth="100"
                                      MinimumHeight="50"
                                      MaximumWidth="400"
                                      MaximumHeight="150"
                                      OnClientResize="OnClientResizeText" />
</div>
</form>   

.frameImage
{
    width:130px;
    height:65px;
    overflow:hidden;
    float:left;
    padding:3px;
}

.frameText
{
    width:100px;
    height:100px;
    overflow:auto;
    float:left;
    background-color:#ffffff;
    border-style:solid;
    border-width:2px;
    border-color:Gray;
    font-family:Helvetica;
    line-height:normal;
}

.handleImage
{
    width:15px;
    height:16px;
    background-image:url(images/HandleHand.png);
    overflow:hidden;
    cursor:se-resize;
}

.handleText
{
    width:16px;
    height:16px;
    background-image:url(images/HandleGrip.png);
    overflow:hidden;
    cursor:se-resize;
}

.resizingImage
{
    padding:0px;
    border-style:solid;
    border-width:3px;
    border-color:#B4D35D;
}

.resizingText
{
    padding:0px;
    border-style:solid;
    border-width:2px;
    border-color:#7391BA;
}

protected void Button2_Click(object sender, EventArgs e)
    {
        System.Drawing.Size s = ResizableControlExtender1.Size;
        ResizableControlExtender1.Size = new System.Drawing.Size(s.Width / 2, s.Height / 2);
    }