通过代码示例学习jQueryUI库Accordion应用技术（第2部分）

通过代码示例学习jQueryUI库Accordion应用技术（第2
部分）
本文目录
1.1通过代码示例学习jQueryUI库Accordion应用技术（第2部分） (2)
1.1.1Accordion组件event成员属性功能含义及应用 (2)
1.1.2Accordion组件heightStyle成员属性功能含义及应用 (2)
1.1.3Accordion组件icon成员属性功能含义及应用 (3)
1.1.4Accordion组件的典型事件及应用示例 (6)
1.1.5拖动改变最外部容器的大小和使得面板内容充满父容器的尺寸 (9)
1.1.6重新排序Accordion组件的Tab页头示例 (12)
1.1.7使用cookie缓存最后选中Accordion页的应用示例 (15)
1.1通过代码示例学习jQueryUI库Accordion应用技术（第2部分）1.1.1Accordion组件event成员属性功能含义及应用
1、event成员属性的主要功能
event定义如何展开其中的面板。

因为在缺省情况下，打开Accordion组件中的某个部分内容区是通过鼠标点击该内容区所对应的Tab头标题条区域。

而如果需要实现移动鼠标或者其它的方式，该部分自动能够展开对应的内容区，可以通过设置event成员属性值。

2、event成员属性的应用示例
上面的示例中的设置是定义为鼠标指向将触发切换面板。

3、event成员属性的默认设置值是'click'（鼠标点击）
可以根据项目的应用需要，也可以设置为双击、鼠标滑过等切换方式。

1.1.2Accordion组件heightStyle成员属性功能含义及应用
1、heightStyle成员属性的主要功能
主要控制面板的内容区的高度。

因为Accordion是由“Block级”元素所组成的，因此
它在缺省样式风格下在水平方向是占据父元素的整个宽度。

为了能够在高度方向也可以充满其父容器的高度，可以通过配置定义heightStyle成员属性值为fill。

2、heightStyle成员属性的数据类型
该成员属性值为字符串String类型，默认值为“auto”。

如果设置为“auto”，所有的面板的高度为最高的面板高度；而如果设置为“fill”，将充满父容器所提供的高度；而如果设置为“content”，每个面板的高度由其中的内容自动决定。

3、heightStyle成员属性的应用示例
4、获得或者设置heightStyle成员属性值
（1）获得heightStyle成员属性值
获得该采用属性值的相关代码如下：varheightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
（2）设置heightStyle成员属性值
而设置改变该成员属性值的代码如下：$( ".selector" ).accordion( "option", "heightStyle", "fill" );
1.1.3Accordion组件icon成员属性功能含义及应用
1、icon成员属性的主要功能
设置手风琴组件内的Tab头中的小图标的样式及风格，从而更加形象地指示手风琴组件内的内容区目前是处于打开还是关闭状态。

手风琴组件内的Tab头中的缺省图标为箭头——未展开时的箭头向右，而展开时的箭头向下，使用jQuery CSS框架中预定义的CSS类样式或是通过自定义背景图像等方式都可以重新配置这两个图标。

2、icon成员属性值的数据类型
该成员属性的值为对象类型，默认的CSS属性项目值如下所示：icons: {
"header": "ui-icon-triangle-1-e",
"activeHeader": "ui-icon-triangle-1-s"
}
也就是将手风琴组件内的Tab头中的小图标采用三角形图标，打
开状态时为向下的三角形，而关闭状态时为向右的三角形。

“ui-icon-triangle-1-e”等CSS样式都是在jQuery UI CSS 文件中定义的标准样式名称。

当然，也可以选择其它的CSS样式名称，从而改变Tab头中的小图标的类型。

3、icon成员属性值的应用示例
下面的代码示例是改变Tab头中的小图标为“+”和“-”的图标风格。

4、获得或者设置icon成员属性值的应用示例
（1）获得icon成员属性值
获得该采用属性值的相关代码如下：var icons = $( ".selector" ).accordion( "option", "icons" );
（2）设置icon成员属性值
而设置改变该成员属性值的代码如下：
$( ".selector" ).accordion( "option",
"icons", {
"header": "ui-icon-plus",
"headerSelected": "ui-icon-minus"
}
);
而下面的示例实现动态切换图标
切换图标
1.1.4Accordion组件的典型事件及应用示例
1、Accordion组件的典型事件
（1）activate事件
在Accordion组件的Tab头进行切换改变时将触发本事件，早期的版本为change事件。

（2）beforeActivate
在Accordion组件的某个Tab头将被激活时将触发本事件。

（3）create
在Accordion组件被构建时将触发本事件。

2、回顾JQuery中的事件动态绑定的方法
（1）新版本对事件动态绑定的方法进行了调整
从jQuery1.7版本开始，在jQuery中引入了全新的事件动态绑定机制，on()和off()两个函数统一处理事件绑定。

因为在此版本之前主要提供有bind()、live()和delegate()等方法来处理事件的绑定，jQuery从性能优化以及事件绑定方式的统一等方面综合考虑，决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

（2）语法定义on(events,[selector],[data],fn)
其中的各个参数的含义如下：
1）events：一个或多个用空格分隔的事件类型名称，如“click”或“keydown”。

2）selector：一个选择器字符串用于过滤器的触发事件的选择器元素的后代。

如果选择器为null或省略，当它到达选定的元素，事件
总是触发。

3）data：当一个事件被触发时要传递event.data给事件处理函数。

4）fn：该事件被触发时执行的函数
（3）事件绑定的应用示例
$(document).on("click", function(e){
});
本示例实现将click事件绑定在document对象上，页面上任何元素发生的click事件都冒泡到document对象上得到处理。

而下面的示例是应用第2参数指定特定标签的选择器，当Click事件冒泡到document对象时，系统将检测事件的target，如果与传入的选择符（本示例为buttonT agID的ID属性值所定义的某个按钮标签）匹配，就触发事件，否则不触发——也就是当点击目标按钮时才触发Click事件。

$(document).on("click", "#buttonTagID", function(e){
});
on()也可以接收多个选择器，从而同时为多个不同标签绑定事件。

如下示例是为页面中的按钮标签和某个
标签绑定Click事件。

$(document).on("click", "#buttonTagID, #someOneDivT agID ", function(e){
});
on()也可以接收一个对象参数，该对象的属性是事件类型，属性值为事件处理函数。

$(document).on(
{
mouseenter: function() {
/**
处理鼠标进入事件
*/
},
mouseleave: function() {
/**
处理鼠标离开事件
*/
},
click: function() {
/**
处理鼠标点击事件
*/
}
}, "#someOneDivT agID");
上面的示例实现对页面中的某个
标签同时设定鼠标进入、鼠标离开和鼠标点击等事件，并分别给出对应的事件处理方法。

3、绑定activate事件的方法
（1）在初始化时应用activate事件属性绑定activate事件
$(function(){
$("#accordionPanelDivTagID").accordion({
activate: function( e, ui ){
}
});
});
（2）在创建Accordion组件后应用on函数绑定activate事件$("#accordionPanelDivTagID").on("accordionactivate", function(event, ui) {
});
使用该方法绑定activate事件，必须要用“accordionactivate”的事件名称。

4、activate事件（也包括beforeActivate 和create等事件）中
的ui参数
在change事件触发后，其中的ui参数包含有多个不同的子对象，其中的ui.newHeader 代表激活改变后的Tab头的jQuery对象，ui.oldHeader代表激活改变前的Tab头的jQuery对象，ui.newPanel 代表激活改变后的内容区的jQuery对象，ui.oldPanel代表激活改变前的内容区的jQuery对象。

1.1.5拖动改变最外部容器的大小和使得面板内容充满父容器的尺寸
1、相关的标签示例
下面的示例是应用JQuery内的draggable组件实现拖动功能。

#accordionFatherT agID {
/**
下面的padding可以控制“拖放的箭头”的位置，是位于面板内部还是外部
*/
padding: 10px;
/**
定义父容器的初始尺寸
*/
width: 350px;
height: 220px;
}。