按钮控件

Jquery 的圆角控件.权当练习吧.

 

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using MyCmn;
using System.Web.UI.HtmlControls;
using System.Web.UI.Design;
using System.Drawing;

namespace WebCon.MySimple
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:MyButton runat=server></{0}:MyButton>")]
    [Designer(typeof(ContainerControlDesigner)),ParseChildren(false)]
    public class MyButton : CompositeControl,INamingContainer
    {
        protected override HtmlTextWriterTag TagKey
        {
            get
            {
                return HtmlTextWriterTag.Div;
            }
        }

        protected Button TheButton = new Button();

 
        public Color MouseOverBackColor
        {
            get
            {
                return CmnProc.ToColor( ViewState["MouseOverBackColor"].GetString(Color.Blue.ToHexColorString()) );
            }
            set
            {
                ViewState["MouseOverBackColor"] = value.ToHexColorString();
            }
        }

        public override Color BackColor
        {
            get
            {
                return base.BackColor.IsEmpty ? CmnProc.ToColor("#2e3d52") : base.BackColor;
            }
            set
            {
                base.BackColor = value;
            }
        }


        public Color MouseOverInnerColor
        {
            get
            {
                return CmnProc.ToColor( ViewState["MouseOverInnerColor"].GetString(this.InnerColor.ToHexColorString() ) );
            }
            set
            {
                ViewState["MouseOverInnerColor"] = value.ToHexColorString();
            }
        }

        public Color InnerColor
        {
            get
            {
                return CmnProc.ToColor( ViewState["InnerColor"].GetString("#5A738C") );
            }
            set
            {
                ViewState["InnerColor"] = value.ToHexColorString();
            }
        }

        public int InnerPdding
        {
            get
            {
                return ViewState["BasePdding"].GetInt(2);
            }
            set
            {
                ViewState["BasePdding"] = value;
            }
        }

        public int OuterCornerRadii
        {
            get
            {
                return ViewState["OuterCornerRadii"].GetInt(5);
            }
            set
            {
                ViewState["OuterCornerRadii"] = value;
            }
        }

        public int InnerCornerRadii
        {
            get
            {
                return ViewState["InnerCornerRadii"].GetInt(5);
            }
            set
            {
                ViewState["InnerCornerRadii"] = value;
            }
        }


        public override void RenderBeginTag(HtmlTextWriter writer)
        {
            base.RenderBeginTag(writer);
            writer.Write(string.Format(@"<div style=""width:100%;height:100%;"" id=""{0}_Inner"">"
                , this.ClientID
                ));
        }

        public override void RenderEndTag(HtmlTextWriter writer)
        {
            writer.Write("</div>");
            base.RenderEndTag(writer);

            (this.Page as WebConPage ).RegisterStartup(this.ClientID +"_corner",string.Format(
@" $(""#{0}_Inner"").css(""background-color"",""{6}"").corner(""{1}px"").parent().css(""background-color"",""{7}"").css(""padding"",""{3}px"").corner(""{2}px"") ;
$(""#{0}_Inner"").mouseover(function(){{$(this).css(""background-color"",""{4}"") ;}}) ;
$(""#{0}_Inner"").parent().mouseover(function(){{$(this).css(""background-color"",""{5}"") ;}}) ;
$(""#{0}_Inner"").mouseout(function(){{$(this).css(""background-color"",""{6}"") ;}}) ;
$(""#{0}_Inner"").parent().mouseout(function(){{$(this).css(""background-color"",""{7}"") ;}}) ;
$(""#{0}_Inner"").parent().bind(""click"",function(){{$(""#{8}"" ).trigger(""click"")  ;}} ) ;"
                , this.ClientID
                , this.InnerCornerRadii
                , this.OuterCornerRadii
                , this.InnerPdding
                , this.MouseOverInnerColor.ToHexColorString()
                , this.MouseOverBackColor.ToHexColorString()
                , this.InnerColor.ToHexColorString()
                , this.BackColor.ToHexColorString()
                , this.TheButton.ClientID
                ) , true);
        }

        protected override void CreateChildControls()
        {
            TheButton.ID = "btnOK";
            TheButton.Style[ HtmlTextWriterStyle.Display ] = "none" ;


            this.Controls.Add(TheButton);
            base.CreateChildControls();
            ChildControlsCreated = true;
        }

        private static readonly object ClickEvent = new object();

        public event EventHandler Click
        {
            add
            {
                Events.AddHandler(ClickEvent, value);
            }
            remove
            {
                Events.RemoveHandler(ClickEvent, value);
            }
        }

        public string Text
        {
            get
            {
                return this.TheButton.Text;
            }
            set
            {
                this.TheButton.Text = value;
            }
        }

        protected virtual void OnClick(EventArgs args)
        {
            EventHandler handler = Events[ClickEvent] as EventHandler;
            if (handler != null)
                handler(this, args);
        }

        protected override bool OnBubbleEvent(object source, EventArgs args)
        {
            bool handled = false;

            CommandEventArgs ce = args as CommandEventArgs;
            if (source is Button && source == TheButton)
            {
                OnClick(args);

                handled = true;
            }
            return handled;
        }
    }
}

 

后来, 发现,其实按钮的多种效果, 最直接最简单的方式是  ImageButton .  要设置动态样式, 只要加上两个属性就可以了.这种方式也不复杂嘛.

 

 

        <asp:ImageButton ID="imgBtn" runat="server" ImageUrl="~/Img/yhdl-1.gif" onmouseover="javascript:this.src='../Img/about.jpg';"
            onmouseout="javascript:this.src='../Img/yhdl-1.gif';" />