#眉標=AJAX
#副標=AJAX網頁開發利器（8）
#大標=開發AJAX控制項
#作者=文／圖	王寧疆


==<灰>===========
[TargetControlType(typeof(Control))]
==<end>==============




==<灰>===========
[TargetControlType(typeof(TextBox))]
==<end>==============




==<灰>===========
[ExtenderControlProperty]
public string DisabledText 
{ 
    get 
    {
        return GetPropertyValue("DisabledText", ""); 	//取得DisabledText屬性的內容值
    }
    set 
    { 
        SetPropertyValue("DisabledText", value);		//設定DisabledText屬性的內容值
    }
}
==<end>==============




==<灰>===========
this._TargetButtonIDValue = null;
==<end>==============




==<灰>===========
this._DisabledTextValue = null;		//設定DisabledText屬性的初值
==<end>==============




==<灰>===========
get_TargetButtonID : function() 
{
    return this._TargetButtonIDValue; 	//取得TargetButtonID屬性的內容值
},
set_TargetButtonID : function(value) 
{
    this._TargetButtonIDValue = value;	//設定TargetButtonID屬性的內容值
}
==<end>==============




==<灰>===========
get_DisabledText : function() 
{
    return this._DisabledTextValue;	//取得_DisabledTextValue屬性的內容值
},
set_DisabledText : function(value) 
{
    this._DisabledTextValue = value;	//設定_DisabledTextValue屬性的內容值
},
==<end>==============




==<灰>===========
[IDReferenceProperty(typeof(Button))]
==<end>==============




==<灰>===========
[ExtenderControlProperty]
[DefaultValue("")]
[IDReferenceProperty(typeof(Button))]
public string TargetButtonID
{
    get
    {
        return GetPropertyValue("TargetButtonID", "");			//取得_ TargetButtonID屬性的內容值
    }
    set
    {
        SetPropertyValue("TargetButtonID", value);			//設定_ TargetButtonID屬性的內容值
    }
}
==<end>==============




==<box>===========
程式1
_onkeyup : function()
{
    var e = $get(this._TargetButtonIDValue);					//取得TargetButtonID屬性的內容值
    if (e) 										//判斷是否有設定TargetButtonID屬性
    {
        var disabled = ("" == this.get_element().value);	//判斷所控制的Button控制項是否處於禁用狀態
        e.disabled = disabled;								//設定Button控制項為禁用狀態
        if (this._DisabledTextValue) 						//判斷是否有設定DisabledText屬性
        {
            if (disabled) 							//判斷Button控制項是否處於禁用狀態
      {
                this._oldValue = e.value;		    //將目前Button控制項的文字存放到_oldValue變數中
                e.value = this._DisabledTextValue;  	//將目前Button控制項的文字設定成到DisabledText
     //屬性的內容值
            } 
      else 
      {
                if (this._oldValue) 		//判斷_oldValue變數是否有存放Button控制項原先顯示的文字
     {
                    e.value = this._oldValue;//將_oldValue變數的內容值設定成Button控制項顯示的文字
                }
            }
        }
    }
},
==<end>==============




==<灰>===========
initialize : function() 
{
    DisableButton.DisableButtonBehavior.callBaseMethod(this, 'initialize');	//呼叫父類別的initialize函數
    // TODO: add your initalization code here
    $addHandler(this.get_element(), 'keyup', 
     Function.createDelegate(this, this._onkeyup));			//設定處理按鍵放開的事件處理函數
    this._onkeyup();											//呼叫_onkeyup函數
},
==<end>==============





==<灰>===========
dispose : function() 
{
    // TODO: add your cleanup code here
    if (this._onkeyup)						//判斷是否有指定處理按鍵放開的事件處理函數
    {
        $removeHandler(this._targetElement, 'keyup', this._onkeyup);	//解除處理按鍵放開的事件處理函數
        this._onkeyup = null;							//將_onkeyup變數的內容設定為null
    }
    DisableButton.DisableButtonBehavior.callBaseMethod(this, 'dispose');	//呼叫父類別的dispose函數
},
==<end>==============




==<灰>===========
<cc1:DisableButtonExtender ID="DisableButtonExtender1" runat="server" DisabledText="請輸入資料" 
     TargetControlID="txtID" TargetButtonID="btnSubmit">
</cc1:DisableButtonExtender>
==<end>==============



==<box>===========
要訣
如果讀者找不到合適的動畫圖示來代表動作執行中的狀態，可以到以下的網站尋找。這些是好心人士提供的網站，提供的琳瑯滿目的動畫圖示，特別是第二個超連結還提供客製動畫圖示的功能，可以依據你的選擇產生所需要的動畫圖示，直到產生好網頁需要的動畫圖示效果之後再下載到我們的電腦中，並加到專案中使用。大家在取得所需要的動畫圖示之後，記得感謝這些網站提供者的大德。
• http://www.napyfab.com/ajax-indicators 
• http://www.ajaxload.info 
• http://mentalized.net/activity-indicators 
==<end>==============




==<灰>===========
using System.Threading;
==<end>==============




==<灰>===========
protected void btnSubmit_Click1(object sender, EventArgs e)
{
    Thread.Sleep(5000);		//產生5秒鐘的延遲
}
==<end>==============




==<灰>===========
<cc1:UpdateProgressOverlayExtender ID="UpdateProgressOverlayExtender1" runat="server" 
     CssClass="updateProgress" ControlToOverlayID="TextBox1" TargetControlID="UpdateProgress1" />
==<end>==============




==<box>===========
相關資訊
1. Context-Sensitive Help：http://www.notesoncode.com/articles/2007/06/building-a-custom-ajax-control-extender/
2. UpdatePanelPopupExtender：http://weblogs.asp.net/rajbk/archive/2007/01/24/inserting-and-deleting-with-the-ajax-updatepanelpopupextender.aspx
3. The GridView Row Drag Overlay Extender：http://weblogs.asp.net/rajbk/archive/2007/06/13/the-gridview-row-drag-overlay-extender.aspx
4. UpdateProgressOverlayExtender：http://weblogs.asp.net/rajbk/archive/2007/01/08/using-the-updateprogress-control-as-a-modal-overlay.aspx
==<end>==============