您的位置：首页 > 其它

Ext教程连载 - Accordion布局

2009-09-29 07:58 295 查看
主要介绍Accordion布局，主要用于菜单布局 先看下以下大家非常熟悉的画面：



没错，这节的重点就是可折叠菜单，使用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布局来做我们主菜单部分，在配合树形控件，效果十分不错。有关树形控件的使用，将在后面的章节有专门的介绍。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航