AJAX ControlToolkit学习日志-ResizableControlExtender(23)

         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        &nbsp;</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        }

4)按下CTRL+F5,在浏览器中查看效果。

效果图如下：