祝大家 "圣诞快乐"
就算是在还没有正式release的 Flex SDK 4.5 (Hero) 中我也没有发现有Spark Accordion,所以我就发扬,“自己动手,丰衣足食”的精神,自己开写一个。
先说为什么要创建这个基于spark的accordion控件。大家都知道Flex中有几种默认导航控件: TabBar, ButtonBar, Accordion,他们可以绑定到ViewStack。
做个简单的程序时,这种绑定为我们还来了方便,但在一个很正规的web site,我们要考虑导航和URL的交互(Flex用deeplink来解决),一旦用deeplink机制,则意味着网站导航不仅仅是靠用户在page中click这些导航控件来驱动,用户也可以直接输入URL进行直接定位。这样导航控件和ViewStack的这种封闭的bind关系必须要断开。所有的导航全部交给DeepLink来做,Tabbar, Accordion之类的控件的change事件,将先反映到DeepLink,DeepLink再负责切换viewstack。用户直接输入URL,也会直接反映到DeepLink, DeepLink不仅切换ViewStack,还要正确控制所有导航控件的SelectedIndex。
基本上面的分析,我们可以看出,Flex的Accordion, TabBar, ButtonBar的dataProvider已经没有实际意义,为此我决定做一组以mxmlContent(子可视控件)为DefaultProperty的导航组件,Accordion就是其中之一。
这个Accordion是基于Spark的BorderContainer的, 并且可以将skin和 layout可以分开.
主要的类:
public class Accordion extends BorderContainer;
public class AccordionItem extends BorderContainer;
还有两个皮肤:
AccordionSkin和AccordionItemSkin,大家可以换皮肤
看Demo,右键可以view source:
http://www.smithfox.com/myopensource/accordion/Main.swf
欢迎大家使用,有任何建议或是问题都可以在 http://www.smithfox.com/?e=37 留言。乐意和大家一起学习和交流.
分享到:
相关推荐
Ajax之Accordion控件的用法,这个控件在Ajax里面使用很方便,详情请看代码部分;
这主要实现动态从数据库中提取数据,显示在菜单中
AjaxControlToolkit之Accordion控件Demo
在VS2005或VS2008环境中使用AJAX控件的Accordion控件时,总是有问题,本人总结自己使用这个控件的经验,给出了具体的操作步骤。
Flex4中头部背景图片的Accordion实例。 案例。
Flex Accordion 仿佛不能同时全部关闭, 或者展开, 于是自己写了个组件, 模拟实现下, 不多说了, 感兴趣的看看吧, 希望用到的可以参考, 不明白的留言, 呵呵!
AjaxControlToolKit之Accordion控件的详细使用(C#,VS2008,.Net3.5环境,MSSQL2005),共介绍了3种使用方法,并附带Word文档,有详细解释。
flex3.2分页控件以及通过flexlib自定义Accordion
用Accordion写了一个简单的系统模板,稍微改改就可以用。希望大家可以完善它
ASP.NET AJAX控件之Accordion(视频+源码+ajax安装包) ajax
使用JQUERY的JS做的 Accordion HTML菜单 Treeview示例
在TourDeFlexhttp://www.adobe.com/devnet/flex/tourdeflex.html中有个折叠式手风琴控件(Collapsible Accordion),可以折叠手风琴,很酷,但不支持中文。几经尝试发现是由于Flex控件在旋转后中文就不显示了,因此做...
Accordion 是一个AJXA 控件 实现菜单的折叠
你想试用 扩展控件Accordion折叠面板+CollapsiblePanel 面板隐藏 吗? 使用 它 可以很方便你的开发哦!
AppleAccordionExample, 基于flex的accordion例子
环境:MyEclipse6.0.1+Flex3插件版,jdk1.6,tomcat6.0,dom4j1.6.1,lcds.war, 使用技术:1.Java+flex,及其对象的转换。 2.Java方面,使用dom4j对xml进行操作,包括节点的读取,添加,修改,删除。 3.Flex方面...
ASP.NET AJAX控件系列 第2讲 Accordion(Hona) 视频讲座
accordion
ExtJS 4 复杂 百叶窗(accordion)布局