Jquery EasyUI系列教程3

jquery easyui中的accordion一般用来做分组，如菜单的分组、表单的分组等。（easyui 1.2.6）

初始化的两种方式：

方式一：

      <div id="aa" class="easyui-accordion" border="false" style="width:700px;height:300px;">

              <div title="first Title" border="false">

                content first

              </div>

              <div title="second Title" border="true">

                content content

              </div>

      </div>

方式二：

      html代码：<div id="aa" border="false"></div>

      script代码：$("#aa").accordion({width:700,height:300});

  说明：如果使用方式二进行组件的初始化，那么accordion的属性是怎样应用的呢？首先说明的是属性有jquery easyui本身对accordion的默认配置（$.fn.accordion.defaults）A，其次是在div标签中的属性B，最后是在script中配置的属性C；优先级顺序是C->B->A，优先级高的属性优先被应用，优先级低的则会被覆盖。

属性介绍（属性既可以作为标签的属性配置，也可以作为json对象属性配置）：

    width:"auto"：设置accordion的宽度，默认值为auto

    height:"auto"：设置accordion的高度，默认值为auto

    fit:false：是否自动填充父容器，默认值为false，

    border:true：是否显示边框，默认值为true，即显示边框。此属性和上边的fit属性都依赖于panel,即accordion是依赖于panel实现的，可以理解为继承了panel。

    animate:true：再点击accordion时，是否应用动画效果，默认为使用。

事件介绍：

    onSelect：在单击选择某一个面版的时候触发此事件。

    onAdd：添加面板的时候触发此事件。

    onBeforeRemove：在删除某个面版之前的时候，触发此事件。

    onRemove：删除面板触发此事件。

方法介绍：

  1、 options：获取当前accordion的配置属性值；

                  var opts = $("#accordionId").accordion("options");

                  opts.accordion属性：opts.width、opts.height,.......

   2、panels：获取所有的accordion面板；

                 var panels =  $("#accordionId").accordion("panels");

                 返回的是panel数组，数组中个每个元素都可以作为单个panel对待，而且可以应用panel中的属性、方法和事件。例如：panels[1].panel('options');获取panel的属性。

   3、resize：改变accordion的大小；

           持续完善中。。。。。。

   4、getSelected：获取被选中的面版；

   5、getPanel：获取某个面板；

   6、select：选择某个accordion面板

   7、add：添加一个面板；

   8、remove：删除某一个面板；

accordion方法的使用方式和用jquery初始化accordion组件的方式类似，不同之处就是第一个参数如果为object对象，则是初始化accordion组件或者修改已有的accordion属性，如果为字符串，则是调用accordion的方法。

From：http://bozch.iteye.com/blog/1517146