zoukankan      html  css  js  c++  java
  • 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{
            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
            {
                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
            {
             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>

  • 相关阅读:
    IEEE 网址
    知乎上非常棒的机器学习专栏
    怎样认识比你优秀的人并和他们成为朋友?
    影藏铜皮,显示原点与更改
    PCB检查事项,生成钻孔表
    布局-同样模块复用
    制作DIP Package及DIP焊盘制作,不规则焊盘制作
    制作SMD Package及SMD焊盘制作
    导入网络表
    导入DXF文件
  • 原文地址:https://www.cnblogs.com/astar/p/967988.html
Copyright © 2011-2022 走看看