扩展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);
}
}
}
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