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>

posted @ 2007-11-22 02:17  Astar  阅读(962)  评论(0编辑  收藏  举报