单条目选择控件

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;



namespace Gyyx.EOV3.Web.UserControl

{

    /// <summary>

    /// 键值对选择

    /// </summary>

    public class ItemSelector : CompositeControl

    {

        private TextBox tbItemText;

        private HtmlInputHidden hiItemValue;

        private Label lbItemText;

        // private HtmlInputHidden hiItemText;

        private HtmlGenericControl spanClose;



        /// <summary>

        /// 构造 

        /// </summary>

        public ItemSelector()

        {

            tbItemText = new TextBox() { ID = "tbItemText" };

            hiItemValue = new HtmlInputHidden() { ID = "hiItemValue" };

            lbItemText = new Label() { ID = "lbItemText" };

            //hiItemText = new HtmlInputHidden() { ID = "hiItemText" };

            spanClose = new HtmlGenericControl("span") { ID = "spanClose", InnerText = " ×" };



            this.Controls.Add(tbItemText);

            this.Controls.Add(hiItemValue);

            this.Controls.Add(lbItemText);

            this.Controls.Add(spanClose);

            //this.Controls.Add(hiItemText);

        }



        /// <summary>

        /// 初始化控件

        /// </summary>

        /// <param name="e"></param>

        protected override void OnInit(EventArgs e)

        {

            base.OnInit(e);

            

            spanClose.Attributes.Add("style", "cursor:pointer;display:none;width:10px;");



            this.addClick = string.IsNullOrEmpty(AddClick) ? this.ClientID + "_AddItem" : AddClick;

            this.closeClick = string.IsNullOrEmpty(CloseClick) ? this.ClientID + "_DeleteItem" : CloseClick;



            this.Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), this.ClientID + "_registerScripts",

                @"

                <script type='text/javascript'>

                    

                    function " + this.addClick + @"() {

                        var txt = document.getElementById('" + tbItemText.ClientID + @"');

                        var span = document.getElementById('" + lbItemText.ClientID + @"');

                        var close = document.getElementById('" + spanClose.ClientID + @"');

                        txt.style.display = 'none';

                        span.innerHTML = txt.value;

                        

                        close.style.display = '';

                    }



                    function " + this.closeClick + @"() {

                        var txt = document.getElementById('" + tbItemText.ClientID + @"');

                        var span = document.getElementById('" + lbItemText.ClientID + @"');

                        var close = document.getElementById('" + spanClose.ClientID + @"');

                        var itemVal = document.getElementById('" + hiItemValue.ClientID + @"');

                        txt.style.display = '';

                        txt.value='';

                        itemVal.value='';  

                        span.innerHTML = '';

                        close.style.display = 'none';

                    }



                    function " + this.ClientID + @"_CheckVal()

                    {

                        var close = document.getElementById('" + spanClose.ClientID + @"');

                        var txt = document.getElementById('" + tbItemText.ClientID + @"');

                        var spanTxt=document.getElementById('" + lbItemText.ClientID + @"');

                        var hiVal=document.getElementById('" + hiItemValue.ClientID + @"');

                        if(txt.value!='')

                        {

                            " + this.addClick + @"()

                        }

                        else if(spanTxt.innerHTML=='')

                        {

                            hiVal.value='';

                            " + this.closeClick + @"()

                        }

                        else

                        {

                            close.style.display='';

                            txt.style.display='none';

                            txt.value='';

                        }

                    }

                </script>

            ");



            this.spanClose.Attributes.Add("onclick", CloseClick + "()");

            tbItemText.CssClass = this.TextCssClass;

            this.Page.ClientScript.RegisterStartupScript(Page.GetType(), this.ClientID+"ckval", this.ClientID + "_CheckVal();", true);

        }



        private string addClick;

        /// <summary>

        /// 添加键值对时触发的前端事件

        /// </summary>

        public string AddClick

        {

            get { return addClick; }

        }



        private string closeClick;

        /// <summary>

        /// 删除键值对时触发的前端事件

        /// </summary>

        public string CloseClick

        {

            get { return closeClick; }

        }



        /// <summary>

        /// 控件值

        /// </summary>

        public ListItem Value

        {

            get

            {

                return new ListItem(tbItemText.Text, hiItemValue.Value);

            }

            set

            {

                tbItemText.Text = value.Text;

                hiItemValue.Value = value.Value;

            }

        }



        /// <summary>

        /// 输入框的样式

        /// </summary>

        public string TextCssClass

        {

            get;

            set;

        }



        /// <summary>

        /// 输入框客户端id

        /// </summary>

        public string TextBoxClientID

        {

            get { return tbItemText.ClientID; }

        }



        /// <summary>

        /// 值控件客户端ID

        /// </summary>

        public string HiddenValueClientID

        {

            get { return hiItemValue.ClientID; }

        }

    }

}

 注：火狐不支持innerText属性，使用innerHTML