注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

飞天心宏的博客

依稀旧梦似曾见,相逢只恨缘太迟

 
 
 

日志

 
 
关于我

出身数学,爱好文学,从事软件开发工作。一个阳光、幽默、热爱生活的男孩子,在追求理想的路上风雨无阻,勇往直前,崇尚“梦想有多远,我们就走多远”!

网易考拉推荐

Ajax控件之ResizableControl  

2008-08-01 16:11:09|  分类: Ajax Toolkit |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

      ResizableControl 是一个可以使最终用户在界面上改变任意一个元素的大小的控件,最终用户可以通过拖动需要改变大小的元素的右下角来完成其大小的设置, 其工作方式可以让最终用户感觉他像在操作一个 Windows 窗口一样。

ResizableConrol控件的属性:

  • TargetControlID - 将可以被最终用户改变大小的控件 ID
  • HandleCssClass - 控件改变大小的拖拽点的 Css 样式
  • ResizableCssClass - 当控件在改变大小过程中出现的 Css 样式
  • MinimumWidth/MinimumHeight - 最小尺寸的宽度和高度
  • MaximumWidth/MaximumHeight - 最大尺寸的宽度和高度
  • OnClientResizeBegin - 当控件被开始改变大小时的客户端脚本委托事件
  • OnClientResizing - 当控件被开始改变过程中的客户端脚本委托事件
  • OnClientResize - 当控件被在客户端改变大小时的客户端脚本委托事件
  • HandleOffsetX/HandleOffsetY - 改变大小拖拽点的位置
  •  

    实现的效果:(图片右下角有个手型图标,光标指向时可以拖动以改变图片的大小)

    代码: 

     <cc1:ResizableControlExtender ID="ResizableControlExtender1" runat="server"
                    TargetControlID="Panel1"
                    HandleCssClass="handleImage"
                    HandleOffsetX="3"
                    HandleOffsetY="3"
                    MaximumHeight="400"
                    MaximumWidth="600"
                    MinimumHeight="50"
                    MinimumWidth="75"
                    ResizableCssClass="resizingImage">
        </cc1:ResizableControlExtender>

    CSS样式:

    .handleImage

        width:15px;
        height:16px;
        background-image:url(images/HandleHand.png);
        overflow:hidden;
        cursor:se-resize;
    }
    .resizingImage
    {
      padding:0px;
      border-style:solid;
      border-width:3px;

      border-color:#B4D35D;
    }

         这里图片是放在一个panel中,那么image的width和height属性就设为100%,这样拖动的时候,image就会随panel扩大缩小。

     

      评论这张
     
    阅读(493)| 评论(1)
    推荐 转载

    历史上的今天

    在LOFTER的更多文章

    评论

    <#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    页脚

    网易公司版权所有 ©1997-2018