HTML可爱提交按钮( 服务器控件)

分享于 

10分钟阅读

Web开发

  繁體 雙語

介绍

这篇文章是关于创建一个定制的submit提交按钮。 有很多情况下,你将发现需要使用这种控制。 如果创建一个具有特定主题的站点,则自然希望所有部件( 控件) 都使用相同的样式。 有时'提交'按钮不适合,不介意你在它上面应用任何样式。 这些情况对我来说非常常见,因这里我创建了一个服务器控件,而我使用的是常规。

我不会解释创建'用户网页控件'的基本知识,但只解释特定的部分。 下面是创建此类控件所需执行的步骤:

  • 创建一个web应用程序( 我使用 C# 作为实现语言)
  • 添加自定义网页控件
  • 编写必要的代码
  • 将控件置于容器中( 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 codeoverrideprotectedvoid OnInit( EventArgs e )
 {
 InitializeComponent();
 base.OnInit(e);
 }
 privatevoid 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>



希望你喜欢我的解决方案。


相关文章