ResizableControl 控件

功能：
     可以让页面中的任何控件具备大小缩放的功能。
属性：
     TargetControlID ：要被"可调整大小控件"扩展器所控制的控件ID。
    BehaviorID：rceTextBehavior ：
    ResizableCssClass ：当控件正在被调整大小时，所要使用的样式表。
    HandleCssClass ：要套用到把柄的样式表。
    MinimumWidth ：可调整大小的控件的最小宽度，默认值是0。
    MinimumHeight：可调整大小的控件的最小高度，默认值是0。
    MaximumWidth ：可调整大小的控件的最大宽度，默认值是0。
    MaximumHeight ：可调整大小的控件的最大高度，默认值是0。
    HandleOffsetX ：把柄位置水平方向要偏离多少像素。
    OnClientResize :当控件已经被调整大小之后，所要执行的JavaScript函数名称。
    OnClientResizeBegin ：当控件开始调整大小时，所要执行的JavaScript函数名称。
    OnClientResizing ：当控件正在被调整大小之后，所要执行的JavaScript函数名称。

实例代码：
    

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  id ="Head1"  runat ="server" >
     < title > 示范如何使用可调整大小控件 </ title >
     < link  href ="style.css"  type ="text/css"  rel ="Stylesheet"   />
     <
    <script  type ="text/javascript" >
    // 放大图片
    function OnClientImageGrow ()
    {
        // 找到可调整大小控件
        var rcp = $find('rceImageBehavior');
        // 取得大小结构
        var size = rcp.get_Size();
        // 指定放大倍率
        rcp.set_Size( { width: size.width*1.25, height: size.height*1.25 } );
        return false;
    }

    // 缩小图片
    function OnClientImageShrink ()
    {
        // 找到可调整大小控件
        var rcp = $find('rceImageBehavior');
        // 取得大小结构
        var size = rcp.get_Size();
        // 指定缩小倍率
        rcp.set_Size( { width: size.width*0.75, height: size.height*0.75 } );
        return false;
    }

    // 取得调整图片的时间
    function OnClientResizeImage(sender, eventArgs)
    {
        $get("lastResizeImage").innerHTML = (new Date()).toString();
    }

     </ script >
</ head >
< body >

    
     < form  id ="form1"  runat ="server" >
         < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
         </ asp:ScriptManager >

         < asp:UpdatePanel  ID ="UpdatePanel"  runat ="server"  UpdateMode ="Conditional" >
             < ContentTemplate >
             < table >
                 < tr >
                 
                     < td >
                         < font  color ="red" > 上次调整图片大小的时间： </ font >
                         < div  id ="lastResizeImage" ></ div >
                         < asp:Label  ID ="lblImageSize"  runat ="server" ></ asp:Label >
                         < br  />
                         < asp:LinkButton  ID ="LinkButton1"  runat ="server"  Text ="放大图片"  OnClientClick ="return OnClientImageGrow();"   />
                         < asp:LinkButton  ID ="LinkButton2"  runat ="server"  Text ="缩小图片"  OnClientClick ="return OnClientImageShrink();"   />
                         < asp:LinkButton  ID ="bntGetImageSize"  runat ="server"  Text ="取得图片大小信息"  OnClick ="bntGetImageSize_Click"   />
                     </ td >
                 </ tr >
                         
                 < tr >
            
                     < td >
                         < asp:Panel  ID ="panImageContainer"  runat ="server" >
                             < asp:Panel  ID ="panImage"  runat ="server"  CssClass ="cssFrameImage" >
                                 <!--  请特别注意，必须指定 style 之宽度与高度为 100%  -->
                               
                                 < img   src ="Images/AJAX.gif"
                                    style ="width: 100%; height: 100%;"   />
                             </ asp:Panel >
                         </ asp:Panel >
                         <!--  加入可调整大小控件  -->
                         < ajaxToolkit:ResizableControlExtender  ID ="rceImage"  runat ="server"
                            TargetControlID ="panImage"
                            BehaviorID ="rceImageBehavior"
                            ResizableCssClass ="cssResizingImage"
                            HandleCssClass ="cssHandleImage"
                            HandleOffsetX ="33"
                            HandleOffsetY ="28"
                            MaximumWidth ="1294"
                            MaximumHeight ="960"
                            MinimumWidth ="129"
                            MinimumHeight ="96"
                            OnClientResize ="OnClientResizeImage"   />
                     </ td >
                 </ tr >
             </ table >
         </ ContentTemplate >
         < Triggers >
             < asp:AsyncPostBackTrigger  ControlID ="bntGetImageSize"  EventName ="Click"   />
         </ Triggers >
     </ asp:UpdatePanel >
     </ form >
</ body >
</ html >

后台代码：

   protected   void  bntGetImageSize_Click( object  sender, EventArgs e)
     {
        // 取得可调整大小控件的大小结构
        Size s = this.rceImage.Size;
        this.lblImageSize.Text = "<font color='red'>图片框目前的大小：</font>宽=" + s.Width.ToString() + "px,高=" + s.Height.ToString() + "px";
     
    }

运行结果：