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="width:100%; height:100%;" />
    </asp:Panel>
    <div style="float: right; width: 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( { width: 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>   

 1 .frameImage
 2 {
 3     width:130px;
 4     height:65px;
 5     overflow:hidden;
 6     float:left;
 7     padding:3px;
 8 }
 9 
10 .frameText
11 {
12     width:100px;
13     height:100px;
14     overflow:auto;
15     float:left;
16     background-color:#ffffff;
17     border-style:solid;
18     border-width:2px;
19     border-color:Gray;
20     font-family:Helvetica;
21     line-height:normal;
22 }
23 
24 .handleImage
25 {
26     width:15px;
27     height:16px;
28     background-image:url(images/HandleHand.png);
29     overflow:hidden;
30     cursor:se-resize;
31 }
32 
33 .handleText
34 {
35     width:16px;
36     height:16px;
37     background-image:url(images/HandleGrip.png);
38     overflow:hidden;
39     cursor:se-resize;
40 }
41 
42 .resizingImage
43 {
44     padding:0px;
45     border-style:solid;
46     border-width:3px;
47     border-color:#B4D35D;
48 }
49 
50 .resizingText
51 {
52     padding:0px;
53     border-style:solid;
54     border-width:2px;
55     border-color:#7391BA;
56 }

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