AJAX/ASP.NET - 使用按钮onClick(OnClientClick)事件和ResizableControlExtender调整asp:Panel中文字大小

• 下载源代码 - 243 KB

引言

最近，我需要在我的ASP.NET页面上有一个可调整大小的文本区域。我首先想到的是使用ResizableControlExtender，这对我来说效果很好。我可以通过拖动面板句柄来调整文字大小。几天后，我又有了新的需求，需要在表单上添加两个按钮，一个用于放大，一个用于缩小文字。本文介绍了我是如何实现这一点的。

背景

微软发布了AJAX工具包，它有很多不错的功能和控件。其中一个控件是ResizableControl。我的项目使用了这个控件。

代码

正如我前面提到的，我正在使用微软的示例代码。我们有一个简单的面板，其中包含一些将要调整大小的文本。

<asp:Panel ID="PanelText" runat="server" CssClass="frameText">
      This text resizes itself to be as large as possible
</asp:Panel>

然后，我们需要将此面板连接到ResizableControlExtender，因此我们使用以下代码

<ajaxToolkit:ResizableControlExtender 
   ID="ResizableControlExtender2" runat="server"
   BehaviorID="ResizableControlBehavior2" 
   TargetControlID="PanelText"
   ResizableCssClass="resizingText"
   HandleCssClass="handleText"
   MinimumWidth="100"
   MinimumHeight="50"
   MaximumWidth="400"
   MaximumHeight="350"
   OnClientResize="OnClientResizeText" />

我认为控件属性是不言自明的，除了BehaviorID。BehaviorID属性允许您从客户端脚本代码访问扩展器控件的客户端行为。您可以设置此BehaviorID来简化流程。您需要此引用，因为您需要使用这些扩展器属性和函数。

OnClientResizeText是一个将处理调整大小事件的JavaScript函数。这是我从微软获得的。

function OnClientResizeText(sender, eventArgs) {                
    var e = sender.get_element();
    // Make the font bigger until it's too big
    while((e.scrollWidth <= e.clientWidth) || 
           (e.scrollHeight <= e.clientHeight)) {
        e.style.fontSize = (fontSize++)+'pt';
    }
    var lastScrollWidth = -1;
    var lastScrollHeight = -1;
    // Make the font smaller until it's not
    // too big - or the last change had no effect
    // (for Opera where e.clientWidth
    //   and e.scrollWidth don't behave correctly)
    while (((e.clientWidth < e.scrollWidth) || 
            (e.clientHeight < e.scrollHeight)) &&
        ((Sys.Browser.agent !== Sys.Browser.Opera) || 
         (e.scrollWidth != lastScrollWidth) || 
         (e.scrollHeight != lastScrollHeight))) {
        lastScrollWidth = e.scrollWidth;
        lastScrollHeight = e.scrollHeight;
        e.style.fontSize = (fontSize--)+'pt';
    }
}

此时，您可以通过简单的鼠标拖动事件来调整文本大小。

现在，我们需要用两个按钮做同样的事情：放大和缩小。

<asp:Button  ID="LinkButton1" runat="server" 
  Text="Enlarge text" OnClientClick="return OnClientTextGrow();" />
<asp:Button  ID="Button1" runat="server" 
  Text="Shrink text" OnClientClick="return OnClientTextShrink();" />

所有这些按钮所做的只是分别启动对OnClientTextGrow()和OnClientTextShrink函数的调用。这些函数总是返回false，因此不会生成回发。

现在，我们可以检查OnClientTextGrow函数

function OnClientTextGrow () {               
    //Get Extender control
    var rcp = $find('ResizableControlBehavior2');                
    //Get Size Structure
    var size = rcp.get_Size();
   //Set new size for this control
    rcp.set_Size( {width: size.width*1.05, height: size.height*1.05} );
    return false;
}

由于我们在ResizableControlExtender中指定了BehaviorID，因此我们可以使用它来访问控件的函数。此控件具有一个get_Size()函数，它将获取控件的大小。同样，我们可以使用set_Size()来设置新的控件尺寸。为简便起见，我只是将当前控件大小乘以1.05。

源代码

您可以简单地下载提供的示例项目，使用Visual Studio 2.0打开它并运行它。