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,在瀏覽器中查看效果。

如下：