Asp.net自定义控件中加载层的示例分析

发布时间:2021-09-16 17:02:00 作者:小新
来源:亿速云 阅读:136

这篇文章主要介绍了Asp.net自定义控件中加载层的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

 先来看看效果:

Asp.net自定义控件中加载层的示例分析 

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);
      }
    }

感谢你能够认真阅读完这篇文章,希望小编分享的“Asp.net自定义控件中加载层的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. CommonJS中模块加载的示例分析
  2. JavaScript拖动层Div的示例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

asp.net

上一篇:UML类图的用途及创建方法

下一篇:ABP框架中事务处理和工作单元的示例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》