HTML 可爱提交按钮（服务器控件）
2.00/5 (5投票s)
2002年8月8日
1分钟阅读
133770
846
创建一个外观精美的自定义提交按钮。
引言
本文介绍如何创建一个外观精美的自定义提交按钮。在很多情况下，您会发现使用这种控件是必要的。如果您创建一个具有特定主题的网站，那么自然希望所有部分（控件）都使用相同的样式。有时，常规的“提交”按钮不合适，即使您对其应用任何样式也是如此。这些情况经常发生在我身上，所以我创建了一个服务器控件，代替了常规的按钮。
我不会解释创建“用户Web控件”的基础知识，而只会介绍具体的步骤。以下是您需要采取的步骤：
- 创建一个Web应用程序（我使用C#作为实现语言）
- 添加自定义Web控件
- 编写必要的代码
- 将控件放入容器（Web表单）
解释
- 创建Web应用程序 – 创建Web应用程序并非必要。我创建它只是为了调试目的。您可以在没有应用程序的情况下创建控件。
- 添加自定义Web控件 - 如果您跳过创建Web应用程序，那么您不需要进行“添加”，而是创建一个Web控件项目。
- 编写必要的代码 – 由于代码非常简单，我不会对其进行强调。
namespace CSBApplication { using System; using System.Data; using System.Drawing; using System.Web; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System.Web.UI; public abstract class CuteSubmitButton : System.Web.UI.UserControl { private string m_title = " "; private string m_formName = ""; private string m_action = ""; private string m_status = "enabled"; private string m_imagesPath = ""; private string m_linkStyleClass = ""; private int m_tabIndex = -1; private string m_enabledHelpTitle = ""; private string m_disabledHelpTitle = ""; private static bool m_ShowScript = true; /****************************************************/ /* properties needed for configuration */ /****************************************************/ public string Title { get { return m_title; } set { m_title = value; } } public string FormName { get { return m_formName; } set { m_formName = value; } } public string Action { get { return m_action; } set { m_action = value; } } public string Status { get { return m_status; } set { m_status = value; } } public string ImagesPath { get { return m_imagesPath; } set { m_imagesPath = value; } } public string LinkStyleClass { get { return m_linkStyleClass; } set { m_linkStyleClass = value; } } public int TabIndex { get { return m_tabIndex; } set { m_tabIndex = value; } } public string EnabledHelpTitle { get { return m_enabledHelpTitle; } set { m_enabledHelpTitle = value; } } public string DisabledHelpTitle { get { return m_disabledHelpTitle; } set { m_disabledHelpTitle = value; } } /****************************************************/ private void Page_Load( object sender, System.EventArgs e ) { m_ShowScript = true; } /****************************************************/ protected override void Render( HtmlTextWriter output ) { if( m_ShowScript ) this.Page.Response.Write( getScript() ); // submit button status check string html; if( m_status.ToLower().CompareTo( "disabled" ) != 0 ) html = getEnabledHTML(); else html = getDisabledHTML(); this.Page.Response.Write( html ); m_ShowScript = false; } /****************************************************/ private string getScript() { string script = "\n<script lang=JavaScript>\n"; script += "function submitForm( form , action )\n"; script += "{\n"; script += " form.action = action;\n"; script += " form.submit()\n"; script += "}\n"; script += "</script>\n"; return script; } /****************************************************/ /* warning IMG tags are placed into */ /* 'just for correct viewing */ /****************************************************/ private string getEnabledHTML() { string TabIndex = ""; string HelpTitle = ""; string LinkClass = ""; string ImagesPath = m_imagesPath + "/"; ImagesPath += "enabled/"; HelpTitle = "title='" + m_enabledHelpTitle + "'"; if( m_linkStyleClass.Length != 0 ) LinkClass = "class='" + m_linkStyleClass + "'"; if( m_tabIndex != -1 ) TabIndex = "tabindex='" + m_tabIndex + "'"; string html = "\n<TABLE align='center' cellspacing='0' cellpadding='0' border='0'>\n"; html += "<TR>\n"; html += " <TD nowrap><'IMG' border='0' src='" + ImagesPath + "left.gif'></TD>\n"; html += " <TD nowrap border='0' background='" + ImagesPath + "middle.gif'><A " + LinkClass + " " + TabIndex + " href='javascript:submitForm( document." + m_formName + " , \"" + m_action + "\" )' " + HelpTitle +"> " + m_title + " </A></TD>\n"; html += " <TD nowrap><'IMG' border='0' src='" + ImagesPath + "right.gif'></TD>\n"; html += "</TR>\n"; html += "</TABLE>\n"; return html; } /****************************************************/ /* warning IMG tags are placed into */ /* 'just for correct viewing */ /****************************************************/ private string getDisabledHTML() { string TabIndex = ""; string HelpTitle = "title='" + m_enabledHelpTitle + "'"; string LinkClass = ""; string ImagesPath = m_imagesPath + "/disabled/"; if( m_linkStyleClass.Length != 0 ) LinkClass = "class='" + m_linkStyleClass + "'"; if( m_tabIndex != -1 ) TabIndex = "tabindex='" + m_tabIndex + "'"; string html = "\n<TABLE align='center' cellspacing='0' cellpadding='0' border='0'>\n"; html += "<TR>\n"; html += " <TD nowrap><'IMG' border='0' src='" + ImagesPath + "left.gif'></TD>\n"; html += " <TD nowrap border='0' background='" + ImagesPath + "middle.gif' " + LinkClass + " " + TabIndex + " " + HelpTitle +"> " + m_title + " </TD>\n"; html += " <TD nowrap><'IMG' border='0' src='" + ImagesPath + "right.gif'></TD>\n"; html += "</TR>\n"; html += "</TABLE>\n"; return html; } #region Web Form Designer generated code override protected void OnInit( EventArgs e ) { InitializeComponent(); base.OnInit(e); } private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion } }
- 将控件放入容器。以下是要放入容器的代码
<%@ Register TagPrefix="uc1" TagName="CuteSubmitButton" Src="CuteSubmitButton.ascx" %> <uc1:CuteSubmitButton id="CuteSubmitButton1" Title="enabled button" Action="CSBTestWebForm.aspx" ImagesPath="images" Status="enabled" LinkStyleClass="cutesubmitbutton" EnabledHelpTitle="This button is enabled." FormName="CSBForm" runat="server"> </uc1:CuteSubmitButton>或
<uc1:CuteSubmitButton id=CuteSubmitButton2 title="disabled button" runat="server" FormName="CSBForm" Status="disabled" ImagesPath="images" Action="CSBTestWebForm.aspx" EnabledHelpTitle="This button is disabled." LinkStyleClass="cutesubmitbutton"> </uc1:CuteSubmitButton>您应该定义CSS类
cutesubmitbutton。例如<STYLE> .cutesubmitbutton { FONT: 12px Verdana,Arial,Helvetica,Sans Serif; COLOR: #003366; TEXT-DECORATION: none } </STYLE>
希望您喜欢我的解决方案。