扩展TextBox(带DIV跟随框)

GOGOTextBox：

在TextBox下跟随一个页面，实现跟TextBox的交互，从而简化很多需要选择的操作,

刚接触组件开发，所以代码方面的不足，希望大虾们帮忙指正，控件实现功能如下图所示：

 

 

用到的代码如下，按照我的思路，都做了简单的注释，希望对朋友们有所帮助：

 

using System;
using System.Collections.Generic;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.ComponentModel;

///注册所需的JS文件
[assembly: System.Web.UI.WebResource("YYControls.GOGOTextBox.Resources.GOGOJScript.js", "text/javascript")]
namespace YYControls
{
    /// <summary>
    /// GOGOTextBox类，继承自TextBox
    /// </summary>
    [ToolboxData(@"<{0}:GOGOTextBox runat='server'></{0}:GOGOTextBox>")]
    public class GOGOTextBox:TextBox
    {
        #region 属性
        private bool _isOpenDiv;
        /// <summary>
        /// 是否开启文本框弹出层
        /// </summary>
        [
        Browsable(true),
        Description("是否开启文本框弹出层"),
        DefaultValue(false),
        Category("扩展")
        ]
        public virtual bool IsOpenDiv
        {
            get { return _isOpenDiv; }
            set { _isOpenDiv = value; }
        } 

        private string _divName;
        /// <summary>
        /// 弹出层的名称
        /// </summary>
        [
        Browsable(true),
        Description("弹出层的名称"),
        Category("扩展")
        ]
        public virtual string DivName
        {
            get { return _divName; }
            set { _divName = value; }
        }

        private string _divWidth;
        /// <summary>
        /// 弹出层的宽度
        /// </summary>
        [
        Browsable(true),
        Description("弹出层的宽度"),
        Category("扩展")
        ]
        public virtual string DivWidth
        {
            get { return _divWidth; }
            set { _divWidth = value; }
        }

        private string _divHeight;
        /// <summary>
        /// 弹出层的高度
        /// </summary>
        [
        Browsable(true),
        Description("弹出层的高度"),
        Category("扩展")
        ]
        public virtual string DivHeight
        {
            get { return _divHeight; }
            set { _divHeight = value; }
        }

        private string _iframeName;
        /// <summary>
        /// iframe框架名称
        /// </summary>
        [
        Browsable(true),
        Description("为Div层加载页面的iframe框架名称"),
        Category("扩展")
        ]
        public virtual string IframeName
        {
            get { return _iframeName; }
            set { _iframeName = value; }
        }
        
        private string _iframeUrl;
        /// <summary>
        /// iframe链接地址
        /// </summary>
        [
        Browsable(true),
        Description("iframe框架导向的页面地址"),
        Category("扩展")
        ]
        public virtual string IframeUrl
        {
            get { return _iframeUrl; }
            set { _iframeUrl = value; }
        }
        #endregion

        protected override void OnPreRender(EventArgs e)
        {
            if (IsOpenDiv)
            {
                //注册JS脚本文件
                Page.ClientScript.RegisterClientScriptInclude("key", Page.ClientScript.GetWebResourceUrl(this.GetType(), "YYControls.GOGOTextBox.Resources.GOGOJScript.js"));

                //执行JS脚本
                string strJS = string.Empty;
                strJS += "<script type='text/javascript' language='javascript'>";
                strJS += "document.onclick = function(){ ";
                strJS += "o = event.srcElement; ";
                strJS += "if (o.id != '" + this.DivName + "'&&o.id != '" + this.ClientID + "') { ";
                strJS += "document.getElementById('" + this.DivName + "').style.display='none'; }}";
                strJS += "</script>";
                Page.RegisterStartupScript("key", strJS);
            }

            base.OnPreRender(e);
        }

        protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            if (IsOpenDiv)
            {
                //为TextBox添加客户端Click事件
                string strPage = "openDiv('" + this.ClientID + "','" + this.IframeUrl + "'," + this.DivWidth + "," + this.DivHeight + ",'" + this.DivName + "','" + this.IframeName + "');";
                writer.AddAttribute(HtmlTextWriterAttribute.Onclick, strPage.ToString(), true);
            }

            //取得焦点清除默认值
            writer.AddAttribute("onfocus", "clearDefault(this)");

            //失去焦点还原默认值
            writer.AddAttribute("onblur", "resetDefault(this)");

            //设置默认文本样式
            writer.AddAttribute(HtmlTextWriterAttribute.Style, "color:#666; border:1px solid #000");
            

            base.AddAttributesToRender(writer);
        }

        protected override void Render(HtmlTextWriter writer)
        {
            if (IsOpenDiv)
            {
                //输出Div容器
                string output = string.Empty;
                output += "<div id=\"" + this.DivName + "\" style=\"display:none; position:absolute; border-style:solid; border-width:2px; border-color:Gray;\">";
                output += "<iframe id=\"" + this.IframeName + "\" style=\"width:100%; height:100%;\" frameborder=\"0\"></iframe>";
                output += "</div>";
                writer.Write(output);
            }

            base.Render(writer);
        }

    }
} 
JS代码——GOGOTextBox 
// JScript 文件
/*************定位Div位置**************/
        /*弹出Div的起始坐标*/
        var xStart = 0;
        var yStart = 0;
        /*Div长宽*/
        var x_Width=0;
        var y_Height=0;
        function openDiv(ATarget,url,width,height,divName,ifrName) {
            var target = document.getElementById(ATarget);
//            var target = ATarget;
            var pos = new CPos(target.offsetLeft, target.offsetTop);

            var target = target.offsetParent;
            while (target) {
                pos.x += target.offsetLeft;
                pos.y += target.offsetTop;

                target = target.offsetParent
            }
            
            x_Width=width;
            y_Height=height;

            xStart = pos.x;
            yStart = pos.y + 20;
            
            //显示Div层
            document.getElementById(divName).style.display="block";
            //Div层定位跟随文本框
            document.getElementById(divName).style.top=yStart;
            document.getElementById(divName).style.left=xStart;
            //Div层的长宽
            document.getElementById(divName).style.width=width;
            document.getElementById(divName).style.height=height;
            //半透明效果
            //document.getElementById("divTest").style.filter = "alpha(opacity=50)";
            //iframe加载的页面地址
            document.getElementById(ifrName).src=url;
        }

        function CPos(x, y) {
            this.x = x;
            this.y = y;
        }
        
        //清空默认值
        function clearDefault(el) {
              if (el.defaultValue==el.value) 
                  el.value = "";
        }
        //还原默认值
        function resetDefault(el){
            if (el.value == '') 
                el.value=el.defaultValue;
        }
 

 

好了，就这些了，和我一样的新手朋友们可以拿去参考参考

 

哈，我就笑笑

 

下载：GOGOTextBox