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);
}
}
}
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;
}
/* ************定位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