zoukankan      html  css  js  c++  java
  • Ajax Control Toolkit November 2011发布

    Ajax Control Toolkit November 2011发布了。这个版本引入了气泡控件(Ballon Popup)和对现有的tab控件进行了几个方面的增强,包括按需加载tab内容,支持竖排tab,支持键盘tab导航。另外修复了一些大家关注的tab相关的Bug。

    可以从以下站点下载新发布版本:

    http://ajaxcontroltoolkit.codeplex.com/

    或者,获取最新的Ajax Control Toolkit 的最快最简单的方法是使用NuGet.打开Visual Stuidio 2010的Library Package Manager控制台并输入:

    clip_image002

    当你使用Nuget安装完后请重新生成你的工程。重新生成后,ajaxToolkit前缀就会在智能提示中出现了:

    clip_image004

    使用气泡控件(Balloon Popup Control

    为什么要加气泡控件?经过CodePlex对Ajax Control Toolkit新特性投票,呼声第二高的就是气泡控件:

    clip_image006

    气泡显示一条信息当你移动焦点到控件,点击控件或者鼠标悬停到控件。你可以使用气泡控件,例如,来为窗体中的TextBox显示说明:

    clip_image007

    以下是用来创建气泡控件的代码:

     

    <ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" /> 

    <asp:TextBox 

        
    ID="txtFirstName" 

        Runat
    ="server" /> 

    <asp:Panel ID="pnlFirstNameHelp" runat="server"> 

        Please enter your first name    

    </asp:Panel> 

    <ajaxToolkit:BalloonPopupExtender 

        
    TargetControlID="txtFirstName" 

        BalloonPopupControlID
    ="pnlFirstNameHelp" 

        BalloonSize
    ="Small" 

        UseShadow
    ="true" 

        runat
    ="server" />

     

    你也可以使用气泡控件来解释出现在文本文档中难以理解的词语:

    clip_image008

    以下是如何来显示气泡当鼠标悬停在链接上:

     

    The point of the conversation was 

    <asp:HyperLink ID="lnkObfuscate" Text="obfuscated" CssClass="hardWord" runat="server" /> 

    by his incessant coughing. 

    <ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" /> 

    <asp:Panel id="pnlObfuscate" Runat="server"> 

        To bewilder or render something obscure 

    </asp:Panel> 

    <ajaxToolkit:BalloonPopupExtender 

        
    TargetControlID="lnkObfuscate" 

        BalloonPopupControlID
    ="pnlObfuscate" 

        BalloonStyle
    ="Cloud" 

        UseShadow
    ="true" 

        DisplayOnMouseOver
    ="true" 

        Runat
    ="server" /> 

     

    当你使用气泡控件时,有四个你需要知道的重要属性:

    BalloonSize - 3个气泡尺寸为Small,Medium,和Large

    BalloonStyle - 2个内置样式为Rectangle和Cloud

    UseShadow - 当为true时,气泡后会出现阴影。

    Position- 可以设置值为Auto,BottomLeft,BottomRight,TopLeft,TopRight。当设置为Auto时,默认设置,气泡将出现在它具有最大屏幕展示的位置。

     

    下面的屏幕截图列举了这些设置是如何影响气泡的外观:

    clip_image010

    clip_image012

    clip_image014

    Customizing the Balloon Popup

    通过创建你自己的样式表,你可以自定义气泡外观。Ajax Control Toolkit 样例站点包含一个自定义椭圆形气泡的例子:

    clip_image016

    通过使用自定义样式表和图片来创建自定义样式。通过指定气泡属性CustomCssUrl和CustomClassName来确定相应的自定义样式表路径和自定义样式表类名称:

     

    <asp:TextBox ID="txtCustom" autocomplete="off" runat="server" /> 

    <br /> 

    <asp:Panel ID="Panel3" runat="server"> 

        This is a custom BalloonPopupExtender style created with a custom 

        Cascading Style Sheet. 

    </asp:Panel> 

    <ajaxToolkit:BalloonPopupExtender 

        
    ID="bpe1" 

        TargetControlID
    ="txtCustom" 

        BalloonPopupControlID
    ="Panel3" 

        BalloonStyle
    ="Custom"    

        CustomCssUrl
    ="CustomStyle/BalloonPopupOvalStyle.css" 

        CustomClassName
    ="oval" 

        UseShadow
    ="true" 

        runat
    ="server" />

     

    更多关于气泡控件

    更多关于气泡控件,请访问Ajax Control Toolkit样例网站:

    http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/BalloonPopup/BalloonPopupExtender.aspx

    Tab控件改进

    在这个版本中,我们为现有的Tab控件引入 了几个重要的新特性。我们也修复所有的高投票的Tag控件的Bugs。

    按需加载Tab内容

    有一个这样的场景:想象你正在Web Forms页面中使用Tab控件。Tab控件展示了两个Tab:客户和产品。当你点击客户Tab当你要查看客户列表,当你点击产品Tab当你要查看产品列表。

    在这样一个场景,你不需要客户和产品列表在页面初始化打开时从数据库获取。用户可能从未点击产品tab,那么从数据库加载产品列表的所有工作将被浪费。

    在这样一个场景,你要tab页中内容按需加载。产品只应该在你点击产品Tab时才从数据库加载而不是在此之前。

    clip_image018

    Ajax Control Toolkit November 2011 Release中的tab控件引入了一个命名为OnDemand的新属性。当OnDemand的值设置为True时,tab面板直到你点击想关联的tab时才加载。

    以下是Aspx页面代码:

     

    <ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" /> 

    <ajaxToolkit:TabContainer ID="tabs" OnDemand=”true" runat="server"> 

        <ajaxToolkit:TabPanel HeaderText="Customers" runat="server"> 

        <ContentTemplate> 

            <h2>Customers</h2> 

            <asp:GridView ID="grdCustomers" DataSourceID="srcCustomers" runat="server" /> 

            <asp:SqlDataSource 

                
    ID="srcCustomers" 

                SelectCommand
    ="SELECT * FROM Customers" 

                ConnectionString
    ="<%$ ConnectionStrings:StoreDB %>" 

                runat
    ="server" /> 

        </ContentTemplate>    

        </ajaxToolkit:TabPanel> 

        <ajaxToolkit:TabPanel HeaderText="Products" runat="server"> 

        <ContentTemplate> 

            <h2>Products</h2> 

            <asp:GridView ID="grdProducts" DataSourceID="srcProducts" runat="server" /> 

            <asp:SqlDataSource 

                
    ID="srcProducts" 

                SelectCommand
    ="SELECT * FROM Products" 

                ConnectionString
    ="<%$ ConnectionStrings:StoreDB %>" 

                runat
    ="server" /> 

        </ContentTemplate> 

        </ajaxToolkit:TabPanel> 

    </ajaxToolkit:TabContainer>

     

    注意TabContainer包含一个OnDemand="True"的属性.这个Tabs控件包含两个Tab面板。第一个tab面板使用一个GridView和SqlDataSource来展示客户列表,第二个tab面板使用一个GridView和SqlDataSource来展示产品列表。

    以下是页面的后台代码:

     

    using System; 

    using System.Diagnostics; 

    using System.Web.UI.WebControls; 

    namespace ACTSamples { 

        public partial class TabsOnDemand : System.Web.UI.Page { 

            protected override void OnInit(EventArgs e) { 

                srcProducts.Selecting += new SqlDataSourceSelectingEventHandler(srcProducts_Selecting); 

            } 

            void srcProducts_Selecting(object sender, SqlDataSourceSelectingEventArgs e) { 

                Debugger.Break(); 

            } 

        } 

    }

     

    后台代码文件包含一个产品SqlDataSource的Selecting事件的event handler. 通过调用Debugger.Break()方法 处理程序断入到调试器。那样,当产品SqlDataSource实际获取产品列表时我们就可以知道了。

    当OnDemand属性的值为False时那么Selecting event handler 被立即调用,当页面第一次加载时。所有tab中的内容被加载(和未选中隐藏tab的内容)当页面第一次加载。

    当OnDeman属性的值为True时那么Selecting event handler不被调用,当页面第一次加载时。Event handler直到你点击产品tab时才被调用。如果你从未点击产品tab,那么产品列表不会被从数据库加载。

    当tab面板中的加载时如果你要更多控制,那么你可以使用TabPanel的OnDemand属性。该属性接受一下3个值:

    · None – 从未再加载tab面板内容当页面第一次加载后.

    · Once – 等待直到tab被选中来加载tab面板的内容

    · Always – 加载tab面板内容当你每次点击tab时。

    有一个Tabs控件的OnDemand属性的现场演示在这:

    http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx

    展示竖排Tabs

    随着 November 2011 发布, Tabs控件现在支持竖排Tabs.

    clip_image020

    要创建竖排tabs,只需像这样设置TabContainer的UseVerticalStripPlacement属性的值:

     

    <ajaxToolkit:TabContainer ID="tabs" OnDemand="false" UseVerticalStripPlacement="true" runat="server"> 

        <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="First Tab" runat="server"> 

        <ContentTemplate> 

        <p> 

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. 

        </p> 

        </ContentTemplate>    

        </ajaxToolkit:TabPanel> 

        <ajaxToolkit:TabPanel ID="TabPanel2" HeaderText="Second Tab" runat="server"> 

        <ContentTemplate> 

        <p> 

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. 

        </p> 

        </ContentTemplate> 

        </ajaxToolkit:TabPanel> 

    </ajaxToolkit:TabContainer>

     

    此外,你可以使用TabStripPlacement属性来控制tab条(tab trip)是否出现在tab面板的左或者右或者上或者下:

    clip_image022

    Tab键盘导航

    另一个呼声较高的Tabs控件的特性是支持键盘导航。Tabs控件现在支持箭头键和Home和End键。

    为了箭头键能工作,你必须首先移动焦点到页面中的tab控件通过鼠标点击tab或者不断使用tab键。

    你可以通过包含在Tabs样例页面中的任何demo尝试新键盘导航支持:

    http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx

    从 <http://stephenwalther.com/blog/archive/2011/11/16/ajax-control-toolkit-november-2011-release.aspx> 插入

  • 相关阅读:
    Elasticsearch学习之基本核心概念
    Kudu,支持快速分析的新型Hadoop存储系统
    npm命令
    git相关命令
    Linux下Nodejs安装(完整详细)转
    数据库删除discuz 部分数据操作
    用tcping检查网站开放的端口
    Mybatis各种模糊查询
    抱歉,当前存在网络问题或服务器繁忙错误代码:20003问题解决方法
    win7下python2.7安装 pip,setuptools的正确方法
  • 原文地址:https://www.cnblogs.com/qishichang/p/2269634.html
Copyright © 2011-2022 走看看