Chico UI之Accordion

阅读更多

Chico UI 之Accordion

 1、  简介

Accordion是继承与Chico UI的Widget。Accordion在UI组件中很常见，效果也就是让文本组织结构比较类似一系列的文件夹。

2、  依赖

Accordion需要依赖于Chico UI中的Menu和Expandable，其实就是两个组件的组合罢了。

3、  返回值

调用方式为: var widget = $(“.yourClass”).accordion()  //class调用方式

放回值 widget就是accordion自身。

4、  使用说明

创建一个Accordion的基本调用方法：

var widget = $(".yourClass").accordion();

在创建Accordion过程中可以配置一些属性信息：

var widget = $(".example").accordion({ "selected": 2, "fx": true });

其中配置的selected属性是说明选中第几个组件（被选中的组件会自动的打开），而fx是说明是否启用用户界面效果。

5、  配置说明

Accordion的配置参数为Object，Accordion默认支持的配置信息为：selected和fx，其中selected为数字类型用于选取一个组件来默认显示内容。而fx则是布尔类型用于确定使用或者不使用用户界面效果。默认情况下会将fx设置为false。

6、  属性信息

主要有element、type和uid。

element:DOM元素的引用信息，这是该组件下的DOM结构。是该属性获取方式为：

var widget = $(“.yourClass”).accordion(); var e = widget.element;

type:返回值类型string，组件定义的公共属性，通过firefox测试发现该属性值是menu。

uid:返回值类型number，在Chico UI中定义一个唯一的uid，该每个实例都有一个不同的uid。

7、  方法

off(event, handler)：该操作是在事件发生时，删除某个绑定事件的方法。

var donging = function () { // Some code here! }; widget.off("ready", donging);

on(event, handler)：该操作是在事件发生时，添加某个方法。

var donging = function () { // Some code here! }; widget.on("ready", donging);

 once(event, handler)：该操作是在第一次事件发生后，执行某个方法。

8、  效应事件类型

ready：组件可以被使用时的事件。

select：某一个具体组件被选中时的事件。