前言
jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件，并且还可以定制Web UI的主题风格。从而可以应用它轻松地构建出高度可交互的Web 应用程序的UI界面。
随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交互数据，对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高；同时随着移动设备的普及，客户端的访问设备也逐渐多样化。如何为不同的客户端设备提供统一的Web应用界面，从而提高开发效率和降低开发成本。目前比较好的技术实现手段是应用JQuery及JQuery UI系统库相关的技术。
作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校软件学院一线的教学工作体验，在本系列文档中通过具体的程序代码示例为读者介绍jQuery UI中典型的应用组件技术。本文档主要涉及jQuery UI Accordion组件及技术特性、Accordion组件的典型属性及应用示例、Accordion组件的典型事件及应用示例、如何重新排序Accordion组件的Tab页头、如何拖动改变Accordion组件的大小等方面的内容。
欢迎读者下载相关的技术资料阅读和收藏，并提出良好的建议。感兴趣的读者可以在百度文库页面中搜索“杨少波”，将能够搜索到杨教授工作室精心创作的优秀程序员职业提升必读系列技术资料。
这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”和“经验方法”等方面与读者进行充分的交流，也欢迎读者发表和交流自己对软件开发、课程设计、项目实训、技术学习的心得体会。
本文目录
1.1JQuery UI库及应用 (3)
1.1.1jQueryUI库及技术特性 (3)
1.1.2使用JQuery UI系统库 (5)
1.2Accordion应用技术示例 (6)
1.2.1jQuery UI Accordion组件 (6)
1.2.2jQuery UI系统库中的Accordion示例一 (7)
1.2.3jQuery UI系统库中的Accordion示例二 (8)
1.2.4Accordion组件active成员属性功能含义及应用 (11)
1.2.5Accordion组件animated成员属性功能含义及应用 (12)
1.2.6Accordion组件collapsible成员属性功能含义及应用 (13)
1.2.7Accordion组件disabled成员属性功能含义及应用 (13)
1.2.8Accordion组件event成员属性功能含义及应用 (14)
1.2.9Accordion组件heightStyle成员属性功能含义及应用 (15)
1.2.10Accordion组件icon成员属性功能含义及应用 (16)
1.2.11Accordion组件的典型事件及应用示例 (19)
1.2.12拖动改变最外部容器的大小和使得面板内容充满父容器的尺寸 (21)
1.2.13重新排序手风琴组件的Tab页头示例 (25)
1.1JQuery UI库及应用
1.1.1jQueryUI库及技术特性
1、jQueryUI库是jQuery 的一部分
jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件，并且还可以定制Web UI的主题风格。从而可以应用它轻松地构建出高度可交互的Web应用程序的UI界面。
2、jQuery UI主要包含三部分
（1）交互组件
交互组件主要包含有Draggable、Droppable（拖拽组件）、Resizable（可调整大小组件）、Selectable （选择组件）和Sortable（排序组件）等。这些都是要与鼠标等设备进行交互的，所以属于界面交互组件。
（2）微件（小部件）
所谓的微件其实是组成Web页面的一个个功能独立的小组件，主要包括有Accordion（手风琴式的折叠菜）、AutoComplete、ColorPicker、Dialog（对话框）、Slider（滑动条）、Tabs（页签）、DatePicker （日历）、Magnifier（放大镜效果）、ProgressBar、Spinner等小组件。
（3）效果库
jQuery UI的效果库提供了更加炫酷的效果，从而使得构建出的动画效果与众不同，并且更加惊艳。
3、jQuery UI的主要特
（1）简单易用
继承jQuery的系统API，使用简单方便、并提供有高度抽象的接口，能够有效地改善Web应用系统的可用性。
（2）开源免费
采用MIT & GPL 双协议授权，轻松满足自由产品至企业产品各种授权需求。
（3）广泛兼容
兼容各主流桌面浏览器。包括IE 、Firefox、Safari、Opera 和Chrome等主流的浏览器。
（4）轻便快捷
各个组件间之间相对独立，可按项目的应用需要加载对应的组件。
4、与jQuery UI相关的资源所在的网站
（1）官方首页下载系统库：jqueryui/download
可以选择所需要的主题风格模板，然后再下载对应的CSS样式模板文件。其中的ThemeRoller 是jQuery UI 的官方主题定制的工具。在ThemeRoller Gallery 页面中点击其中的图片可以查看官方主题，然后再通过页面中的“Edit”链接修改现有的主题或下载（“Download”）链接直接下载默认的主题系统包。
（2）示例和文档下载：jqueryui/demos/
（3）下载不同的皮肤：jqueryui/themeroller/
5、与jQuery UI相关的开发文档
在jqueryui/development提供有包括开发者指南、规划Wiki、Roadmap等开发文档。
1.1.2使用JQuery UI系统库
jquery在线库1、在页面中包含jQuery UI 的系统库
（1）引入jQuery的系统库文件（不同版本的jQuery系统库的文件名称是不同的）<script src="../javascript/jquery-1.10.2.js" language="javascript"
type="text/javascript"></script>
（2）引入jQuery UI的系统库文件
<script src="../javascript/jquery-ui-1.10.3.custom.js"
language="javascript" type="text/javascript"></script> （3）引入jQuery UI提供的CSS样式定义文件
拷贝jQuery所定制的CSS样式jquery-ui-1.10.3.custom.css文件及相关图片文件目录images到项目的css目录中（不同版本的jQuery UI的CSS文件也不一样），根据实际应用的版本进行选择。如下图所示为本文档资料中的示例所使用的jQuery UIuo提供的CSS样式定义文件：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。