Asp.net自定义控件之加载层

本文旨在给大家开发自定义控件（结合js）一个思路，一个简单的示例，可能在实际项目中并不会这样做。
先来看看效果：

1.在静态页面里开发好想要的效果

jQuery.extend（{openloading: function （options） {var defaults = { msg: "数据提交中...", img: "loading.gif" };var opts = $.extend（defaults, options）;$（"body"）.append（"<div class="l_overlay" style="position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;padding:0 20px 0 0;background-color:gray;display:none;"></div><div class="l_showbox" style="position:fixed;top:0;left:50%;z-index:1001;opacity:0;filter:alpha（opacity=0）;margin-left:-80px;border:1px solid gray;font-size:12px;font-weight:bold;"><div class="loadingWord" style="width:122px;height:38px;line-height:38px;border:2px solid #D6E7F2;background:#fff;"><img style="margin:10px 8px 10px 8px;float:left;display:inline;" src=""+opts.img+"">数据提交中...</div></div>"）;var h = $（document）.height（）;$（".l_overlay"）.css（{ "height": h, "display": "block", "opacity": "0.4" }）;$（".l_showbox"）.stop（true）.animate（{ "margin-top": （h / 2 - 58） + "px", "opacity": "1" }, 200）;},closeloading: function （） {$（".l_showbox"）.stop（true）.animate（{ "margin-top": "250px", "opacity": "0" }, 400）;$（".l_overlay"）.css（{ "display": "none", "opacity": "0" }）;$（".l_overlay"）.remove（）;$（".l_showbox"）.remove（）;}}）;

2.vs新建类库，新建类继承于WebControl
添加属性：
[Description（"获取和设置触发器ID"）, DefaultValue（""）, Browsable（true）, Category（"杂项"）]
public string TargetID { get; set; }
重写OnPreRender方法。方法中注册js脚本，该脚本指示ID为TargetID的控件点击时显示加载层

protected override void OnPreRender（EventArgs e）{if （Page ！= null && ！string.IsNullOrEmpty（TargetID））{ TargetID = GetClientID（TargetID）;Page.ClientScript.RegisterClientScriptResource（typeof（Loading）, "BoControl.Scripts.Jquery.js"）;this.Page.ClientScript.RegisterStartupScript（typeof（string）, "BoControl_" + this.ClientID, "$（"#" + TargetID + ""）.on（"click",function（）{$.openloading（{msg:"" + Text + "", img: "" +Page.ClientScript.GetWebResourceUrl（this.GetType（）, "BoControl.Images.loading.gif"）+ ""}）;}）;", true）; } base.OnPreRender（e）; }

OnPreRender方法中
Page.ClientScript.RegisterClientScriptResource（typeof（Loading）, "BoControl.Scripts.Jquery.js"）;注册JQuery
Page.ClientScript.GetWebResourceUrl（this.GetType（）, "BoControl.Images.loading.gif"）;是获取Web资源文件路径，如果你不想把图片文件嵌入dll请改为真实路径（如：Images/Loading.gif），相反你需要像下面一样指明图片文件和JQuery文件，并且图片属性-生成操作为：嵌入的资源
[assembly: WebResource（"BoControl.Images.loading.gif", "image/gif"）]//这里你还需注册JQuery
namespace BoControl
{
你还需要写Open方法和Close方法，方便后台代码中调用。
如：

/// <summary>/// 打开加载动画/// UpdatePanel注册/// </summary>/// <param name="panel">UpdatePanel对象</param>public void Open（UpdatePanel panel）{if （Page ！= null）{ScriptManager.RegisterStartupScript（panel, panel.GetType（）, "openloading", "$.openloading（{msg:"" + Text + "", img: "" + Page.ClientScript.GetWebResourceUrl（this.GetType（）, "BoControl.Images.loading.gif"）; + ""}）;", true）;}}

总的来说自定义控件的开发不算复杂，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。