本文旨在给大家开发自定义控件(结合js)一个思路,一个简单的示例,可能在实际项目中并不会这样做。
先来看看效果:
1.在静态页面里开发好想要的效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
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的控件点击时显示加载层
1
2
3
4
5
6
7
8
9
|
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方法,方便后台代码中调用。
如:
1
2
3
4
5
6
7
8
9
10
11
12
|
/// <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 );
}
}
|
总的来说自定义控件的开发不算复杂,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。