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>

  • 相关阅读:
    为什么qt成为c++界面编程的第一选择 老夏课堂
    升级 package.json 内所有包的版本号
    小米 pro 双硬盘设置引导盘
    react 疑问集锦
    jmeter 基础使用
    vmware ubuntu 看不到网卡或连接不到网络
    如何在 Windows 11 使用旧的(或完整的)右键菜单
    hbuilder x 连接夜神模拟器
    当初为什么报 软件工程 这个专业?
    sparky 一个趋势图的JavaScript插件
  • 原文地址:https://www.cnblogs.com/astar/p/967988.html
Copyright © 2011-2022 走看看