由圖標加文字實現按鈕功能的圖標按鈕用戶控件

2019-11-17 03:51:57

字體：大中小

來源：轉載

供稿：網友

圖標按鈕用戶控件的開發
出于如下常用操作：
---------------------
頁面有保存【圖標+按鈕】或【ImageButton】整體實現保存功能
點擊保存操作后
可先進行頁面相關欄位的js驗證
驗證通過后再進行后臺提交
可響應onmouSEOver等事件下的樣式變化

所開發的圖標按鈕用戶控件需至少滿足如下功能要求：
------------------------------------------
1、由圖標+文字組成
   圖標的路徑可修改為空是說明沒有圖標
   文字的顯示可修改

2、整體需響應和處理其所在頁面對“圖標按鈕”所設置 js的onclick事件
   如果沒有需處理的onclick事件則不處理

3、整體需響應和處理server的OnClick事件
   如果沒有需處理的OnClick事件則不處理

4、整體需響應Disabled
   Visible是控件自身就具有的

5、需響應onmouseover等事件下的樣式變化

下面簡單說明下方法

1、創建【圖標文字按鈕】用戶控件

   該控件包含如下部分:
   Table布局控制、
   動態輸出的Image的占位、
   動態輸出的文字的占位、
   觸發以響應OnClick事件的隱藏的按鈕

<table>
    <tr runat="server" id="tr1" style="cursor:hand;" >
        <td>
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        </td>
        <td>
            <asp:Literal ID="Literal2" runat="server"></asp:Literal>
        </td>
    </tr>
</table>
<asp:Button ID="Button1" runat="server" Text="Button" style="display:none; width:0; height:0;" OnClick="Button1_Click" />

可在table上加相關的onmouseover樣式處理

   包含如下相關屬性和處理

public partial class WebUserControl : System.Web.UI.UserControl
{
    #region 屬性及事件

    //圖標文字按鈕用戶控件的按鈕文字
    string _strButtonText = "按鈕占位";
    public string strButtonText
    {
        set { _strButtonText = value; }
        get { return _strButtonText; }
    }

    //圖標文字按鈕用戶控件的圖標路徑
    string _strImageSrc = "";
    public string strImageSrc
    {
        set { _strImageSrc = value; }
        get { return _strImageSrc; }
    }

    //控件的Disabled
    bool _UCDisabled = false;
    public bool UCDisabled
    {
        set
        {
            this.tr1.Disabled = value;
            _UCDisabled = value;
        }
        get { return _UCDisabled; }
    }

    //響應onclick的js事件的一個處理函數
    string _strOnClickJSFun = "";
    public string strOnClickJSFun
    {
        set { _strOnClickJSFun = value; }
        get { return _strOnClickJSFun; }
    }

    //響應Server端的OnClick事件
    public delegate void userEvent(object sender, EventArgs e);
    public event userEvent UCOnClick;
    PRotected void Button1_Click(object sender, EventArgs e)
    {
        if (this.UCOnClick != null)
            this.UCOnClick(this, e);
    }

    #endregion

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (_strButtonText != "")
            {
                this.Literal2.Text = _strButtonText;
            }

            if (_strImageSrc != "")
            {
                this.Literal1.Text = "<img id='" + this.UniqueID + "Image1' src='" + _strImageSrc + "' />";
            }

            if (UCDisabled)
                return;

            if (_strOnClickJSFun != "")
            {
                string strjsfun = _strOnClickJSFun.Replace(";", "").Replace("return ", "");
                if (this.UCOnClick != null)
                {
                    this.tr1.Attributes.Add("onclick", "if(" + strjsfun + "){document.all." + this.UniqueID + "_Button1.click();}");
                }
                else
                {
                    this.tr1.Attributes.Add("onclick", strjsfun);
                }
            }
            else
            {
                if (this.UCOnClick != null)
                {
                    this.tr1.Attributes.Add("onclick", "document.all." + this.UniqueID + "_Button1.click();");
                }
            }
        }
    }
}

2、使用該【圖標文字按鈕】用戶控件

<uc1:WebUserControl ID="WebUserControl1" runat="server" OnUCOnClick="Button1_Click" strOnClickJSFun="return fn_Check();"
     strButtonText="修改" strImageSrc="../Images/Edit.gif"  />

上一篇：創建自定義配置節

下一篇：個人管理－個人知識管理