您可以创建这使得控制的javascript:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
namespace WebApplication1
{
[DefaultProperty("EffectType"), ToolboxData("<{0}:jQueryAnimation runat=server></{0}:jQueryAnimation>")]
public class jQueryAnimation : System.Web.UI.WebControls.WebControl
{
private const string SCRIPT_KEY = "jQueryAnimation";
[Bindable(true), Category("Appearance"), DefaultValue("Bounce")]
public string EffectType { get; set; }
public string ControlId { get; set; }
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
RegisterAnimationScript();
}
protected override void RenderContents(HtmlTextWriter writer)
{
base.RenderContents(writer);
}
private void RegisterAnimationScript()
{
if (!Page.ClientScript.IsClientScriptBlockRegistered(SCRIPT_KEY))
{
StringBuilder script = new StringBuilder();
script.Append("<script type='text/javascript'>");
script.Append(Environment.NewLine);
script.Append("$(document).ready(function() {");
script.Append(Environment.NewLine);
script.Append("var options = {};");
script.Append(Environment.NewLine);
script.Append("$('#");
script.Append(this.ControlId);
script.Append("').effect('");
script.Append(this.EffectType);
script.Append("', options, 1500, ");
script.Append(this.ControlId);
script.Append("_callback);");
script.Append(Environment.NewLine);
script.Append("function ");
script.Append(this.ControlId);
script.Append("_callback() {");
script.Append(Environment.NewLine);
script.Append("setTimeout(function() {");
script.Append("$('#");
script.Append(this.ControlId);
script.Append("').removeAttr('style').hide().fadeIn();");
script.Append("}, 1000);};");
script.Append(Environment.NewLine);
script.Append("});");
script.Append(Environment.NewLine);
script.Append("</script>");
Page.ClientScript.RegisterClientScriptBlock(Page.GetType(),SCRIPT_KEY,script.ToString());
}
}
}
}
我已经定义的属性EffectType这是您要执行的效果名称; ControlId是您想要制作动画的HTML元素的ID。
RegisterAnimationScript输出javascript来执行动画。 在你的ASPX,你必须注册控件
<%@ Register assembly="WebApplication1" namespace="WebApplication1" tagprefix="cc1" %>
然后放下你的控制(它应该出现在你的工具箱)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="test" style="width:100px;height:100px;background-color:Red"> </div>
<cc1:jQueryAnimation ID="jQueryAnimation1" runat="server" EffectType="Shake" ControlId="test"></cc1:jQueryAnimation>
</div>
</form>
</body>
</html>
这里,我结合我塞雷尔语控制jQueryAnimation到div测试(ControlId="test"
),我已经定义了我想要应用的效果(EffectType="Shake"
)。
虽然在C#中管理JavaScript并不是很容易,但是;-)