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>