AnimationExtender AJAX Control
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”DotNetSpider.aspx.cs” Inherits=”DotNetSpider” %>
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”asp” %>
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit.HTMLEditor” TagPrefix=”asp” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”asp” %>
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit.HTMLEditor” TagPrefix=”asp” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<style type=”text/css”>
.flyOutDiv{
display: none;
position: absolute;
width: 250px;
z-index: 3;
opacity: 0;
filter:(progid:DXImageTransform.Microsoft.Alpha(opacity=0));
font-size: 14px;
border: solid 1px #CCCCCC;
background-color: #FFFFFF;
padding: 5px;
}
.flyOutDivCloseX{
background-color: #666666;
color: #FFFFFF;
text-align: center;
font-weight: bold;
text-decoration: none;
border: outset thin #FFFFFF;
padding: 5px;
}
</style>
</style>
<script language=”javascript” type=”text/javascript” src=”JQuery/jquery-1.4.1.js”></script>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”></asp:ScriptManager>
<asp:LinkButton ID=”lnkBtnColHelp” runat=”server” Text=”Click Here” OnClientClick=”return false;” />
<div id=”moveMe”>
<div style=”float:right;”>
<asp:LinkButton ID=”lnkBtnCloseColHelp” runat=”server” Text=”X” OnClientClick=”return false;” CssClass=”flyOutDivCloseX” />
</div><br />
some content here for whatever text
</div>
<asp:AnimationExtender ID=”AnimationExtender1″ runat=”server” TargetControlID=”lnkBtnColHelp”>
<Animations>
<OnMouseOver>
<Sequence>
<EnableAction Enabled=”false”></EnableAction>
<StyleAction AnimationTarget=”moveMe” Attribute=”display” Value=”block”/>
<Parallel AnimationTarget=”moveMe” Duration=”.5″ Fps=”100″>
<FadeIn Duration=”.5″/>
</Parallel>
<Parallel AnimationTarget=”moveMe”>
<Color PropertyKey=”color” StartValue=”#FF0000″ EndValue=”#FF0000″ />
<Color PropertyKey=”borderColor” StartValue=”#FF0000″ EndValue=”#FF0000″ />
</Parallel>
</Sequence>
</OnMouseOver>
</Animations>
</asp:AnimationExtender>
<asp:AnimationExtender ID=”AnimationExtender2″ runat=”server” TargetControlID=”lnkBtnCloseColHelp”>
<Animations>
<OnClick>
<Sequence AnimationTarget=”moveMe”>
<Parallel AnimationTarget=”moveMe” Duration=”.7″ Fps=”20″>
<Move Horizontal=”0″ Vertical=”0″></Move>
<Scale ScaleFactor=”0.05″ FontUnit=”px” />
<Color PropertyKey=”color” StartValue=”#FF0000″ EndValue=”#666666″ />
<Color PropertyKey=”borderColor” StartValue=”#FF0000″ EndValue=”#666666″ />
<FadeOut />
</Parallel>
<StyleAction Attribute=”display” Value=”none”/>
<StyleAction Attribute=”height” Value=”"/>
<StyleAction Attribute=”width” Value=”250px”/>
<StyleAction Attribute=”fontSize” Value=”14px”/>
<EnableAction AnimationTarget=”lnkBtnColHelp” Enabled=”true” />
</Sequence>
</OnClick>
</Animations>
</asp:AnimationExtender>
</form>
</body>
</html>
Comments
Post a Comment