ResizableControl 控件

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

实例代码：

<title>示范如何使用可调整大小控件</title>

// 放大图片

function OnClientImageGrow ()

{

// 找到可调整大小控件

var rcp = $find('rceImageBehavior');

// 取得大小结构

var size = rcp.get_Size();

// 指定放大倍率

rcp.set_Size( { 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( { size.width*0.75, height: size.height*0.75 } );

return false;

}

// 取得调整图片的时间

function OnClientResizeImage(sender, eventArgs)

{

$get("lastResizeImage").innerHTML = (new Date()).toString();

}

</script>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">

<table>

<tr>

<td>

<font color="red">上次调整图片大小的时间：</font>

<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">

<img src="Images/AJAX.gif"

style=" 100%; height: 100%;" />

</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>

<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";

}

运行结果：