Ext教程 arrow Ext控件使用 arrow Accordion布局
 
     
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 )
< 上一篇   下一篇 >
   
 
 
 
Copyright Infotmation overhere. | designed by Magicbox from Mambochina
曼波整站系统 基于 Mambo 开发,是免费的自由软件,遵循 GNU/GPL 开源许可协议。
曼波整站系统5.4.0Mambo中国Mambo Resource 联合增强开发。  闽ICP备08005204号