图标按钮用户控件的开发
出于如下常用操作：
---------------------
页面有 保存【图标+按钮】或【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" />