MX2004组件(二)Accordion[折叠菜单]

原创 2004年07月08日 16:57:00
MX2004组件(二)Accordion[折叠菜单]

继承:UIObject-->UIComponent-->View-->Accordion
 包: mx.containers.Accordion 

 2k4中新增的组件,可以用来做折叠菜单,也可以用来做成一个用户注册界面,就像MM站上那种,第一步,第二步。。。做成折叠菜单的形式。
 Accordion组件一般有三种工作方式:
 Accordion跟Screen对像的结合
 Accordion跟MovieClip结合
 使用AS2

 Accordion跟Screen对像的结合应用
 打开flash? New and select Flash Form Application.
 双击Form1,并输入addressForm
 这里我们将把addressForm做为Accordion的子菜单内容来用。
 选中addressForm,在属性面板里设置visible=false,作用是让addressForm的内容只在Accordion组件中可见
 拖几个Button或Label组件到addressForm中,随便做个类似用户名,地址表单之类的东东,拿画笔画点什么也行.然后把它们排列好,并把排列好的一堆东东放到addressForm的左上角[addressForm的左上角对应着Accordion组件菜单内容的左上角,如果不放好,在myAccordion中会看不到的] 

 accordion2.gif
 重复b—>d步骤,再创建一个checkoutForm
 创建一个新的Form起名为accordionForm,放置Accordion组件.
 拖一个Accordion组件到accordionForm上。起名为myAccordion
 保持myAccordion的选中状态,在属性面板里做如下设置:
 childSymbols属性中填:addressForm,addressForm,checkoutForm[就是我们刚刚创建的Form的名字]
 childSymbols属性指出哪些form将做为myAccordion组件的子菜单内容。第一个和第二个用了同一个addressForm是因为在这个例子中这两个子菜单的内容是一样的。你也可以自定义成别的。
 childNames属性中填:shippingAddress,billingAddress,checkout
 这里填的三个字符串是提供给as脚本用的,当你需要用as来控制myAccordion的子菜单时就能用到这三个字符串
 childLable属性中填:Shipping Address,Billing Address,Checkout
 这三个字符串将作为myAccordion菜单的标题来显示.

 accordion1.gif
 i)ctrl+enter测试

 

 2)Accordion跟MovieClip结合
 a)选择 File > New and create a new Flash Document.
 b)ctrl+F8(or insert(New symbol)起名为AddressForm,点击Advance按钮,选中Export for ActionScript.并在AS2.0 class处填:mx.core.View.这样做的目的是让Accordion的子菜单继承View类,因而可以实现tab order,当然,AS2.0处不填Accordion组件也可以正常工作只是不能自定义tab order


 accordion3.gif c),拖几个Button,Label组件到addressForm 这个mc中,排列好,并把排列好的所有元素的位置定到(0,0)[addressForm这个mc中的(0,0)坐标对应着Accordion的(0,0)坐标].
 d)回到主场景
 e)重复b,c步骤再创建一个CheckoutForm
 f)拖一个Accordion组件到主场景,起名为myAccordion并编辑如下属性
 childSymbols:[AddressForm,AddressForm,CheckoutForm]
 childName:[shippingAddress,billingAddress,checkout]
 childLable:[Shipping Address,Billing Address,Check Out]

 accordion4.gif
 g)测试

 

 使用AS2

 选择 File > New and create a new Flash Document.
 拖一个Accordion组件到主场景,并起名为myAccordion
 拖一个TextInput和一个Label组件到主场景并删除它们,这样做的目的是把它们导入库中以便在as中使用
 在主场景第一帧写:

 // 创建三个Accordion子菜单,分别为shippingAddress,billingAddress,payment,createChild方法的用法简单说一下,下面的语句创建一个View类的实例,叫做shippingAddress,并设定它的label属性(也就是标题文字)为”Shipping Address”,其它类似
 myAccordion.createChild("View", "shippingAddress", {label:"Shipping Address"});
 myAccordion.createChild("View", "billingAddress", {label:"Billing Address"});
 myAccordion.createChild("View", "payment", {label:"Payment"});

 //创建第一个子菜单的内容,把TextInput,Label组件加到子菜单中
 //这里的createChild方法是在shippingAddress子菜单中创建一个库中存在的一个”TextInput”组件的实例,命名为“FirstName”其它类似
 var o=myAccordion.shippingAddress.createChild("TextInput","FirstName"wink.gifscreen.width/2)this.width=screen.width/2" vspace=2 border=0>;
 var l=myAccordion.shippingAddress.createChild("Label","FirstName",{text:"FirstName"});
 l.move(0,10)
 o.move(70,10);
 o.setSize(110,20);

 //创建第二个子菜单的内容
 o=myAccordion.billingAddress.createChild("TextInput","LastName"wink.gifscreen.width/2)this.width=screen.width/2" vspace=2 border=0>;
 l=myAccordion.billingAddress.createChild("Label","LastName",{text:"LastName"});
 l.move(0,50);
 o.move(80,50);
 o.setSize(150,20);
  
  
 accordion5.gif

 

 这就是Accordion组件的基本用法,有关一些其它的方法,属性,可以查下帮助,然后逐个试一下,很容易明白的。

easyui中layout、accordion加tabs实现简单菜单布局实例

一般对于后台界面都是采用BorderLayout进行布局的。BorderLayout也就是将界面分成五块,如下图所示,分别有:North、East、South、West、Center其中比较特殊的是C...
  • u012345283
  • u012345283
  • 2015年03月15日 23:38
  • 5344

MUI-折叠面板效果accordion

在做开发的过程中我们经常用到折叠面板。那我们来看下折叠面板究竟是怎么使用。 废话不多说。 代码粘下来: 折叠效果 mui.init(); ...
  • u013059555
  • u013059555
  • 2015年07月16日 21:47
  • 4938

Accordion 删除菜单,EasyUI Accordion 折叠面板

首页 用户管理
  • CSDNones
  • CSDNones
  • 2016年10月05日 16:22
  • 2765

三.MUI - accordion(折叠面板)、button(按钮)

1、折叠面板 折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下: class="mui-table-view"> class="mui-table-view-ce...
  • zm06201118
  • zm06201118
  • 2017年04月07日 22:06
  • 712

semantic-ui引入css和js(折叠菜单为例)

index.html
  • GeekLeee
  • GeekLeee
  • 2017年05月05日 20:01
  • 1835

easyui-accordion动态生成菜单的实现

暑假无聊,突然想起期末的模拟项目还没做完,当时就准备把菜单做成动态的,可惜因为某些原因没有完成,既然记起了就花点时间做了吧,以免我忘了       首先看完成的效果: 需求:一级菜单在登陆成功后就加...
  • J_Demon
  • J_Demon
  • 2015年08月03日 17:30
  • 11879

[JQ权威指南]折叠面板插件accordion

JQuery Ui 插件accordion可以实现页面中指定区域的折叠效果,这种效果俗语“手风琴”。即通过单击某块面板中的标题栏,就会展开响应的内容,单击其他面板标题栏时,已展开的内容会自动自动关闭,...
  • david_520042
  • david_520042
  • 2016年12月06日 09:05
  • 424

浅谈CSS+jQuery实现折叠菜单

折叠菜单 body{ background:grey; font-family:Microsoft Yahei; color:white; } .types a{ ...
  • zhouziyu2011
  • zhouziyu2011
  • 2016年12月20日 09:29
  • 462

Ext3 动态加载Accordion布局面板和树菜单

Ext3 动态加载Accordion布局面板和树菜单
  • u011041491
  • u011041491
  • 2016年12月07日 16:54
  • 942

用ReactJs写一个简单的手风琴菜单效果

ReactJs除了利用Virtual DOM大大提高了页面渲染速度。本身基于组件的编码方式也很优雅,组件层次结构比较清晰,挺易于维护的。下面用ReactJs写一个简单的手风琴菜单效果,仅供学习交流。完...
  • dullchap
  • dullchap
  • 2016年09月08日 16:00
  • 1103
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:MX2004组件(二)Accordion[折叠菜单]
举报原因:
原因补充:

(最多只允许输入30个字)