Ajax Control Toolkit 34个服务器端控件(7)

来源:互联网 发布:haproxy windows版 编辑:程序博客网 时间:2024/04/30 07:58

26. RoundedCorners

【功能】

控件圆角 纯粹是控制外观的了,什么时候审美疲劳了还要改。据说GUI风格也是N年一轮回,这让我想起来了一个27KBQQ,命令行界面,真的是这样么?穿孔纸带据说是第一代GUI,不会有一天真的回到那个时代吧?
  
【细节】

 (1)还有一个非常非常细节的地方:你必须要设置 CssClass="roundedPanel"要不然不起作用
                (2) Radius
设置弧度,默认是5
                (3)
只适用于容器 WebControl

       【示意代码】

代码示意:
              
<ajaxToolkit:RoundedCornersExtender ID="rce" runat="server"     TargetControlID="Panel1"     Radius="6" />

27. Slider

【功能概述】

实现WinForm中的Slider控件效果,新浪论坛用来分页了,还有的用来调整时间----------|----热度,创意!
  
【细节】

(1)   修改文本框的值也可以影响Slider的状态

【示意代码】

  代码示意:
              
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>                              
    
<cc1:SliderExtender ID="SliderExtender2" runat="server"
                                BehaviorID
="Slider2"
                                TargetControlID
="Slider2"
                                BoundControlID
="TextBox1"
                                Orientation
="Horizontal" 
                                EnableHandleAnimation
="true"
                                 Minimum
="0"
                                Maximum
="100"
                                
/>

28. Tabs NEW!!!

Tabs是我认为这一次新增控件中最实用的好东东, 在编码风格上与所有嵌套式的控件一样:
           <ajaxToolkit:TabContainer runat="server"
        OnClientActiveTabChanged="ClientFunction"
        Height="150px">
    <ajaxToolkit:TabPanel runat="server"
        HeaderText="Signature and Bio"
        <ContentTemplate>
            ...
        </ContentTemplate>
    />
</ajaxToolkit:TabContainer>
 Demo
效果让我们很容易想到最近改版之后的网页主页和新浪主页 Accordion比较一下各有千秋,是对经典WinForm的一种继承。

29 .TextBoxWatermark

【功能概述】

对文本框进行扩展,文本水印效果。

看了几十个WEB2.0的网站,没想到,见到最多的就是这种水印效果,看来很受欢迎。

【示意代码】

 代码示意:
    
<asp:TextBox ID="TextBox1" CssClass="unwatermarked" Width="150" runat="server"></asp:TextBox>
            
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1" WatermarkText="请输入用户名" WatermarkCssClass="watermarked" />

 

30. ToggleButton

【功能概述】

就是把一个CheckBox的逻辑应用到一个按钮上,于是就有了双态按钮这么个玩意,有点意思啊

实际上示例页面并没有突出这个控件功能上的优势,对这个控件的操作引起页面上数据的更新,这才是CheckBox控件封装成Button的最终原因。
 
【示意代码】

<asp:CheckBox ID="CheckBox1" Checked="true" Text="I like ASP.NET" runat="server"/>
    
<cc1:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server" TargetControlID="CheckBox1" ImageWidth="19"
     ImageHeight
="19" UncheckedImageUrl="Image/down.gif" CheckedImageUrl="Image/up.gif" CheckedImageAlternateText="Check" 
     UncheckedImageAlternateText
="UnCheck" />

31UpdatePanelAnimation

【功能概述】

更新动画效果,个人认为应用于时间较短的场合,时间长了这个动画就有点不合适了,毕竟这是一个过渡效果;时间长还是UpdateProgress比较好。

   【细节】

代码结构简单但是要说的东西很多,回头再说写专题吧

代码示意:
  
<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"
  runat
="server" TargetControlID="up">
     
<Animations>
        
<OnUpdating>   </OnUpdating>
        
<OnUpdated>   </OnUpdated>
    
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

32. ValidatorCallout

【功能概述】

Windows系统中最常见的气泡提示,比如你磁盘空间不足的时候。是对数据验证控件的扩展,比较实用,页面效果的确是比以前那个红色的星号醒目多了!

【细节】

Errormessage是一个开放的属性,我们可以进行丰富的扩展,大胆的想象,让显示出来的气泡更有意义

代码示意:
  
<asp:RequiredFieldValidator runat="server" ID="PNReq" ControlToValidate="PhoneNumberTextBox" Display="None" ErrorMessage="<b>
  Required Field Missing</b><br />A phone number is required.<div style='margin-top:5px;padding:5px;border:1px solid #e9e9e9;background-color:white;'>
  <b>Other Options:</b><br /><a href='javascript:alert(&quot;No phone number available in profile.&quot;);'>Extract from Profile</a></div>"
 />
  
   
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="PNReqE" TargetControlID="PNReq" HighlightCssClass="highlight" Width="350px" />

还有一段:

代码示意:
 
<asp:RequiredFieldValidator runat="server" ID="NReq" ControlToValidate="NameTextBox" Display="None" ErrorMessage="<b>Required Field Missing</b><br />A name is required." />
        
<asp:RequiredFieldValidator runat="server" ID="PNReq" ControlToValidate="PhoneNumberTextBox" Display="None" ErrorMessage="<b>Required Field Missing</b><br />A phone number is required.<div style='margin-top:5px;padding:5px;border:1px solid #e9e9e9;background-color:white;'><b>Other Options:</b><br /><a href='javascript:alert(&quot;not implemented but you get the idea;)&quot;);'>Extract from Profile</a></div>" />
        
<asp:RegularExpressionValidator runat="server" ID="PNRegEx" ControlToValidate="PhoneNumberTextBox" Display="None" ErrorMessage="<b>Invalid Field</b><br />Please enter a phone number in the format:<br />(###) ###-####" ValidationExpression="((/(/d{3}/) ?)|(/d{3}-))?/d{3}-/d{4}" />
        
<cc1:ValidatorCalloutExtender runat="Server" ID="NReqE" TargetControlID="NReq" HighlightCssClass="highlight" />
        
<cc1:ValidatorCalloutExtender runat="Server" ID="PNReqE" TargetControlID="PNReq" HighlightCssClass="highlight" Width="350px" />
        
<cc1:ValidatorCalloutExtender runat="Server" ID="PNReqEx" TargetControlID="PNRegEx" HighlightCssClass="highlight" />