zoukankan      html  css  js  c++  java
  • 简单的动态下拉菜单

    效果:

     
    思路:
          先动态生成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"%>

  • 相关阅读:
    jQuery EasyUI API 中文文档 数字框(NumberBox)
    jQuery EasyUI API 中文文档 数值微调器(NumberSpinner)
    jQuery EasyUI API 中文文档 日期时间框(DateTimeBox)
    jQuery EasyUI API 中文文档 微调器(Spinner)
    jQuery EasyUI API 中文文档 树表格(TreeGrid)
    jQuery EasyUI API 中文文档 树(Tree)
    jQuery EasyUI API 中文文档 属性表格(PropertyGrid)
    EntityFramework 数据操作
    jQuery EasyUI API 中文文档 对话框(Dialog)
    jQuery EasyUI API 中文文档 组合表格(ComboGrid)
  • 原文地址:https://www.cnblogs.com/stevenxiao/p/461170.html
Copyright © 2011-2022 走看看