| Accordion布局 |
| 2008-04-10 | |
|
主要介绍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布局来做我们主菜单部分,在配合树形控件,效果十分不错。有关树形控件的使用,将在后面的章节有专门的介绍。 |
|
| 最近更新 ( 2008-04-10 ) |
| < 上一篇 | 下一篇 > |
|---|