利用 .net ajaxtoolkit 的 Accordion 控件创建菜单

有关 Accordion 的示例请参考这里。

以下是效果，至于美化方面，我就没再去细致了，不原谅也得原谅。
(兼容IE6+，FF)



按照官方示例，我们很容易地就可以创建出我们想要的基本布局来。
其实也很简单，就是在一个 UpdatePanel 中添加一个 Accordion，根据上面例子的要求，需要在 Accordion 的 Panes 中加入四个 AccordionPane ，设置 Header，设置 Content，这样就实现了最简单的 Accordion Menu了。

接着，我们为每个子菜单添加事件，添加选中的效果。

那 .aspx 页面中大概是会类似下面这段代码：

< asp:UpdatePanel ID = " upMenu "  runat = " server "  UpdateMode = " Conditional " >
         < ContentTemplate >
             < ajaxtoolkit:Accordion ID = " MyAccordion "  runat = " server "  SelectedIndex = " 0 "  HeaderCssClass = " accordionHeader "
                HeaderSelectedCssClass = " accordionHeaderSelected "  ContentCssClass = " accordionContent "
                FadeTransitions = " false "  FramesPerSecond = " 40 "  TransitionDuration = " 250 "  AutoSize = " None "
                RequireOpenedPane = " false "  SuppressHeaderPostbacks = " true " >
                 < Panes >
                     < ajaxtoolkit:AccordionPane ID = " AccordionPane1 "  runat = " server " >
                         < Header >
                             < a href = " javascript:; "   class = " accordionLink " > 菜单列表一 </ a ></ Header >
                         < Content >
                             < ul >
                                 < li >
                                     < asp:LinkButton ID = " LinkButton1 "  OnClick = " MenuItem_Click "  runat = " server " > LinkButton </ asp:LinkButton ></ li >
                                 < li >
                                     < asp:LinkButton ID = " LinkButton2 "  OnClick = " MenuItem_Click "  runat = " server " > LinkButton </ asp:LinkButton ></ li >
                                 < li >
                                     < asp:LinkButton ID = " LinkButton3 "  OnClick = " MenuItem_Click "  runat = " server " > LinkButton </ asp:LinkButton ></ li >
                                 < li >
                                     < asp:LinkButton ID = " LinkButton4 "  OnClick = " MenuItem_Click "  runat = " server " > LinkButton </ asp:LinkButton ></ li >
                             </ ul >
                         </ Content >
                     </ ajaxtoolkit:AccordionPane >
                     < ajaxtoolkit:AccordionPane ID = " AccordionPane2 "  runat = " server " >
                         < Header >
                             < a href = " javascript:; "   class = " accordionLink " > 菜单列表二 </ a ></ Header >
                         < Content >
                             < div >
                                 < asp:LinkButton ID = " LinkButton5 "  OnClick = " MenuItem_Click "  runat = " server " > LinkButton </ asp:LinkButton ></ div >
                             < div >
                                 < asp:LinkButton ID = " LinkButton6 "  OnClick = " MenuItem_Click "  runat = " server " > LinkButton </ asp:LinkButton ></ div >
                             < div >
                                 < asp:LinkButton ID = " LinkButton7 "  OnClick = " MenuItem_Click "  runat = " server " > LinkButton </ asp:LinkButton ></ div >
                             < div >
                                 < asp:LinkButton ID = " LinkButton8 "  OnClick = " MenuItem_Click "  runat = " server " > LinkButton </ asp:LinkButton ></ div >
                         </ Content >
                     </ ajaxtoolkit:AccordionPane >
                     < ajaxtoolkit:AccordionPane ID = " AccordionPane3 "  runat = " server " >
                         < Header >
                             < a href = " javascript:; "   class = " accordionLink " > 菜单列表三 </ a ></ Header >
                         < Content >
                             < ul >
                                 < li >
                                     < asp:LinkButton ID = " LinkButton9 "  OnClick = " MenuItem_Click "  PostBackUrl = " ~/Default.aspx?menuid=1 "
                                        runat = " server " > LinkButton </ asp:LinkButton ></ li >
                                 < li >
                                     < asp:LinkButton ID = " LinkButton10 "  OnClick = " MenuItem_Click "  PostBackUrl = " ~/Default.aspx?menuid=2 "
                                        runat = " server " > LinkButton </ asp:LinkButton ></ li >
                                 < li >
                                     < asp:LinkButton ID = " LinkButton11 "  OnClick = " MenuItem_Click "  PostBackUrl = " ~/Default.aspx?menuid=3 "
                                        runat = " server " > LinkButton </ asp:LinkButton ></ li >
                                 < li >
                                     < asp:LinkButton ID = " LinkButton12 "  OnClick = " MenuItem_Click "  PostBackUrl = " ~/Default.aspx?menuid=4 "
                                        runat = " server " > LinkButton </ asp:LinkButton ></ li >
                             </ ul >
                         </ Content >
                     </ ajaxtoolkit:AccordionPane >
                     < ajaxtoolkit:AccordionPane ID = " AccordionPane4 "  runat = " server " >
                         < Header >
                             < a href = " javascript:; "   class = " accordionLink " > 菜单列表四 </ a ></ Header >
                         < Content >
                             < ul >
                                 < li >
                                     < asp:LinkButton ID = " LinkButton13 "  OnClick = " MenuItem_Click "  PostBackUrl = " ~/Default2.aspx?menuid=1 "
                                        runat = " server " > LinkButton </ asp:LinkButton ></ li >
                                 < li >
                                     < asp:LinkButton ID = " LinkButton14 "  OnClick = " MenuItem_Click "  PostBackUrl = " ~/Default2.aspx?menuid=2 "
                                        runat = " server " > LinkButton </ asp:LinkButton ></ li >
                                 < li >
                                     < asp:LinkButton ID = " LinkButton15 "  OnClick = " MenuItem_Click "  PostBackUrl = " ~/Default2.aspx?menuid=3 "
                                        runat = " server " > LinkButton </ asp:LinkButton ></ li >
                             </ ul >
                         </ Content >
                     </ ajaxtoolkit:AccordionPane >
                 </ Panes >
             </ ajaxtoolkit:Accordion >
         </ ContentTemplate >
     </ asp:UpdatePanel >

每个子菜单的OnClick事件代码如下：

     protected   void  MenuItem_Click( object  sender, EventArgs e)
    {
        LinkButton _lbtn  =  sender  as  LinkButton;
        ScriptManager.RegisterStartupScript(
            Page,
            Page.GetType(),
             " setmenuitemstyle__js " ,
             " ClearMenuItemStyle(' "   +  _lbtn.ClientID  +   " ') " ,
             true );
    }

代码说明：在该事件中，将对象参数 sender 转换为 LinkButton，然后为其注册了一段js脚本，用于显示选中时的样式。

下面是注册的js函数脚本：

< script type = " text/javascript " >
     function  ClearMenuItemStyle(id)
    {
         var  all = document.getElementById(' <%=  MyAccordion.ClientID  %> ')   
         var  alinks = all.getElementsByTagName( " a " );   
         var  lis = all.getElementsByTagName( " li " ); 

         for ( var  i = 0 ;i < alinks.length;i ++ )   
        {     
             if (alinks[i].id  ==  id){
                alinks[i].parentNode.className  = " submenu " ; }
        } 
    }
</ script >

脚本说明：循环某容器内所有的<a>和<li>对象，然后在对应的对象上设置其class的名称。

简单的样式如下：

    <style type="text/css">
        #menu ul {
            padding :  0px ;
            margin :  0px ;
            text-align :  left ;
            list-style-type : none
             }
        #menu li {
            padding :  0px ;
            margin :  0px ;
            text-align :  left ;
            list-style-type : none
             }
            
        .submenu
         {
            line-height : 20px ;
            border : solid 1px red ;
            text-align : center ;
            font-size : 14px ;
            width : 111px ;
         }
    </style>

你可以自己改进一下。
(兼容IE6+，FF)

就是以上这些内容了，欢迎大家给出意见或建议。

转载于:https://www.cnblogs.com/valens/archive/2007/08/04/842948.html