扩展TextBox(带DIV跟随框)

GOGOTextBox：

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

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

 

 

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

 

C#代码————GOGOText

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

转载于:https://www.cnblogs.com/jacksion520/archive/2010/07/02/1770102.html