ASP.NET里AjaxControlToolkit 的使用方法

ASP.NET里AjaxControlToolkit 的使用方法

1、如果你用是VS 2010，那么可以下载AjaxControlToolkit 4.0这个DLL，如果是用VS 2008可以用3.5或者3.0，我个人推荐使用3.5的。

2、这里假设使用AjaxControlToolkit 3.5，那么第一步下载AjaxControlToolkitBinary 3.5的，解压后如图1.1：

 

　　　　　　　　　　　　　　　　　　(图1.1)

 

将里面的DLL文件添加引用，再把全部的文件复制到项目里的BIN目录下,如图

　　　　（图 2.2）

3、新建一个文件，在首部加入这句，在页面中注册一下这个DLL，注册后才可以使用这个DLL提供的全部方法。

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

4、好了这样子，AjaxControlToolkit全部例子里的代码就可以使用了。你可以下载AjaxControlToolkitSampleSite，来查看每一个例子的使用代码。大概有48个例子，真的是很全面了。如图3.3

　　　　　　　　　　　　　　　　　　　　　　(图3.3)

 

5、其实里面全部的例子，我也没有一一出看过，我看了大概十几个，最后我给出两个我觉的比较典型的例子。Accordion的手风琴的效果，AlwaysVisibleControl实现在页面里放一个浮动在某一角小广告。

Accordion:
功能：实现了QQ、Msn好友分类的折叠效果，就像包含了多个CollapsiblePanels
细节： (1)不要把Accordion放在Table种同时又把 FadeTransitions 设置为True，这将引起布局混乱
(2)每一个 AccordionPane control 有一个Header 和Content的 template
(3)在Content中可以进行任意扩展，你什么都可以放上^_^
(4)有三种AutoSize modes ：None(推荐) Limit Fill
(5)Accordion表现的更像是一个容器
代码示意：
       <ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
            ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
            TransitionDuration="250" AutoSize="None">
            <Panes>
                <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        <a href="javascript:return false;">1. Accordion</a></Header>
                    <Content>
                        This is a Test
                    </Content>
                </ajaxToolkit:AccordionPane>
                <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        <a href="javascript:return false;">2. Accordion</a></Header>
                    <Content>
                        This is a Test2
                    </Content>
                </ajaxToolkit:AccordionPane>
            </Panes>
        </ajaxToolkit:Accordion>

 

 

2. AlwaysVisibleControl
功能：最多的应用是在线小说的目录和不胜其烦的浮动小广告
细节： 	使一个面板总在屏幕上；一般用于广告；
	控件必须包含如下属性：
		TargetControlID：要控制的控件ID;
		VerticalSide：垂直停靠位置，可选项Top,Bottom,Middle;
		VerticalOffset：控件垂直偏移值，正数字，表示偏移像素；
		HorizontalOffset： 控件水平停靠位置，可选项Left,Right,Center;
		HorizontalOffset: 控件水平偏移值，正数字，表示偏移像素；
		ScrollEffectDuration：页面变动时移动到新位置所需时间，正数字，表示秒数
代码示意：
        <div style="width: 230px; height: 100px">
            <asp:Panel ID="timer" runat="server" Width="250px" BackColor="White" ForeColor="DarkBlue"
                BorderWidth="2" BorderStyle="solid" BorderColor="DarkBlue" Style="z-index: 1;">
                <div style="width: 100%; height: 100%; vertical-align: middle; text-align: center;">
                    <p>
                        Current Time:</p>
                    <span id="currentTime" runat="server" style="font-size: xx-large; font-weight: bold;
                        line-height: 40px;" />
                </div>
            </asp:Panel>
            <ajaxToolkit:AlwaysVisibleControlExtender ID="avce" runat="server" TargetControlID="timer"
                VerticalSide="Bottom" VerticalOffset="10" HorizontalSide="Right" HorizontalOffset="10"
                ScrollEffectDuration=".1" />
        </div>