AJAX ControlToolkit学习日志-ResizableControlExtender(23)
ResizableControlExtender控件用于对一个web控件进行伸缩。
下面来看一个示例:
1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project,命名为ResizableControlExtender1。
2)在页面上拖放一个Panel,命名为Panel1。然后在Panel1下面拖放一个ResizableControlExtender,并将它关联到Panel1。
代码如下:
3)在页面上添加OnClientResizeText的脚本内容。
代码如下:
4)按下CTRL+F5,在浏览器中查看效果。
效果图如下:
下面来看一个示例:
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
4)按下CTRL+F5,在浏览器中查看效果。
效果图如下: