本文旨在給大家開發(fā)自定義控件（結(jié)合js）一個(gè)思路，一個(gè)簡(jiǎn)單的示例，可能在實(shí)際項(xiàng)目中并不會(huì)這樣做。
先來看看效果：
1.在靜態(tài)頁面里開發(fā)好想要的效果
jQuery.extend({
openloading: function (options) {
var defaults = { msg: '數(shù)據(jù)提交中...', 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+"'>數(shù)據(jù)提交中.../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("獲取和設(shè)置觸發(fā)器ID"), DefaultValue(""), Browsable(true), Category("雜項(xiàng)")]
public string TargetID { get; set; }
重寫OnPreRender方法。方法中注冊(cè)js腳本，該腳本指示ID為TargetID的控件點(diǎn)擊時(shí)顯示加載層
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");注冊(cè)JQuery
Page.ClientScript.GetWebResourceUrl(this.GetType(), "BoControl.Images.loading.gif");是獲取Web資源文件路徑，如果你不想把圖片文件嵌入dll請(qǐng)改為真實(shí)路徑（如：Images/Loading.gif），相反你需要像下面一樣指明圖片文件和JQuery文件，并且圖片屬性-生成操作為：嵌入的資源
[assembly: WebResource("BoControl.Images.loading.gif", "image/gif")]//這里你還需注冊(cè)JQuery
namespace BoControl
{
你還需要寫Open方法和Close方法，方便后臺(tái)代碼中調(diào)用。
如：
/// summary>
/// 打開加載動(dòng)畫
/// UpdatePanel注冊(cè)
/// /summary>
/// param name="panel">UpdatePanel對(duì)象/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);
}
}
總的來說自定義控件的開發(fā)不算復(fù)雜，以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- asp.net自定義控件代碼學(xué)習(xí)筆記
- asp.net 自定義控件實(shí)現(xiàn)無刷新上傳圖片,立即顯示縮略圖,保存圖片縮略圖
- Asp.net 動(dòng)態(tài)加載用戶自定義控件,并轉(zhuǎn)換成HTML代碼
- asp.net DropDownList自定義控件，讓你的分類更清晰
- asp.net中使用自定義控件的方式實(shí)現(xiàn)一個(gè)分頁控件的代碼
- asp.net自定義控件回發(fā)數(shù)據(jù)實(shí)現(xiàn)方案與代碼
- Asp.net清空控件值的方法(可自定義控件類型)
- asp.net自定義控件中注冊(cè)Javascript問題解決方案
- 淺談ASP.NET中最簡(jiǎn)單的自定義控件
- asp.net動(dòng)態(tài)加載自定義控件的方法
