Asp.Net Web控件 （二）（无间隙滚动控件）

这次的js脚本来源于 崔永祥 编写的通用不间断滚动JS封装类。
还是先上效果：
html代码如下：

设计时如下:

只要把所需滚动的代码拖放到该控件内就可以了。

现在设置的是向上滚动，高度为100px,宽度为当前浏览器窗口的宽。

再看一下预览效果，就可以实现滚动了：


下面来讲述控件的编码过程。
这次我们来继承WebControl类，这样方便一些。
[ParseChildren(false)] [ToolboxData("{0}:MarqueeControl runat=server/{0}:MarqueeControl")] public class MarqueeControl : WebControl


这里要讲一下ParseChildren这个特性，

ParseChildren(false)，表示放在此控件内的元素将被解析成控件。
ParseChildren(true)，表示放在此控件内的元素将被解析成属性 (Property)。

构造函数： public MarqueeControl() : base(HtmlTextWriterTag.Div) { }
使生成的html标签是div。

新增的属性如下：
[Description("滚动方向 (默认为 向上滚动)")] [TypeConverter(typeof(DirectionType))] public DirectionType Direction

[Description("滚动的步长 (默认值为2,数值越大,滚动越快)")] public int Step

[Description("定时器 (默认值为50,数值越小,滚动的速度越快,1000=1秒,建议不小于20)")] public int Timer

[Description("间歇停顿延迟时间 (默认为0不停顿,1000=1秒)")] public int DelayTime

[Description("开始时的等待时间 (默认或0为不等待,1000=1秒)")] public int WaitTime

[Description("间歇滚动间距 (默认为50, -1禁止鼠标控制)")] public int ScrollStep

[Description("客户端名称 默认为ClientID")] public string ClientInstanceName

[Description("客户端自定义脚本")] public string ClientScript


这里就不一一介绍啦，选几个吧。

Direction设计时属性对话框中如下：

变为可选择的项，
是通过[TypeConverter(typeof(DirectionType))] 来实现的.

DirectionType是一个枚举:
public enum DirectionType { /// summary /// 下上滚动 /// /summary Top = 0, /// summary /// 向下滚动 /// /summary Bottom = 1, /// summary /// 向左滚动 /// /summary Left = 2, /// summary /// 向右滚动 /// /summary Right = 3 }

ClientInstanceName是生成脚本的构造出来的Marquee实例，例如：var marq=new Marquee(id);
ClientScript为在开启滚动之前的脚本，可自行编写。

接下来就是输出脚本的代码，内嵌的控件代码则会自动输出的，不需要做处理。
protected override void OnPreRender(EventArgs e) { if (!Page.ClientScript.IsClientScriptIncludeRegistered("MarqueeControlJS")) Page.ClientScript.RegisterClientScriptInclude("MarqueeControlJS", Page.ClientScript.GetWebResourceUrl(this.GetType(), "Hxj.Web.UI.js.marquee.js")); string clientName = this.ClientInstanceName; StringBuilder script = new StringBuilder(); script.AppendLine(); script.Append("var "); script.Append(clientName); script.Append("=new Marquee(\""); script.Append(this.ClientID); script.Append("\","); script.Append(this.Direction.GetHashCode().ToString()); script.Append(","); script.Append(this.Step.ToString()); script.AppendLine(");"); if (this.Width.Type == UnitType.Pixel) { script.Append(clientName); script.Append(".Width="); script.Append(this.Width.Value.ToString()); script.Append(";"); } if (this.Height.Type == UnitType.Pixel) { script.Append(clientName); script.Append(".Height="); script.Append(this.Height.Value.ToString()); script.Append(";"); } script.Append(clientName); script.Append(".Timer="); script.Append(this.Timer.ToString()); script.Append(";"); script.Append(clientName); script.Append(".DelayTime="); script.Append(this.DelayTime.ToString()); script.Append(";"); script.Append(clientName); script.Append(".WaitTime="); script.Append(this.WaitTime.ToString()); script.Append(";"); script.Append(clientName); script.Append(".ScrollStep="); script.Append(this.ScrollStep.ToString()); script.AppendLine(";"); if (!string.IsNullOrEmpty(ClientScript)) { script.AppendLine(ClientScript); } script.Append(clientName); script.AppendLine(".Start();"); if (!this.Page.ClientScript.IsStartupScriptRegistered("MarqueeControlStartscript" + this.ClientID)) this.Page.ClientScript.RegisterStartupScript(typeof(string), "MarqueeControlStartscript" + this.ClientID, script.ToString(), true); base.OnPreRender(e); }

也可根据自己的需求在客户端用js改变滚动的效果。

这样一个无间隙滚动控件就编写完成了。

下载