jQuery UI库使用记录----accordion

简单的应用举例：

    html中增加类似于如下的内容

    <div id="accordion">

    <h3><a href="#">Page 1</a></h3>

    <div>Content of page 1</div>

    <h3><a href="#">Page 2</a></h3>

    <div>Content of page 2</div>

    <h3><a href="#">Page 3</a></h3>

    <div>Content of page 3</div>

    </div>

    然后在js文件中用$("#accordion").accordion();就可以使用了，里面可以有很多参数，如下：

• active：可以为false，表示初始不打开任何栏目，若为false，需要collapsible为true；如果为数字，则初始时打开数字所指定的栏目，默认为0
• animate：默认为‘{}
  • 可以为false，将取消栏目打开和关闭时的动画
  • 可以为数字，代表默认效果的毫秒数
  • 可以为字符串，为效果的名字
• collapsible：是否可以同时关闭所有的栏目，默认为false
• disbaled：是定accordion是否可用，若为true则不可用，默认为false
• event：确定更改栏目的事件，可以设定多种事件，如click，mouseover，同时设置时中间用空格隔开，默认为click
• header：一个选择器，将选择出的结果作为栏目头，默认为“> li > :first-child,> :not(li):even”
• heightStyle：确定每个栏目的高度，可以使用三种配置，默认为auto：
  • “auto”：所有栏目的高度都会被设置成高度最高的栏目的高度
  • “fill”：根据accordion的父节点来决定栏目的高度
  • “content”：栏目的高度决定于其内容的高度
• icons：栏目头的图标，使用false时候不包含任何图标签，有两个图标需要配置，默认值为{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }
  • header：栏目未打开时的图标
  • activeHeader：栏目打开时的图标

    同时accordion还有很多方法，使用如$( " #accordion " ).accordion( "destory" )：

• destory：销毁
• disable：让accordion无效
• enable：让accordion有效
• option：获取accordion的配置，使用如下：
  • var isDisabled = $( "#accordion" ).accordion( "option", "disabled" );
• option：直接获得整个配置Object
  • var options = $( "#accordion" ).accordion( "option" );
• option：传入值和配置名来修改配置
  • $( " #accordion" ).accordion( "option", "disabled", true );
• option：传入一个Object来直接设置accordion的配置
  • $( " #accordion " ).accordion( "option", { disabled: true } );
• refresh：重新计算各个栏目的高度，依赖于heightStyle参数，这个方法不接受任何参数
• widget：这个方法返回一个jQuery组件类

    另外可以利用jQuery的sortable方法为栏目添加排序功能，官方的demo如下：

• html文件中：

            <div id="accordion">

  <div>

  <h3><a href="#">Page 1</a></h3>

             <div>Content of page 1</div>

  </div>

    

        <div>

  <h3><a href="#">Page 2</a></h3>

             <div>Content of page 2</div>

  </div>

    

<div>

  <h3><a href="#">Page 3</a></h3>

             <div>Content of page 3</div>

  </div>

</div>

• js文件中：

            $('#accordion').accordion({

                header: "> div > h3"

             })

             .sortable({

                axis: "y",

                handle: "h3",

                stop: function( event, ui ) {

                      ui.item.children( "h3" ).triggerHandler( "focusout" );

                }

              });