ajax控件之resizablecontrolextender

作者在 2008-05-05 13:28:39 发布以下内容
控件名:resizablecontrolextender
效果和用途:这个控件的用途我是很少在网上见过有网站有用到的,不过感觉效果还是很棒的
属性:
    TargetControlID :要被"可调整大小控件"扩展器所控制的控件ID。
    ResizableCssClass :当控件正在被调整大小时,所要使用的样式表。
    HandleCssClass :要套用到把柄的样式表。
    MinimumWidth :可调整大小的控件的最小宽度,默认值是0。
    MinimumHeight:可调整大小的控件的最小高度,默认值是0。
    MaximumWidth :可调整大小的控件的最大宽度,默认值是0。
    MaximumHeight :可调整大小的控件的最大高度,默认值是0。
    HandleOffsetX :把柄位置水平方向要偏离多少像素。
    OnClientResize :当控件已经被调整大小之后,所要执行的JavaScript函数名称。
    OnClientResizeBegin :当控件开始调整大小时,所要执行的JavaScript函数名称。
    OnClientResizing :当控件正在被调整大小之后,所要执行的JavaScript函数名称。
1.拖一个panel,在panel里放一个image控件,将控件的高和宽都设置成100%
2.托一个
resizablecontrolextender,设置其属性(这个控件的那几个css属性要是不设置的话好像是不行)
3.编写css样式:
<style type="text/css">
        .frameImage   //panel的样式
        {
            overflow:hidden;
            float:left;
            padding:3px;
        }
       
        .handleImage   //用来现实右下角的拖动图片的手图标
        {
            ;
            height:16px;
            background-image:url(img/AJAXEnabledWebSite108/images/HandleHand.png);
            overflow:hidden;
            cursor:se-resize;
        }
      
        .resizingImage   
        {
            padding:0px;
            border-style:solid;
            border-;
            border-color:#B4D35D;
        }
    </style>
eg:
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
        .frameImage
        {
            overflow:hidden;
            float:left;
            padding:3px;
        }
       
        .handleImage
        {
            ;
            height:16px;
            background-image:url(img/AJAXEnabledWebSite108/images/HandleHand.png);
            overflow:hidden;
            cursor:se-resize;
        }
      
        .resizingImage
        {
            padding:0px;
            border-style:solid;
            border-;
            border-color:#B4D35D;
        }
    </style>
   
</head>
<body style="text-align: center">
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
   
    </div>
        <asp:Panel ID="Panel1" runat="server" Height="400px" "304px" CssClass="frameImage">
            <asp:Image ID="Image1" runat="server" Height="100%" ImageUrl="~/img/nan.jpg" "100%" /></asp:Panel>
         
        <cc1:resizablecontrolextender id="ResizableControlExtender1" runat="server" targetcontrolid="Panel1" HandleCssClass="handleImage" HandleOffsetX="3" HandleOffsetY="3" MaximumHeight="800" Maximum"600" MinimumHeight="150" Minimum"100" ResizableCssClass="resizingImage"></cc1:resizablecontrolextender>
         
    </form>
</body>

效果:
 
 
 
————————————————————
技术日志 | 阅读 2851 次
文章评论,共5条
zl芊芊zl
2008-05-05 17:21
1
不是看到一张图片吗?怎么没有?
hebingbing(作者)
2008-05-05 19:20
2
就是啊,我也不明白啊,你这样直接进来就看不见,但是你要是点下一篇来看的话就又可以看到。不知道是怎么回事,郁闷啊……
hebingbing(作者)
2008-05-05 19:21
3
<div class="xspace-quote">原帖由zl芊芊zl于2008-05-05 17:21:21发表
不是看到一张图片吗?怎么没有?</div>
你要是点下一篇之后,再点上一篇来看就可以看到了……
zl芊芊zl
2008-05-06 18:38
4
哎呀怎么这么奇怪!!!
hebingbing(作者)
2008-05-06 19:44
5
呵呵,你的没有这个问题?
真不知道是怎么回事……
游客请输入验证码