Accordion用法

View Code

<% @ Page Language = " C# "   MasterPageFile = " ~/site.master "  AutoEventWireup = " true "  CodeFile = " TaskTest.aspx.cs "  Inherits = " TaskTest "   %>

<% @ Register Assembly = " AjaxControlToolkit "  Namespace = " AjaxControlToolkit "  TagPrefix = " cc1 "   %>

< asp:Content  ID ="Content1"  runat ="server"  ContentPlaceHolderID  =ContentPlaceHolder1 >

  < 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 >

< asp:ScriptManager  ID ="ScriptManager1"  runat ="server" ></ asp:ScriptManager >

< div  class ="main" >
< div  class ="left" >
< asp:UpdatePanel  ID ="upMenu"  runat ="server"  UpdateMode ="Conditional" >
         < ContentTemplate >
             < cc1: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 >
                     < cc1:AccordionPane  ID ="AccordionPane1"  runat ="server" >
                         < Header >
                             < a  href ="javascript:;"  class ="accordionLink" >< div  class ="leftTitle" >  菜单列表一  </ div ></ 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 >
                     </ cc1:AccordionPane >
                     < cc1:AccordionPane  ID ="AccordionPane2"  runat ="server" >
                         < Header >
                             < a  href ="javascript:;"  class ="accordionLink" >< div  class ="leftTitle" > 菜单列表二 </ div ></ 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 >
                     </ cc1:AccordionPane >
                     < cc1:AccordionPane  ID ="AccordionPane3"  runat ="server" >
                         < Header >
                             < a  href ="javascript:;"  class ="accordionLink" >< div  class ="leftTitle" > 菜单列表三 </ div ></ 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 >
                     </ cc1:AccordionPane >
                     < cc1:AccordionPane  ID ="AccordionPane4"  runat ="server" >
                         < Header >
                             < a  href ="javascript:;"  class ="accordionLink" >< div  class ="leftTitle" > 菜单列表四 </ div ></ 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 >
                     </ cc1:AccordionPane >
                 </ Panes >
             </ cc1:Accordion >
         </ ContentTemplate >
     </ asp:UpdatePanel >
</ div >

< div  class ="right" ></ div >

</ div >

</ asp:Content >