利用 .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)

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