有关 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)
就是以上这些内容了,欢迎大家给出意见或建议。