利用 .net ajaxtoolkit 的 Accordion 控件创建菜单
2007-08-04 15:44 Valens 阅读(3613) 评论(8) 编辑 收藏 举报
有关 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>
<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);
}
{
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>
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>
#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)
就是以上这些内容了,欢迎大家给出意见或建议。