主要介绍Accordion布局，主要用于菜单布局 先看下以下大家非常熟悉的画面：
![图片]()
没错，这节的重点就是可折叠菜单，使用EXT的Accordion布局，可轻松实现漂亮实用的折叠菜单效果。先来看以下代码：
以上代码运行效果：
通常来说，我们会使用accoodion布局来做我们主菜单部分，在配合树形控件，效果十分不错。有关树形控件的使用，将在后面的章节有专门的介绍。
没错，这节的重点就是可折叠菜单，使用EXT的Accordion布局，可轻松实现漂亮实用的折叠菜单效果。先来看以下代码：
- 代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){
new Ext.Panel({//创建一个面板
renderTo:'show',//填充到id为show的区域
title:'我的可折叠菜单',
width:500,
height:200,
layout:'accordion',//声明布局类型
layoutConfig: {
animate: true //动画效果启用
},
items:[{
title:'菜单1',
html:'菜单1的内容'//这里可用div，方便其他元素插入
}, {
title:'菜单2',
html:'菜单2的内容'
}]
});
});
</script>
<div id='show'></div>
</body>
</html>
以上代码运行效果：
通常来说，我们会使用accoodion布局来做我们主菜单部分，在配合树形控件，效果十分不错。有关树形控件的使用，将在后面的章节有专门的介绍。
浙公网安备 33010602011771号