WEB开发网
开发学院WEB开发ASP 由 图标 加 文字 实现 按钮功能 的 图标按钮用户控... 阅读

由 图标 加 文字 实现 按钮功能 的 图标按钮用户控件

 2010-01-21 10:44:32 来源:WEB开发网   
核心提示:图标按钮用户控件的开发出于如下常用操作:-页面有 保存【图标+按钮】或【ImageButton】 整体实现保存功能点击保存操作后 可先进行页面相关栏位的js验证 验证通过后再进行后台提交可响应onmouSEOver等事件下的样式变化所开发的图标按钮用户控件 需至少满足如下功能要求:--1、由图标+文字组成 图标的路径可
图标按钮用户控件的开发
出于如下常用操作:
---------------------
页面有 保存【图标+按钮】或【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=http://www.cncms.com/".Images/Edit.gif" />

Tags:图标 文字 实现

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接