VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > ASPnet >
  • Asp.Net Web控件 (二)(无间隙滚动控件)

这次的js脚本来源于 崔永祥 编写的通用不间断滚动JS封装类。

还是先上效果:

html代码如下:

image

设计时如下:

	image
	
只要把所需滚动的代码拖放到该控件内就可以了。
 
现在设置的是向上滚动,高度为100px,宽度为当前浏览器窗口的宽。
 
再看一下预览效果,就可以实现滚动了:

	image
	
 
下面来讲述控件的编码过程。
这次我们来继承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设计时属性对话框中如下:

image

变为可选择的项,

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

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

 

下载

 


作者:steven hu
出处:http://www.cnblogs.com/huxj


相关教程