ResizableControl:拖放边框改变大小的面板

ResizableControl扩展器控件可以应用到页面中的任何元素上，让用户可以通过拖动其右下角来改变该元素的大小，就像我们熟悉的Windows窗口一样。
示例运行效果：

图(1)

图(2)

图(3)

ResizableControlDemo.aspx代码示例：

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="ResizableControlDemo.aspx.cs" Inherits="Chapter09_ResizableControlDemo"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > ResizableControl Demo </ title >
     < link  href ="stylesheet.css"  rel ="stylesheet"  type ="text/css"   />
     < style  type ="text/css" > ...
        /**//* ResizableControl */

        .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;
        }
     </ style >
     < 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 >
</ head >
< body >
     < form  id ="ResizableControlForm"  runat ="server" >
         < asp:ScriptManager  ID ="sm"  runat ="server"   />
         < div  style ="width:650px;" >
             < div  class ="demoheading" > ResizableControl Demonstration </ div >
             < p >< strong > Resizable image with buttons for automatic resizing </ strong ></ p >
        
             < 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 >
             < p >
                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. 
             </ p >
             < p ></ p >
             < p >< strong > Resizable text with "onresize" event handler </ strong ></ p >
             < asp:Panel  ID ="PanelText"  runat ="server"  CssClass ="frameText" >
                This text resizes itself to be as large as possible within its container.
             </ asp:Panel >
             < p >
                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. 
             </ p >
            
             < ajaxToolkit:ResizableControlExtender  ID ="rce1"  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 ="rce2"  runat ="server"  
                TargetControlID ="PanelText"
                ResizableCssClass ="resizingText"
                HandleCssClass ="handleText"
                MinimumWidth ="100"
                MinimumHeight ="50"
                MaximumWidth ="400"
                MaximumHeight ="150"
                OnClientResize ="OnClientResizeText"   />
            
             <!--
                TargetControlID：该扩展器目标控件的ID，即将要允许用户通过拖放改变大小的控件的ID
                HandleCssClass：目标控件右下角区域，即用户可拖放的区域的CSS Class。一般在该CSS Class中应该指定一个背景图片
                                (例如background-image:url('HandleGrip.png');)，来让用户知道这个控件是允许改变大小的，给其
                                充分的提示
                HandleOffsetX：可拖放的区域在X方向上的附加偏移量，单位为像素(X)
                HandleOffsetY：可拖放的区域在Y方向上的附加偏移量，单位为像素(Y)
                ResizableCssClass：当鼠标悬浮于可拖放区域上，或是正在进行拖放时目标控件所附加的CSS Class。一般在该CSS Class
                                   中应该设置目标控件的边框样式(例如border:2px solid #7391BA;)，同样用来给用户充分的提示
                MinimumWidth：拖放目标控件进行缩放时，其允许的最小宽度，单位为像素(px)
                MinimumHeight：拖放目标控件进行缩放时，其允许的最小高度，单位为像素(px)
                MaximumWidth：拖放目标控件进行缩放时，其允许的最大宽度，单位为像素(px)
                MaximumHeight：拖放目标控件进行缩放时，其允许的最大高度，单位为像素(px)
                OnClientResizing：在改变目标控件大小时执行的客户端JavaScript函数
                OnClientResize：在改变目标控件大小完成后执行的客户端JavaScript函数
             -->
         </ div >
     </ form >
</ body >
</ html >

ResizableControlDemo.aspx.cs代码示例：

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public   partial   class  Chapter09_ResizableControlDemo : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{

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