在 ASP.NET2.0 下制作自定义可视控件

txf2004

浏览: 7079797 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

ASP CSS UI Microsoft Web

自定义可视控件，由 <div> 标签作为模板生成。

属性：

Text:控件显示的文字内容
Href:控件显示的文字的超链接地址
Target:控件显示超链接的目标框架
StyleBackGround:控件背景样式
StyleMouseOut:控件鼠标离开后样式
StyleMouseOver:控件鼠标移上后样式
StyleLine:控件分隔线样式
DisplayPipe:控件是否显示分隔符"|"
Width:控件宽度

用途：

作为类似链接或按钮标签，构成导航栏菜单条使用。

功能：

显示提示文字，可设置链接，可以响应鼠标覆盖/离开事件，变换控件外观。可以显示或隐藏分割符。

代码:

App_Code\SelfControls.cs:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

namespace SelfControls
{
public class MainControl : System.Web.UI.WebControls.WebControl
{
#region 定义变量及其默认值
private string text = "";
private string href = "";
private string target = "_self";
private string stylebackground = "";
private string stylemouseout = "";
private string stylemouseover = "";
private string styleline = "";
private bool displayPipe = true;
#endregion

#region 构造函数
public MainControl(): base(HtmlTextWriterTag.Div)
{

}
#endregion

#region 定义属性

//控件显示的文字内容
public string Text
{
get
{
return text;
}

set
{
text = value;
}
}

//控件显示的文字的超链接地址
public string Href
{
get
{
return href;
}

set
{
href = value;
}
}

//控件显示超链接的目标框架
public string Target
{
get
{
return target;
}
set
{
target = value;
}
}

//控件背景样式
public string StyleBackGround
{
get
{
return stylebackground;
}
set
{
stylebackground = value;
}
}

//控件鼠标离开后样式
public string StyleMouseOut
{
get
{
return stylemouseout;
}
set
{
stylemouseout = value;
}
}

//控件鼠标移上后样式
public string StyleMouseOver
{
get
{
return stylemouseover;
}
set
{
stylemouseover = value;
}
}

//控件分隔线样式
public string StyleLine
{
get
{
return styleline;
}
set
{
styleline = value;
}
}

//控件是否显示分隔符"|"
public bool DisplayPipe
{
get
{
return displayPipe;
}

set
{
displayPipe = value;
}
}

//控件宽度
public override Unit Width
{
get
{
return base.Width;
}
set
{
base.Width = value;
}
}
#endregion

///将自定义样式写到 HTTP 输出流中:
protected override void AddAttributesToRender(HtmlTextWriter output)
{
output.Write("<!-自定义控件示例-->");
output.AddAttribute(HtmlTextWriterAttribute.Class, StyleBackGround);
output.AddStyleAttribute("width", Width.ToString());

base.AddAttributesToRender(output);
}

/// 呈现控件的方法 RenderContents
protected override void RenderContents(HtmlTextWriter output)
{
//定义样式
output.AddStyleAttribute(HtmlTextWriterStyle.Width, "10px");
output.AddStyleAttribute(HtmlTextWriterStyle.FontSize, "12px");
output.AddStyleAttribute(HtmlTextWriterStyle.FontFamily, "宋体");
output.RenderBeginTag(HtmlTextWriterTag.Span);

output.AddAttribute(HtmlTextWriterAttribute.Class, StyleMouseOut);
output.AddAttribute("onmouseout", "this.className='" + StyleMouseOut + "'");
output.AddAttribute("onmouseover", "this.className='" + StyleMouseOver + "'");
output.AddAttribute(HtmlTextWriterAttribute.Href, Href);
output.AddAttribute(HtmlTextWriterAttribute.Target, Target);
output.RenderBeginTag(HtmlTextWriterTag.A);

output.Write(text);
output.RenderEndTag();
output.RenderEndTag();

//定义分隔符及样式
if (DisplayPipe)
{
output.AddAttribute(HtmlTextWriterAttribute.Class, StyleLine);
output.RenderBeginTag(HtmlTextWriterTag.Span);
output.Write("|");
output.RenderEndTag();
}
else
{
output.RenderBeginTag(HtmlTextWriterTag.Span);
output.Write(" ");
output.RenderEndTag();
}

//使用默认逻辑来呈现子控件
base.RenderContents(output);
}
}
}

调用示例:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Top.aspx.cs" Inherits="Top" %>
<%@ Register TagPrefix="SelfControl" Namespace="SelfControls" %>
<%@ OutputCache Duration="1000" VaryByParam="None" %>
<html>
<head>
<title></title>
<LINK REL='stylesheet' TYPE='text/css' HREF='styles/style.css'></LINK>
<LINK REL='stylesheet' TYPE='text/css' HREF='styles/SelfControl.css'></LINK>
</head>

<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td width="100%">
<table height="22" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td bgcolor="#4b92d9" width="30%" height="22"><span style="font-size:12px; color: #ffffff;">自定义控件测试页面</span></td>
<td style="filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4B92D9', endColorStr='#CEDFF6', gradientType='1')" width="35%"> </td>
<td style="filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#CEDFF6', endColorStr='#1E77D3', gradientType='1')" width="35%"> </td>
</tr>
</table>
</td>
</tr>
</table>