主要介绍Accordion布局,主要用于菜单布局 先看下以下大家非常熟悉的画面:
![图片](http://www.extshow.com/sysdemo/output/6/qq.jpg)
没错,这节的重点就是可折叠菜单,使用EXT的Accordion布局,可轻松实现漂亮实用的折叠菜单效果。先来看以下代码:
以上代码运行效果:
通常来说,我们会使用accoodion布局来做我们主菜单部分,在配合树形控件,效果十分不错。有关树形控件的使用,将在后面的章节有专门的介绍。
![图片](http://www.extshow.com/sysdemo/output/6/qq.jpg)
没错,这节的重点就是可折叠菜单,使用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布局来做我们主菜单部分,在配合树形控件,效果十分不错。有关树形控件的使用,将在后面的章节有专门的介绍。