Microsoft AjaxToolkits 29. ResizableControl控件
ResizableControl控件用来改变的大小。
属性列表：
TargetControlID ：要被"可调整大小控件"扩展器所控制的控件ID。
ResizableCssClass ：当控件正在被调整大小时，所要使用的样式表。
HandleCssClass ：要套用到把柄的样式表。
MinimumWidth ：可调整大小的控件的最小宽度，默认值是0。
MinimumHeight：可调整大小的控件的最小高度，默认值是0。
MaximumWidth ：可调整大小的控件的最大宽度，默认值是0。
MaximumHeight ：可调整大小的控件的最大高度，默认值是0。
HandleOffsetX ：把柄位置水平方向要偏离多少像素。
OnClientResize :当控件已经被调整大小之后，所要执行的JavaScript函数名称。
OnClientResizeBegin ：当控件开始调整大小时，所要执行的JavaScript函数名称。
OnClientResizing ：当控件正在被调整大小之后，所要执行的JavaScript函数名称。
常见问题和使用技巧：
常见问题：如何在后台代码中获取或设置目标控件的当前尺寸？
使用技巧：ResizableControlID=new
System.Drawing.Size(300,55);
实例解析一、实现Panel的大小
<head
runat="server">
<title>无标题页</title>
<style>
.handletext{
width:20px;
height:30px;
overflow:hidden;
cursor:se-resize;
}
.resizingtext{
padding:0px;
border-sytle:solid;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:Panel ID="Panel1" runat="server" BackColor="#004000"
BorderWidth="1px">
</asp:Panel>
<cc1:resizablecontrolextender id="ResizableControlExtender1" runat="server"
handleoffsetx="6"
handleoffsety="6" maximumheight="500" maximumwidth="300" minimumheight="50"
minimumwidth="80"
targetcontrolid="Panel1" HandleCssClass="handletext"
ResizableCssClass="resizingtext"></cc1:resizablecontrolextender>
</form>
</body>
实例解析二、实现Panel的大小控制
效果图：
<head
id="Head1" runat="server">
<title>ResizableControl Demo</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.floatPanel
{
width: 250px;
border: 2px solid #000;
background-color: #fff;
}
.floatPanel .handle
{
background-color: #ccc;
border-bottom: 2px solid #000;
padding: 5px;
font-weight: bold;
cursor: move;
}
.floatPanel .content
{
padding: 5px;
overflow-y: scroll;
}
.handleImage
{
width: 15px;
height: 16px;
background-image: url('HandleGrip.png');
overflow: hidden;
cursor: se-resize;
}
.resizingPanel
{
cursor: se-resize;
border: 2px solid #7391BA;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:Panel ID="floatPanel" CssClass="floatPanel" runat="server">
<asp:Panel ID="floatPanelHandle" CssClass="handle" runat="server">
窗口的拖动
</asp:Panel>
<div class="content">
在Windows中，对窗口的拖动似乎成了我们习以为常的事情。通过拖动窗口，我们可以依照自己的喜好排部工作区。而在Web应用程序中，我们也可能会遇到这样的要求，
例如网上商店的购物车模块。本卷在第章中已经介绍了使用DragOverlayExtender实现这个功能，但这个实现方法并不十分专业，因为用户在整个浮动窗口的任一位置按下鼠标都将开始拖动，
这无疑剥夺了用户用鼠标对其中文本进行选择的权利。
</div>
</asp:Panel>
<ajaxToolkit:DragPanelExtender ID="dpe" TargetControlID="floatPanel"
DragHandleID="floatPanelHandle"
runat="server">
<ProfileBindings>
<ajaxToolkit:ProfilePropertyBinding ExtenderPropertyName="Location"
ProfilePropertyName="floatPanelLocation" />
</ProfileBindings>
</ajaxToolkit:DragPanelExtender>
<ajaxToolkit:ResizableControlExtender ID="rce" TargetControlID="floatPanel"
HandleCssClass="handleImage"
MinimumHeight="200" MinimumWidth="200" MaximumHeight="400" MaximumWidth="400"
ResizableCssClass="resizingPanel" runat="server" />
<div style="color: #888">
在Windows中，对窗口的拖动似乎成了我们习以为常的事情。通过拖动窗口，我们可以依照自己的喜好排部工作区。而在Web应用程序中，我们也可能会遇到这样的要求，例如网上商店的购物车模块。本卷在第章中已经介绍了使用DragOverlayExtender实现这个功能，但这个实现方法并不十分专业，因为用户在整个浮动窗口的任一位置按下鼠标都将开始拖动，这无疑剥夺了用户用鼠标对其中文本进行选择的权利。最好的实现方式能够让用户只能通过拖动悬浮窗口的某个区域（例如最上面的标题栏）来改变其位置，而其它的部分则只用来显示内容使用，和所有用户都熟悉的Window窗口的表现行为一样。
</div>
</form>
</body>
