效果:
思路:
先动态生成n个div,隐藏不显示,然后使用javascript中的 onmouseover,onmouseout等事件显示或隐藏div
例子:
left ascx.cs
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="GoceanSite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%> namespace MySite.Controls
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Text;
/// <summary>
/// left 的摘要说明。
/// </summary>
public class left : System.Web.UI.UserControl
{
protected System.Web.UI.WebControls.Repeater Repeater1;
MySite.DAL.ITTraining ittraining;
private void Page_Load(object sender, System.EventArgs e)
{
if(!Page.IsPostBack)
{
repeaterBind();
}
}
private void repeaterBind()
{
ittraining=new MySite.DAL.ITTraining();
Repeater1.DataSource=ittraining.ITCategorySelectAll();
Repeater1.DataBind();
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器
/// 修改此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Repeater1.ItemDataBound += new System.Web.UI.WebControls.RepeaterItemEventHandler(this.Repeater1_ItemDataBound);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void Repeater1_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
{
ittraining=new MySite.DAL.ITTraining();
if(e.Item.ItemType==ListItemType.Item||e.Item.ItemType==ListItemType.AlternatingItem)
{
DataRowView rowv=(DataRowView)e.Item.DataItem;
int t_id=Convert.ToInt32(rowv["T_ID"]);
string str;
str="<div id=div"+t_id.ToString()+" style=\"position:absolute;display:none;\" onmouseover=show1(\""+"div"+t_id.ToString()+"\") onmouseout=hide(\""+"div"+t_id.ToString()+"\")>";
str=str+"<table class=\"flyoutMenu\" width=\"180\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" >";
str=str+"<tr><td><table width=\"175\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">";
foreach(DataRowView r in ittraining.SubCategorySelectByID(t_id).Tables[0].DefaultView)
{
str=str+" <tr><td class=\"flyoutLink\"><a href=#>"+r["SC_Name"].ToString()+"</a></td></tr>";
}
str=str+"</Table></table></div>";
Response.Write(str);
}
}
}
}
ascx(html):
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="GoceanSite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%> <%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="GoceanSite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%> <%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="MySite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<table class="flyoutMenu" border=0>
<asp:Repeater id="Repeater1" runat="server">
<ItemTemplate>
<tr><td class="flyoutLink" onmouseover=show("div"+<%#DataBinder.Eval(Container.DataItem,"T_ID")%>) onmouseout=hide("div"+<%#DataBinder.Eval(Container.DataItem,"T_ID")%>)><%#DataBinder.Eval(Container.DataItem,"T_Name")%></td></tr>
</ItemTemplate>
</asp:Repeater>
</table>
index.cs(html)
(用户控件拖到index.aspx)
把代码插入(<head></head>)之间
<style>.flyoutMenu { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 0px solid; BORDER-LEFT: #999999 0px solid; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #f1f1f1 }
.flyoutMenu TD.flyoutLink { BORDER-RIGHT: #f1f1f1 1px solid; PADDING-RIGHT: 25px; BORDER-TOP: #f1f1f1 1px solid; PADDING-LEFT: 6px; FONT-SIZE: 70%; PADDING-BOTTOM: 3px; BORDER-LEFT: #f1f1f1 1px solid; CURSOR: hand; PADDING-TOP: 1px; BORDER-BOTTOM: #f1f1f1 1px solid; FONT-FAMILY: Verdana,Arial }
.flyoutLink A { COLOR: black; TEXT-DECORATION: none }
.flyoutLink A:hover { COLOR: black; TEXT-DECORATION: none }
.flyoutLink A:visited { COLOR: black; TEXT-DECORATION: none }
.flyoutLink A:active { COLOR: black; TEXT-DECORATION: none }
</style>
<script>
function over(){
if(obj=event.srcElement)
if(obj.className=="flyoutLink"){
obj.style.backgroundColor='#cccccc'
obj.style.borderColor = '#999999'
}
}
function out(){
if(obj=event.srcElement)
if(obj.className=="flyoutLink"){
obj.style.backgroundColor='#f1f1f1'
obj.style.borderColor = '#f1f1f1'
}
}
function getXY(Obj)
{
for (var sumTop=0,sumLeft=0,sumRight=0;Obj!=document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft,sumRight=Obj.clientWidth, Obj=Obj.offsetParent);
return {left:sumLeft,top:sumTop,right:sumRight}
}
function show(d){
if(obj=document.all(d))
var pos = getXY(event.srcElement);
obj.style.top=pos.top;
obj.style.left=pos.right;
obj.style.display=""
}
function show1(d){
if(obj=document.all(d))
obj.style.display=""
}
function hide(d){
if(obj=document.all(d))
obj.style.display="none"
}
document.onmouseover=over
document.onmouseout=out
</script>
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="GoceanSite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%> <%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="GoceanSite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="GoceanSite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>