ResizableControlExtender控件用于对一个web控件进行伸缩。
下面来看一个示例：
1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project，命名为ResizableControlExtender1。
2)在页面上拖放一个Panel，命名为Panel1。然后在Panel1下面拖放一个ResizableControlExtender，并将它关联到Panel1。
代码如下：
1
<asp:Panel ID="Panel1" runat="server" Height="100px" Width="100px" BorderColor="NavajoWhite" BorderStyle="Solid" BorderWidth="1px">
2 fjffoeijfioejfie<br />
3 joefjio<br />
4 efjoefjiojfiojfe<br />
5 </asp:Panel>
6 <br />
7 </div>
8 <cc1:resizablecontrolextender id="ResizableControlExtender1" runat="server" maximumheight="500"
9 maximumwidth="500" minimumheight="100" minimumwidth="100" targetcontrolid="Panel1" HandleCssClass="handleText" ResizableCssClass="resizingText" OnClientResize="OnClientResizeText"></cc1:resizablecontrolextender>
10
<asp:Panel ID="Panel1" runat="server" Height="100px" Width="100px" BorderColor="NavajoWhite" BorderStyle="Solid" BorderWidth="1px">2
fjffoeijfioejfie<br />3
joefjio<br />4
efjoefjiojfiojfe<br />5
</asp:Panel>6
<br />7
</div>8
<cc1:resizablecontrolextender id="ResizableControlExtender1" runat="server" maximumheight="500"9
maximumwidth="500" minimumheight="100" minimumwidth="100" targetcontrolid="Panel1" HandleCssClass="handleText" ResizableCssClass="resizingText" OnClientResize="OnClientResizeText"></cc1:resizablecontrolextender>10
3)在页面上添加OnClientResizeText的脚本内容。
代码如下：
1 var fontsize=12;
2 function OnClientResizeText(sender,eventArgs)
3
{
4
var e=sender.get_element();
5 while((e.scrollWidth<=e.clientWidth) || (e.scrollHeight<=e.clientHeight))
6
{
7 e.style.fontSize=(fontsize++) + 'pt';
8
}
9 var lastScrollWidth=-1;
10 var lastScrollHeight=-1;
11 while((e.clientWidth<e.scrollWidth || e.clientHeight<e.scrollHeight) && (e.scrollHeight!=lastScrollWidth || e.scrollWidth!=lastScrollHeight))
12 {
13 lastScrollWidth=e.scrollWidth;
14 lastScrollHeight=e.scrollHeight;
15 e.style.fontSize=(fontsize--) + 'pt';
16 }
17
}
var fontsize=12;2
function OnClientResizeText(sender,eventArgs)3
{4
var e=sender.get_element();5
while((e.scrollWidth<=e.clientWidth) || (e.scrollHeight<=e.clientHeight))6
{7
e.style.fontSize=(fontsize++) + 'pt';8
}9
var lastScrollWidth=-1;10
var lastScrollHeight=-1;11
while((e.clientWidth<e.scrollWidth || e.clientHeight<e.scrollHeight) && (e.scrollHeight!=lastScrollWidth || e.scrollWidth!=lastScrollHeight))12
{13
lastScrollWidth=e.scrollWidth;14
lastScrollHeight=e.scrollHeight;15
e.style.fontSize=(fontsize--) + 'pt';16
}17
}4)按下CTRL+F5,在浏览器中查看效果。
效果图如下：