一个简单的折叠按钮控件

    折叠按钮控件 可以方便的隐藏和显示指定区域的内容.mojopotral中就有个简单的实现.
效果如图:

点击图标后变成

两种状态相互切换.
页面代码:

<cc1:CollapseLinkButton ID="CollapseLinkButton1" runat="server" CollapseImageUrl="images/minus.gif"
            CollapseText="收缩" ControlToCollapse="Panel1" ExpandImageUrl="images/plus.gif"
            ExpandText="展开" StartCollapsed="False" /> 信息
        
        <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
            信息的具体内容<br />
            信息的具体内容<br />
            信息的具体内容<br />
            信息的具体内容<br />
            信息的具体内容<br />
        </asp:Panel>

控件代码:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.ComponentModel;
using System.IO;
using System.Text;
using System.Globalization;
using System.Text.RegularExpressions;

namespace Jec.CustomControls
{
    /// <summary>
    ///        Author:                Joe Audette
    ///        Created:            7/30/2006
    ///        Last Modified:        7/30/2006
    ///        
    /// </summary>
    public class CollapseLinkButton : WebControl, INamingContainer
    {
        #region Control Declarations

        protected HtmlImage imgToggle;
        protected HtmlAnchor lnkToggle;

        #endregion

        #region Constructors

        public CollapseLinkButton()
        {
            EnsureChildControls();
        }

        #endregion

        #region Public Properties
        [Bindable(true)]
        [Category("Jec")]
        [DefaultValue("")]
        [Localizable(true)]
        [Description("需要折叠的控件")]
        public string ControlToCollapse
        {
            get
            {
                object obj = ViewState["ControlToCollapse"];
                return (obj != null) ? (string)obj : string.Empty;
            }
            set
            {
                ViewState["ControlToCollapse"] = value;
            }
        }
        [Bindable(true)]
        [Category("Jec")]
        [DefaultValue("")]
        [Localizable(true)]
        [Description("展开时显示的图片")]
        public string ExpandImageUrl
        {
            get
            {
                object obj = ViewState["ExpandImageUrl"];
                return (obj != null) ? (string)obj : string.Empty;
            }
            set
            {
                ViewState["ExpandImageUrl"] = value;
            }
        }
        [Bindable(true)]
        [Category("Jec")]
        [DefaultValue("")]
        [Localizable(true)]
        [Description("折叠时显示的图片")]
        public string CollapseImageUrl
        {
            get
            {
                object obj = ViewState["CollapseImageUrl"];
                return (obj != null) ? (string)obj : string.Empty;
            }
            set
            {
                ViewState["CollapseImageUrl"] = value;
            }
        }
        //控制的控件是否有效
        protected bool PropertiesValid
        {
            get
            {
                Control control = NamingContainer.FindControl(ControlToCollapse);
                if (control == null)
                    return false;
                else
                    return true;
            }
        }
        [Bindable(true)]
        [Category("Jec")]
        [DefaultValue("")]
        [Localizable(true)]
        [Description("展开时的文字")]
        public string ExpandText
        {
            get
            {
                object obj = ViewState["ExpandText"];
                return (obj != null) ? (string)obj : string.Empty;
            }
            set
            {
                ViewState["ExpandText"] = value;
            }
        }
        [Bindable(true)]
        [Category("Jec")]
        [DefaultValue("")]
        [Localizable(true)]
        [Description("折叠时的文字")]
        public string CollapseText
        {
            get
            {
                object obj = ViewState["CollapseText"];
                return (obj != null) ? (string)obj : string.Empty;
            }
            set
            {
                ViewState["CollapseText"] = value;
            }
        }
        [Bindable(true)]
        [Category("Jec")]
        [DefaultValue("true")]
        [Localizable(true)]
        [Description("初始是否折叠")]
        public bool StartCollapsed
        {
            get { return (ViewState["StartCollapsed"] != null ? (bool)ViewState["StartCollapsed"] : false); }
            set { ViewState["StartCollapsed"] = value; }
        }
        #endregion

        protected override void Render(HtmlTextWriter writer)
        {
            if (this.Site != null && this.Site.DesignMode)
            {
                // render to the designer
                this.lnkToggle.RenderControl(writer);
                writer.Write("[" + this.ID + "]");
            }
            else
            {
                base.Render(writer);
            }
        }

        protected override void OnPreRender(EventArgs e)
        {
            SetupScripts();
            Initialize();
            base.OnPreRender(e);
        }

        private void Initialize()
        {
            if (this.CollapseImageUrl != string.Empty)
            {
                imgToggle.Visible = true;
                if (StartCollapsed)
                {
                    imgToggle.Src = ResolveUrl(this.ExpandImageUrl);
                    imgToggle.Alt = ExpandText;
                    //lnkToggle.Title = ExpandText;
                }
                else
                {
                    imgToggle.Src = ResolveUrl(this.CollapseImageUrl);
                    imgToggle.Alt = CollapseText;
                    //lnkToggle.Title = CollapseText;
                }
                imgToggle.Border = 0;
            }
            else
            {
                if (StartCollapsed)
                {
                    lnkToggle.InnerHtml = ExpandText;
                    lnkToggle.Title = ExpandText;
                }
                else
                {
                    lnkToggle.InnerHtml = CollapseText;
                    lnkToggle.Title = CollapseText;
                }
                lnkToggle.Visible = false;
            }
            if (PropertiesValid)
            {
                lnkToggle.Attributes["onclick"] = GetOnClick();
            }
        }

        protected override void CreateChildControls()
        {
            imgToggle = new HtmlImage();
            lnkToggle = new HtmlAnchor();
            lnkToggle.Controls.Add(this.imgToggle);
            this.Controls.Add(this.lnkToggle);
        }

        private String GetOnClick()
        {
            String controlToToggleClientID = NamingContainer.FindControl(ControlToCollapse).ClientID;
            String onClick = "toggleCollapse(this,'"
                + this.imgToggle.ClientID + "','"
                + controlToToggleClientID + "','"
                + this.ResolveUrl(this.CollapseImageUrl) + "','"
                + this.ResolveUrl(this.ExpandImageUrl) + "','"
                + this.CollapseText + "','"
                + this.ExpandText + "'"
                + ");";
            return onClick;
        }

        private void SetupScripts()
        {
            string script = @"
<script language=""javascript"" type=""text/javascript"">
<!--
    function toggleCollapse(lnk, img, objToHide, collapseUrl, expandUrl, collapseText, expandText) {
    var el = document.getElementById(objToHide);
    var toggleImage = document.getElementById(img);
    if ( el.style.display != 'none' ) 
    {
        el.style.display = 'none';
        toggleImage.src = expandUrl;
        toggleImage.alt = expandText;
    }
    else 
    {
        el.style.display = 'block';
        toggleImage.src = collapseUrl;
        toggleImage.alt = collapseText;
    }
}
//-->
</script>";

            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "toggleCollapse", script);
        }
    }
}

Created by jecray

这个控件还是有些小问题, 不能实现当加载时,指定区域就是折叠状态 ,在初始状态下,只能设置折叠按钮的状态,不能设置指定区域的显示隐藏.
变通的方法就是将折叠控件控制显示区域的由服务器端控件 ,改为html 元素,如DIV. 将div的初始style display设为 none ,就可以解决问题.

Created by jecray