使用jQuery UI的accordion组件可以实现手风琴菜单. 效果见下图.
accordion文档地址:http://jqueryui.com/demos/accordion/
1.实例效果
2.实例代码
<%@PageLanguage="C#"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
<headidheadid="Head1"runat="server">
<title>jQueryUI-手风琴菜单应用实例Accordion</title>
<!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->
<linkrellinkrel="stylesheet"type="text/css"href="<%=WebConfig.ResourceServer+"/JsLib/jquery/themes/redmond/style.css"%>"/>
<scripttypescripttype="text/javascript"src="<%=WebConfig.ResourceServer%>/JsLib/jquery/jquery-min-lastest.js"></script>
<scriptsrcscriptsrc="<%=WebConfig.ResourceServer%>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"
type="text/javascript"></script>
<%if(false)
{%><scriptsrcscriptsrc="~/js/jquery-vsdoc-lastest.js"type="text/javascript"></script>
<%}%>
<scripttypescripttype="text/javascript">
/*==========必须放在头部加载的语句块.尽量避免使用==========*/
</script>
<styletypestyletype="text/css">
body
{
font-size:12px;
}
</style>
</head>
<body>
<!--Demo.默认配置的Accordion菜单-->
<divstyledivstyle="width:300px;float:left;margin-left:20px;">
<dividdivid="accordion1">
<h3><ahrefahref="#">菜单1</a></h3>
<div>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
</div>
<h3><ahrefahref="#">菜单2</a></h3>
<div>
菜单2的内容
</div>
<h3><ahrefahref="#">菜单3</a></h3>
<div>
菜单3的内容
</div>
</div>
</div>
<!--Demo.取消自动高度,可折叠-->
<divstyledivstyle="width:300px;float:left;margin-left:20px;">
<dividdivid="accordion2">
<h3><ahrefahref="#">菜单1</a></h3>
<div>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
</div>
<h3><ahrefahref="#">菜单2</a></h3>
<div>
菜单2的内容
</div>
<h3><ahrefahref="#">菜单3</a></h3>
<div>
菜单3的内容
</div>
</div>
</div>
<!--Demo.鼠标滑动触发,自定义图标-->
<divstyledivstyle="width:300px;float:left;margin-left:20px;">
<dividdivid="accordion3">
<h3><ahrefahref="#">菜单1</a></h3>
<div>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
菜单1的内容<br/>
</div>
<h3><ahrefahref="#">菜单2</a></h3>
<div>
菜单2的内容
</div>
<h3><ahrefahref="#">菜单3</a></h3>
<div>
菜单3的内容
</div>
</div>
</div>
<scripttypescripttype="text/javascript">
/*==========用户自定义方法==========*/
/*==========事件绑定==========*/
$(function()
{
});
/*==========加载时执行的语句==========*/
$(function()
{
//默认配置的Accordion菜单
$("#accordion1").accordion();
//取消自动高度,可折叠
$("#accordion2").accordion({
autoHeight:false,
collapsible:true
});
//鼠标滑动触发,自定义图标
$("#accordion3").accordion({
icons:{
header:"ui-icon-circle-arrow-e",
headerSelected:"ui-icon-circle-arrow-s"
},
event:"mouseover"
});
});
</script>
</body>
</html>3. 关键点讲解
(1) 注意高度设置过小问题
当包含accordion控件的容器高度设计过小时, 在FireFox3中在此容器后面的内容会被accordion控件部分遮盖. 在IE中没有此问题. 经检查是因为容器高度小于菜单高度导致. 所以我们在应用时应当注意不要将容器高度设置过小.
(2) 部分关键属性
autoHeight: 设置是否自动将内容高度设置为容器高度.
collapsible: 设置是否可折叠
一般上面两个配合使用, 以为折叠后肯定会改变菜单高度, 会导致autoHeight设置为true无效.
更多属性和事件使用请参阅官方文档.
