Ajax扩展控件

kendezhu

浏览: 244141 次
性别:
来自: 葡萄牙

最近访客更多访客>>

wc12436109

qu118

凝枫霜颖

Oliver--ME

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX扩展控件

Ajax ASP ASP.net JavaScript 应用服务器

之前先来了解一下CallBack(一种不同于PostBack的回发方式(我们叫CallBack为回调

(http://developer.51cto.com/art/200805/75229.htm)),大多数控件都是使用PostBack回发,导致整个页面重载,而CallBack回调向服务器发送请求时只有ViewState和用户自定义信息被发送到服务器端,请求完毕后,只返回用户自定义结果,而不会导致整个页面重载,GridView控件正是使用了这个技术来实现无刷新的分页及排序功能,也就是说服务端控件利用CallBack技术可以很好的支持Ajax)

Ajax扩展控件里有一个ToolkitScriptManager与ScriptManager作用相仿,可以不用,只在母板页加ScriptManager即可。

1.Accordion(折叠控件)

该控件允许提供多个视图(AccordionPane控件),同一时间只能显示一个视图,像拥有多个可折叠的Panel一样,同一时间只有一个Panel是处于打开状态。每一个Panel(AccordionPane控件)都有它的标题部分和内容部分。

<form id="form1" runat="server">
    <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajax:ToolkitScriptManager>
    <div>
        <ajax:Accordion ID="Accordion1" runat="server">
        <Panes>
            <ajax:AccordionPane ID="AccordionPane1" runat="server">
            <Header>1. Accordion</Header>
            <Content>
The Accordion is a web control that allows you to provide multiple panes and display them one at a time.
            </Content>
            </ajax:AccordionPane>
            <ajax:AccordionPane ID="AccordionPane2" runat="server">
            <Header>2. AutoSize</Header>
            <Content>
  It also supports three AutoSize modes so it can fit in a variety of layouts.</p>
            </Content>
            </ajax:AccordionPane>
            <ajax:AccordionPane ID="AccordionPane3" runat="server">
            <Header>3. Control or Extender</Header>
            <Content>
    The extender can also be used on its own if you provide it appropriate input.
            </Content>
            </ajax:AccordionPane>
        </Panes>
        </ajax:Accordion>
    </div>
 </form>

Accordion的属性:HeaderCssClass(设置AccordionPane的Header的样式)

HeaderSelectedCssClass(设置选中的AccordionPane的Header的样式)

ContentCssClass(设置AccordionPane的Content的样式)

FadeTransitions(若该属性值设置为true,则在切换当前展开的AccordionPane面板时,将带有淡入淡出效果)

FramesPerSecond(播放展开/折叠AccordionPane面板动画的每秒钟帧数,40比较合适)

TransitionDuration(展开/折叠一个AccordionPane面板的过程所花费的时间,单位为毫秒)

AutoSize(在展开具有不同高度的AccordionPane面板时,该Accordion的总高度的变化方式:None(该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短)Limit(该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短,不过最高不会超过Accordion的Height属性设定值。若是其内容高度超过了Height属性设定值.则将自动显示滚动条)Fill:该Accordion的高度将固定为Height属性的设定值,不随当前展开的不同高度的AccordionPane面板而变化。若是某个AccordionPane的内容高度超过了Height属性设定值,则将自动显示滚动条))

RequireOpenedPane(是否必须有一个AccordionPane打开)

SuppressHeaderPostbacks(当在客户端单击控件的AccordionPane中的header中的元素时,是否阻止其进行回传)

SelectedIndex(默认打开哪个AccordionPane)

DataSourceID(页面中某个DataSource控件的ID,用于通过数据绑定自动生成AccordionPane面板)如用此种方式必须在<HeaderTemplate>和<ContentTemplate>中应该指定相应的绑定模板(把Panes换成<HeaderTemplate>和<ContentTemplate>):

<ajax:Accordion ID="Accordion1" runat="server" DataSource="SqlDataSource1">

<asp:Label ID="Label1" runat="server" Text='<%#Eval("title")%>'></asp:Label>

</HeaderTemplate>

<asp:Label ID="Label2" runat="server" Text='<%#Eval("content")%>'></asp:Label>

</ContentTemplate>

</ajax:Accordion>

2.CollapsiblePanelExtender(折叠Panel扩展器)

前面已经说过那些Ajax扩展器控件(**Extender)能扩展标准控件的功能,CollapsiblePanelExtender就是一个,它能

使一般Panel控件具有可折叠的功能。拖入一个CollapsiblePanelExtender控件:

<ajax:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" 
runat="server" TargetControlID="Panel1" 
ExpandControlID="控件1" CollapseControlID="控件1" 
Collapsed="false" 
ImageControlID="myIMG" 
ExpandedImage="images/expand.jpg" CollapsedImage="images/collapse.jpg" 
TextLabelID="Label1"
ExpandedText="隐藏" CollapsedText="展开" 
SuppressPostBack="true">
</ajax:CollapsiblePanelExtender>

属性:TargetControlID(指定一个Panel的ID,该Panel就是CollapsiblePanel要扩展显示或折叠的面板)

CollapseControlID/ExpandControlID(指定控制折叠/扩展的控件ID)

ExpandDirection(指定Panel的扩展方向)

CollapasedText/ExpandedText(Panel折叠/扩展时的文本)

TextLabelID(指定一个控件,可以在扩展或折叠Panel时显示CollapsedText/ExpandedText中的内容)

Collapsed(指定页面导入时Panel是折叠还是扩展)

ExpandedImage/CollapsedImage(在扩展/折叠时显示不同的图像)

ImageControlID(指定一个控件的ID,在扩展时显示ExpandedImage中的图像;在折叠时显示CollapsedImage中的图像)

SuppressPostBack(禁止回传)

Html:<pre> (按原文显示标签，可以把原文件中的空格,回车,换行,tab键表现出来)

<em> (告诉浏览器把其中的文本表示为强调内容,对于所有浏览器来说这意味着要把这段文字用斜体来显示)

补:如果要把Ajax扩展控件(**Extender)与它所扩展的普通控件放在UpdatePanel里的话,它们要位于同一个UpdatePanel里。

3.AlwaysVisibleControl(总是可见控件)

该控件允许将其他控件浮动在相对于页面的某一个位置,不论你调整页面大小还是滑动滚动条,这个控件仍然在相对的位置上不变。

属性:

TargetControlID:目标控件(我们要浮动在某一位置的控件)的ID

VertialSide:设置目标控件在垂直方向的位置(上中下)

HorizontalSide:设置目标控件在水平方向的位置(左中右)

VertialOffset:在HorizontalSide&&VertialSide所设置的位置上水平(上下)偏移的像素数

HorizontalOffset:在HorizontalSide&&VertialSide所设置的位置上垂直(左右)的像素数

ScrollEffectDuration:滚动效果的延迟时间?单位为秒,默认值0.1

Javascript:

此时对于http://kendezhu.iteye.com/blog/718294里的说法,其实我们也可以利用开发人

员工具来在客户端查看位于容器里的控件的ID,也可以用文中提到的方法。

时间格式化:http://kendezhu.iteye.com/blog/764045

<script type="text/javascript">
    window.setInterval(gettime,1000);
    function gettime()
    {
      document.getElementById("Label1").innerHTML=(new Date()).localeFormat("T");
      document.getElementById('<%=currentTime.ClientID%>').innerHTML=(new Date
()).localeFormat("T");
    }
    </script>

HTML:

<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajax:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
         <ContentTemplate>
          <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
          <div style="width:230px;height:100px">
           <asp:Panel ID="timer" runat="server" 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>
    </div>   
 <asp:DropDownList ID="DropDownList1" runat="server" 
                 onselectedindexchanged="DropDownList1_SelectedIndexChanged" 
                 AutoPostBack="True">
            <asp:ListItem Selected="True">默认位置</asp:ListItem>
            <asp:ListItem>左上</asp:ListItem>
            <asp:ListItem>中上</asp:ListItem>
            <asp:ListItem>右上</asp:ListItem>
            <asp:ListItem>左中</asp:ListItem>
            <asp:ListItem>中中</asp:ListItem>
            <asp:ListItem>右中</asp:ListItem>
            <asp:ListItem>左下</asp:ListItem>
            <asp:ListItem>中下</asp:ListItem>
            <asp:ListItem>右下</asp:ListItem>
        </asp:DropDownList>
我们通过HorizontalSide,VerticalOffset,HorizontalOffset,VerticalSide来设置目标控件的初始位置
   <ajax:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"     
 Enabled="True" TargetControlID="timer"  VerticalSide="Top" HorizontalSide="Center"
     VerticalOffset="100" ScrollEffectDuration="0.1" >
   </ajax:AlwaysVisibleControlExtender>
    </ContentTemplate>
         </asp:UpdatePanel>

后置代码:

using AjaxControlToolkit;
  protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToString();  
//我们在javascript代码里也对label1设置了时间的代码,结果显示javascript代码将覆盖后置代码,因为服务器端页面载入事件只是页面载入时执行一次,之后页面到客户端后就执行客户端事件了,这时如果一个控件的同一个事件(比如单击事件)既有客户端单击事件也有服务端单击事件则先执行客户端单击事件再执行服务端单击事件(但如果是页面载入时既有客户端页面载入事件也有服务端页面载入事件,先执行Page_Load(){}后执行window.onload=function(){})

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {   SelectedValue[0]获取选择的项的第一个字符(要转换为字符串型来使用)
            switch (DropDownList1.SelectedValue[0].ToString())
            {
                case "默":   
                //(枚举类型VerticalSide与HorizontalSide要引入这些Ajax拓展控件所在的命名空间)
                    AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Center;
                    break;
                case "左":
                    AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Left;
                    break;
                case "中":
                    AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Center;
                    break;
                case "右":
                    AlwaysVisibleControlExtender1.HorizontalSide = HorizontalSide.Right;
                    break;
            }
            switch (DropDownList1.SelectedValue[1].ToString())
            {
                case "认":
                    //当选则默认时恢复我们设置的目标控件的位置及偏移量
                    AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Top;
                    AlwaysVisibleControlExtender1.VerticalOffset = 100;
                    break;
                case "上":
                   // 当选择上方的位置时,我们要重新定义位置及偏移量
                    AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Top;
                    AlwaysVisibleControlExtender1.VerticalOffset = 0;
                    break;
                case "中":
                    AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Middle;
                    AlwaysVisibleControlExtender1.VerticalOffset = 0;
                    break;
                case "下":
                //由于选择下方时目标控件有一部分没显示出来,所以设置一下要垂直方向的偏移量
                    AlwaysVisibleControlExtender1.VerticalSide = VerticalSide.Bottom;
                    AlwaysVisibleControlExtender1.VerticalOffset = 40;
                    break;
            }
        }

CSS:用IE的开发人员工具查看有些ASP.NET服务器端控件会看到inline style(内嵌样式,这是当ASP.NET

服务器端控件在某些条件下输出到浏览器端时自动加的样式,例如服务器端控件被AlwaysVisibleControl控件

设为目标控件时会添加style="position:fixed;top:0px;left:0px;"(因为没有为AlwaysVisibleControl

控件添加VerticalSide,HorizontalSide属性)

还看到一些其他情况http://www.cnblogs.com/blodfox777/archive/2009/01/16/1377029.html(他犯这种错误主要归咎与<asp:Image>等服务器端控件没有style属性来设置border,只有BorderWidth等属性来设置,很容易忽略,因为我们很少硬给服务器端控件写入style属性。

http://hi.baidu.com/fumble/blog/item/dc66b70012df0e84e950cdea.html(CSS样式)

4.AnimationExtender(动画控件)

http://www.cnblogs.com/abcdwxc/archive/2007/10/26/939054.html

http://archive.cnblogs.com/a/1325587/

http://www.cnblogs.com/net123/archive/2010/01/29/1659175.html

http://www.cnblogs.com/lmx-102/archive/2008/12/02/1346044.html(AnimationExtender使用)

Animation是一个能够很容易就在你的页面添加动画效果的可插入可扩展的模型框架。

AnimationExtender是一个Ajax控件扩展器,它是一种Animation组件允许你使用功能强大的Animation模型(其他Animation组件有AnimationBehavior,UpdatePanelAnimationExtender等),个人感觉就是很简单的设置就可以实现复杂的js动画效果。(http://www.cnblogs.com/JeffreyZhao/archive/2007/03/14/Animation_Complete_Preface.html及下一篇)

在学使用之前,要先知道,这些**Extender只能扩展服务器端控件,你会发现只有那些服务器端控件的智能提示栏会出现添

加删除扩展的信息,而HTML控件是不会出现的,即便你给其runat="server"。(但下面说到的AnimationTarget属性可以设置为这些HTML控件,往下看吧!)

 <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajax:ToolkitScriptManager>
 <asp:Button ID="btnInfo" runat="server" OnClientClick="return false;" Text="Click Here"/>
       //OnClientClick="return false;" 能使该按钮失去回发能力()
   <ajax:AnimationExtender ID="btnInfo_AnimationExtender" runat="server" 
            Enabled="True" TargetControlID="btnInfo"> //目标控件设为btnInfo
            <Animations>
                <OnClick>
                <Sequence>    
 //Sequence属性很重要,如果没有该属性则只能使用以下一个动画属性,有了该属性则可以使用多个动画属性         
                <StyleAction Attribute="width" Value="200px" />
                <ScriptAction Script="alert('哈哈')"/>
                </Sequence>
                </OnClick>
                <OnMouseOver>
                   <Sequence AnimationTarget="myimg">
 //Sequence属性的AnimationTarget属性又可以设置目标控件,即AnimationExtender的目标控件的动画事件所改变的动画属性可以通过Sequence属性的AnimationTarget属性改变,不一定非要是AnimationExtender的目标控件,当然默认是AnimationExtender的目标控件
                   <StyleAction Attribute="width" Value="100px"></StyleAction>
                    </Sequence>
                </OnMouseOver>
                <OnMouseOut>
                   <Sequence>
                    <StyleAction AnimationTarget="myimg" Attribute="height" Value="100px"></StyleAction>
                         //动画属性也可以指定目标控件
                    <ScriptAction Script="window.open('http://www.baidu.com')"></ScriptAction>
                    <Parallel AnimationTarget="Image1" Duration="3" Fps="25">
                      //淡出属性
                     <FadeOut  minimumOpacity="0.1"></FadeOut>
                     </Parallel>
                    </Sequence>
                </OnMouseOut>
            </Animations>
        </ajax:AnimationExtender>
 <asp:Image ID="Image1" runat="server" ImageUrl="~/images/cartoon.ico" BorderWidth="2px"           BorderColor="Black" BorderStyle="Solid"/>
  <ajax:AnimationExtender ID="Image1_AnimationExtender" runat="server" Enabled="True"        
TargetControlID="Image1"> //目标控件设为Image1
   <Animations>
    <OnClick>  //以下动画效果将在单击Image1时发生(Image1本身的智能提示没有OnClick事件,但没关系)
     <Sequence AnimationTarget="Image1">
      <StyleAction Attribute="width" Value="200px" />
      <StyleAction Attribute="height" Value="300px"/>
      <OpacityAction AnimationTarget="Image1" Opacity="0.5"/>
    //Parallel属性用于给某一控件实施一系列的动画属性
      <Parallel AnimationTarget="Image1" Duration="3" Fps="25">
        <Move Horizontal="150" Vertical="-50" />
        <Resize Width="100" Height="100" />
        <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />
        <ScriptAction Script="alert('嘿嘿')"/>
      </Parallel>
     </Sequence>
    </OnClick>
   </Animations>
  </ajax:AnimationExtender>

我们暂且定义

动画事件:

OnLoad：表示要触发的事件是加载页面时。

OnClick：表示要触发的事件是单击控件时。

OnMouseOver：表示要触发的事件是鼠标滑过时。

OnMouseOut：表示要触发的事件是鼠标移走时

OnHoverOver：与OnMouseOver类似，对特定控件而言。

OnHoverOut：与OnMouseOut类似，对特定控件而言。

动画属性:

StyleAction样式属性(Attribute属性名(只能是style内嵌属性,即所有css属性,像服务端控件的属性不起作用,不过所有

css属性岂不更爽?不过属性有-的要把-后的首字母大写如background-color(要写为backgroundColor))Value属性值)

ScriptAction脚本属性(Script后可跟javascript函数)

OpacityAction透明度属性(Opacity取值0-1)

Color颜色属性(PropertyKey属性名(只能为style内嵌颜色属性有-的要把-后的首字母大写

如border-bottom-color(要写为borderBottomColor)StartValue开始属性值EndValue结束属性值(颜色属性值最好为16进制))

Length长宽属性(与Color差不多,只不过PropertyKey属性名(为style内嵌长宽属性)如borderTopWidth,StartValue开始属性值EndValue结束属性值)

EnableAction可用属性(Enabled取值true和false)

Move移动属性(relative属性为true时(移动到相对位置):Horizontal移动时水平偏移量Vertical移动时垂直偏移量

relative属性为false时(移动到绝对位置):Horizontal水平坐标Vertical垂直坐标。但这些的前提是目标控件的position

属性设置为absolute或fixed,不过这时最好连其top,left也设置了,因为设置为absolute或fixed后元素就脱离了标准)

Resize伸缩属性(width变化后的宽度height变化后的高度)

FadeIn淡入属性(maximumOpacity一般设置最大透明度(0-1))

FadeOut淡出属性(minimumOpacity一般设置最小透明度(0-1))

Pulse闪烁属性(连续的执行淡入淡出造成闪烁效果,Iterations闪烁次数)

Scale(将特定控件(图形或者文字)的大小改变到指定的倍率,scaleFactor(倍率)

center(放大或者缩小的过程中AnimationTarget是否要居中)scaleFont(如果需要缩放文字须为true)

其他属性:

Sequence(有了该属性则可以使用多个动画属性,一般直接嵌在动画事件以内)

Parallel(可以实施一系列的动画属性,并指定统一的目标控件等共有子属性)

以上属性共有的子属性(AnimationTarget目标控件ID,duration动画效果的时间间隔,Fps帧/秒的显示速度)

补:服务端控件的OnClientClick属性用于当点击该控件时先执行客户端事件OnClientClick="xx()"再引发回发及有服务端

事件的话执行服务端事件,这是在客户端事件无返回值或返回值是true的情况下,如果在有返回值且返回值是false的情况

下,不会引发回发及服务端事件。典型的应用:OnClientClick='return confirm("你确定要删除吗?")',js的confirm事件

当用户点确定时返回true,当点取消时返回fasle。其他很好的运用:http://www.jb51.net/article/9749.htm。

上面的例子太乱了,而且没有意义,下面整一个微软提供的例子:

http://www.cnblogs.com/hubcarl/archive/2009/09/23/1572637.html (Sys.UI.DomElement)

<script type="text/javascript" language="javascript">
            function Cover(bottom, top, ignoreSize) {
          //获取DOM1元素的位置(包含元素的x坐标(距左边缘的距离)和y坐标(距上边缘的距离))
                var location =Sys.UI.DomElement.getLocation(bottom);
//看到这里大家是否会想起我们前面讲的在ScriptManager中注册web服务,客户端的javascript脚本调用服务器端web服务

//里的方法?
//其实微软也提供了一个JavaScript框架Microsoft Ajax Library//

(http://msdn.microsoft.com/zhcn/library/bb397536.aspx)来简化我们的客户端编程的难度,它包含许多命名空间,其//

中Sys是根命名空间,Sys.UI.DomElement类(http://msdn.microsoft.com/zh-cn/library/bb383788.aspx)位于Sys.UI名//

空间下。我们可以像查jQuery API那样去查Microsoft Ajax Library API(http://msdn.microsoft.com/zh

-//cn/library/bb397536.aspx)
//在Microsoft Ajax Library中$get()是Sys.UI.DomElement类的getElementById 方法的快捷方式
//设置DOM2的位置与DOM1一样,并且视情况而定是否高度与宽度也与DOM1一样
//http://blog.csdn.net/wind_zsu/archive/2007/10/21/1835765.aspx(关于offsetHeight)
                top.style.position = 'absolute';
                top.style.top = location.y + 'px';
                top.style.left = location.x + 'px';
                if (!ignoreSize) {
                    top.style.height = bottom.offsetHeight + 'px';
                    top.style.width = bottom.offsetWidth + 'px';
                }
            }
        </script>

<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

  </ajax:ToolkitScriptManager>
   <asp:Button ID="Button1" runat="server" Text="Click me" OnClientClick="return false;"/>
   <div id="flyout" style="display: none; overflow: hidden; z-index: 2; background-color: #FFFFFF; border: solid 1px #D0D0D0;"></div>
   <div id="info" style="display: none; width: 250px; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">
   <div id="btnCloseParent" style="float: right; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);">
   <asp:LinkButton id="btnClose" runat="server" OnClientClick="return false;" Text="X" ToolTip="Close"
                    Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;" />
   </div>
   <div>
     <p>
      Once you get the general idea of the animation's markup, you'll want to play a bit.  All of
      the animations are created from simple, reusable building blocks that you can compose together.
      Before long you'll be creating dazzling visuals.  By grouping steps together and specifying
      them to be run either in sequence or in parallel, you'll achieve almost anything you can
      imagine, without writing a single line of code!
     </p>
     <br />
     <p>
     The XML defining the animations is very easy to learn and write, such as this example's
     <asp:LinkButton id="lnkShow" OnClientClick="return false;" runat="server">show</asp:LinkButton> and
     <asp:LinkButton OnClientClick="return false;" id="lnkClose" runat="server">close</asp:LinkButton>
                    markup.
     </p>
    </div>
    </div>
    <ajax:AnimationExtender ID="Button1_AnimationExtender" runat="server" Enabled="True"        TargetControlID="Button1">
         <Animations>
           <OnClick>
             <Sequence>
              <%-- 使该按钮不可用 --%>
               <EnableAction Enabled="false" />                       
              <%-- 将Button1按钮及div flyout传到客户端代码中处理,并且将flyout显示出 --%>
               <ScriptAction Script="Cover($get('Button1'), $get('flyout'));" />
               <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>                   
              <%-- 在0.3秒内动画改变flyout的位置大小及背景颜色 --%>
               <Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
                 <Move Horizontal="150" Vertical="-50" />
                 <Resize Width="260" Height="280" />
                 <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" />
               </Parallel>                      
               <%-- 将flyout与div info传入客户端代码中处理,并且将info淡入显示出,将flyout消失 --%>
                 <ScriptAction Script="Cover($get('flyout'), $get('info'), true);" />
                 <StyleAction AnimationTarget="info" Attribute="display" Value="block"/>
                 <FadeIn AnimationTarget="info" Duration=".2"/>
                 <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>                  
     <%-- 0.5秒内动画变化info的color及边框颜色,又在0.5秒内将这些变化变回去然后淡入 div btnCloseParent--%>
                 <Parallel AnimationTarget="info" Duration=".5">
                   <Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />
                   <Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
                 </Parallel>
                 <Parallel AnimationTarget="info" Duration=".5">
                   <Color PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />
                   <Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" />
                   <FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" />
                 </Parallel>
               </Sequence>
             </OnClick>
           </Animations>
        </ajax:AnimationExtender>
    <ajax:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
         <Animations>
           <OnClick>
            <Sequence AnimationTarget="info">
             <%-- 单击了btnClose在0.3秒info内变为0.05倍后淡出--%>
              <StyleAction Attribute="overflow" Value="hidden"/>
               <Parallel Duration=".3" Fps="15">
                <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />
                <FadeOut />
               </Parallel>           
             <%-- 将info消失,将 btnCloseParent隐藏--%>
              <StyleAction Attribute="display" Value="none"/>
              <StyleAction Attribute="width" Value="250px"/>
              <StyleAction Attribute="height" Value=""/>
              <StyleAction Attribute="fontSize" Value="12px"/>
              <OpacityAction AnimationTarget="btnCloseParent" Opacity="0" />        
             <%--  将Button1重新可用 --%>
              <EnableAction AnimationTarget="Button1" Enabled="true" />
             </Sequence>
            </OnClick>
           <OnMouseOver>
            <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />
           </OnMouseOver>
           <OnMouseOut>
            <Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" />
           </OnMouseOut>
          </Animations>
        </ajax:AnimationExtender>

5.HoverMenuExtender(划过菜单控件)

http://www.cnblogs.com/abcdwxc/archive/2007/11/05/950081.html http://www.cnblogs.com/hdjjun/archive/2008/06/17/1223672.html

当鼠标移动到指定的位置时,在不影响其他的元素的情况下出现一个菜单(当鼠标移到目标控件(须为服务端控件),弹出指定的控件(ScriptManager会控制该弹出控件在鼠标没划过目标控件时为不可见,当鼠标移到目标控件时再弹出控件(不管你是否设置了其可见性,甚至是设置了display:none))。但当页面第一次加载,Ajax.net的脚本库还没完全加载完毕的时候,弹出控件就会处于短暂的失控状态。如果网速较慢,我们会发现弹出控件会先出现一下,然后再隐藏起来,这会影响页面的美观。所以我们应该在弹出控件的样式上加上visibility:hidden,让弹出控件一开始就处于隐藏状态。

<style type="text/css">
 .Hover{ border-width:thin; border-color:Red; border-style:solid; background-color:Purple;}
 </style>
 
 <img src="images/fan.jpg" alt="" id="imgfan" style="display:none;"/>
 <asp:Button ID="Button2" runat="server" Text="Hover me" OnClientClick="return false;" />
 <ajax:HoverMenuExtender ID="HoverMenuExtender1" runat="server" 
 TargetControlID="Button2" PopupControlID="imgfan" PopupPosition="Bottom" PopDelay="6000" OffsetX="-90"    

OffsetY="20" HoverCssClass="Hover"/>

属性说明:

TargetControlID(目标控件ID)

PopupControlID(弹出控件ID)

PopupPosition(弹出控件位于目标控件的大体位置(Top,Bottom,Left,Right))

PopDelay(弹出控件停留时间(单位是毫秒))

OffsetX与OffsetY(单位px但不用写出来,大体位置定了以后进行微调,负OffsetX是往左移,负OffsetY是往上移)

HoverCssClass(鼠标划过后目标控件呈现样式的类)

分享到：

LINQ技术 | ASP.NET服务器控件

2010-09-04 15:59
浏览 3596
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论