Jquery李炎恢—57折叠菜单【23】

学习要点：

1.使用accordion

2.修改accordion样式

3.accordion()方法的属性

4.accordion()方法的事件

5.accordion中使用on

折叠菜单（accordion），和选项卡一样也是在同一个页面上切换不同内的功能UI，它和选项卡的使用几乎没有什么太大区别，只是显示的效果有所差异罢了。

一、使用accordion

使用accordion比较简单，但需要按照指定的规范即可。

//html部分

<div id="accordion">

     <h1>菜单1</h1>

     <div>内容1</div>

     <h1>菜单2</h1>

     <div>内容2</div>

     <h1>菜单3</h1>

     <div>内容3</div>

</div>

//jquery部分

$("#accordion").accordion();

二、修改accordion样式

在显示的accordion折叠菜单中，在火狐浏览器中打开Firebug或者右击查看元素。这样，我们可以看看accordion的样式，根据样式进行修改。我们为了和网站主题符合，对accordion的背景进行修改。

//无须修改ui里的CSS，直接用style.css替代掉

ui-widget-header{

  background:url(../img/ui_header_bg.png);

}

三、accordion()方法的属性

选项卡方法有两种形式：1.accordion(options),options是以对象的形式传参，每个键值对表示一个选项；2.accordion("action",param),action是操作选项卡方法的字符串，param则是options的某个选项。

accordion外观选项

属性：collapsible，默认值/类型：false/布尔值，说明：当设置为true时，允许菜单折叠对应的内容。默认值为false，不会关闭对应内容。
属性：disabled，默认值/类型：无/布尔值，说明：默认为false，设置为true则禁用折叠菜单。
属性：event，默认值/类型：click/字符串，说明：触发accordion的事件类型，默认为click，可以设置mouseover等其他鼠标事件。
属性：active，默认值/类型：数值和布尔值，说明：如果是数值，初始化时默认显示哪个tab，默认值为0，如果是布尔值，那么默认是否折叠。条件必须是collapsible值为true。
属性：heightStyle，默认值/类型：content/字符串，说明：默认为auto，即自动根据最高的那个为基准，fill则是填充一定的可用高度，content则是根据内容伸展高度。
属性：header，默认值/类型：h1/字符串，说明：设置折叠菜单的标题标签。
属性：icons，默认值/类型：默认图标，说明：设置想要的图标。

$("#accordion").accordion({

   collapsible:true,

   disabled:true,

   event:"mouseover",

   active:1,

   active:true,

   heightStyle:"content",

   header:"h3",

   icons:{

       "header":"ui-icon-plus",

       "activeHeader":"ui-icon-mimus",

   },

});

四.accordion()方法的事件

除了属性设置外，accordion()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数。

accordion事件选项
事件名：create，说明：当创建一个折叠菜单时激活此事件。该方法有两个参数（event，ui），ui参数有两个子属性header和panel，得到当前标题和内容选项的对象。
事件名：active，说明：当切换一个折叠菜单时，启用此事件，该方法有两个参数（event，ui），ui参数有四个子属性newHeader,newPanel,oleHeader,oldPanel。分别得到的是新header对象，新内容对象，旧header对象和旧内容对象。
事件名：beforeActive，说明：当切换一个折叠菜单之前，启动此事件，该方法有两个参数（event，ui），ui参数有四个子属性newHeader,newPanel,oleHeader,oldPanel。分别得到的是新header对象，新内容对象，旧header对象和旧内容对象。

//当折叠菜单创建时触发

$("#accordion").accordion({

   create:function(event,ui){

      alert($(ui.header.get()).html());

      alert($(ui.panel.get()).html());

   },

});

//当切换到一个菜单时触发

$("#accordion").accordion({

   activate:function(event,ui){

      alert($(ui.newHeader.get()).html());

      alert($(ui.newPanel.get()).html());

      alert($(ui.oldHeader.get()).html());

      alert($(ui.oldPanel.get()).html());

   },

});

//当切换到一个菜单之前触发

$("#accordion").accordion({

   beforeActivate:function(event,ui){

      alert($(ui.newHeader.get()).html());

      alert($(ui.newPanel.get()).html());

      alert($(ui.oldHeader.get()).html());

      alert($(ui.oldPanel.get()).html());

   },

});

accordion("action",param)方法

方法：accordion("disable")，返回值：jquery对象，说明：禁用折叠菜单

方法：accordion("enable")，返回值：jquery对象，说明：启用折叠菜单

方法：accordion("widget")，返回值：jquery对象，说明：获取折叠菜单的jquery对象

方法：accordion("destroy")，返回值：jquery对象，说明：删除折叠菜单，直接阻断了accordion

方法：accordion("refresh")，返回值：jquery对象，说明：更新折叠菜单，比如高度。

方法：accordion("option",param)，返回值：一般值，说明：获取options属性的值

方法：accordion("option",param，value)，返回值：jquery对象，说明：设置options属性的值

//禁用折叠菜单

$("#accordion").accordion("disable");

//启用折叠菜单

$("#accordion").accordion("enable");

//获取折叠菜单jquery对象

$("#accordion").accordion("widget");

//更新折叠菜单

$("#accordion").accordion("refresh");

//删除accordion折叠菜单

$("#accordion").accordion("destroy");

//得到accordion的options值

alert($("#accordion").accordion("options","active"));

//设置accordion的options值

$("#accordion").accordion("option","active",1);

五、accordion中使用on()
在accordion的事件中，提供了使用on()方法处理的事件方法。

on()方法触发的选项卡事件
特效名称：accordionactivate，说明：折叠菜单切换是触发
特效名称：accordionbeforeactivate，说明：折叠菜单切换前触发

//菜单切换时触发

$("#accordion").on("accordionactivate",function(){

    alert("菜单切换时触发！")；

});

//菜单切换前触发

$("#accordion").on("accordionbeforeactivate",function(){

    alert("菜单切换前触发！")；

});