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改变滚动的效果。

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

 

下载