jQuery UI开发指南

目　录

第1章　jQuery UI介绍　1

1.1　jQuery UI的安装　1

1.2　jQuery UI概览　2

1.3　什么是CSS主题　3

1.4　在HTML页面中应该引入哪些文件　4

1.4.1　未压缩文件　4

1.4.2　压缩文件　6

1.5　更换CSS主题　8

1.6　准备开始　8

第2章　选项卡　9

2.1　选项卡的基本用法　9

2.2　格式化内容　11

2.3　tabs()方法　13

2.3.1　tabs(options)方法　13

2.3.2　tabs("action", params)方法　14

2.4　bind()方法　15

2.5　使用选项卡的示例　16

2.5.1　动态创建选项卡　16

2.5.2　使用Ajax修改选项卡的内容　17

2.5.3　通过Ajax把信息传输给服务器　18

2.5.4　使用选项卡的add方法　20

2.5.5　使用tabsadd事件　21

第3章　折叠菜单　23

3.1　折叠菜单的基本用法　23

3.2　格式化内容　25

3.3　accordion()方法　27

3.3.1　accordion(options)方法　27

3.3.2　accordion("action", params)方法　29

3.4　在折叠菜单上使用bind()管理事件　29

3.5　使用折叠菜单的示例　30

3.5.1　打开任意菜单　30

3.5.2　用Ajax加载菜单内容：使用options　31

3.5.3　用Ajax加载菜单的内容：使用accordionchange　32

第4章　对话框　34

4.1　对话框的基本用法　34

4.2　格式化内容　36

4.3　dialog()方法　38

4.3.1　dialog(options)方法　38

4.3.2　dialog("action", params)方法　42

4.4　在对话框中使用bind()处理事件　42

4.5　使用对话框的示例　43

4.5.1　打开和关闭对话框　43

4.5.2　在打开或者关闭对话框时应用特效　45

4.5.3　在关闭对话框时进行验证　45

4.5.4　隐藏关闭按钮　46

4.5.5　在对话框中插入按钮　47

4.5.6　使用Ajax插入内容　48

4.5.7　使用特效来更改对话框的行为　50

第5章　按钮　53

5.1　按钮的基本用法　53

5.2　格式化内容　54

5.3　button()方法　55

5.3.1　button(options)方法　55

5.3.2　button("action", params)方法　57

5.4　在按钮上使用bind()处理事件　57

5.5　单选按钮　57

5.5.1　显示单选按钮　57

5.5.2　使用buttonset()方法改进显示　58

5.6　复选框　59

5.6.1　显示复选框　60

5.6.2　使用buttonset()方法改进显示　60

5.7　使用按钮的示例　61

5.7.1　在按钮上显示图标　61

5.7.2　创建计算器　64

第6章　进度条　71

6.1　进度条的基本用法　71

6.2　格式化内容　72

6.3　progressbar()方法　73

6.3.1　progressbar(options)方法　73

6.3.2　progressbar("action", params)方法　73

6.4　在进度条上使用bind()处理事件　74

6.5　使用进度条的示例　74

6.5.1　逐渐填充进度条　74

6.5.2　在完成过程中的不同阶段进行处理　75

第7章　滑块　77

7.1　滑块的基本用法　77

7.2　格式化内容　78

7.3　slider()方法　79

7.3.1　slider(options)方法　79

7.3.2　slider("action", params)方法　81

7.4　在滑块上使用bind()管理事件　82

7.5　使用滑块的示例　82

7.5.1　显示单个游标的值　82

7.5.2　显示两个游标的值　84

7.5.3　使用滑块来调整图片的透明度　85

第8章　日历　87

8.1　日历的基本用法　87

8.2　格式化内容　88

8.3　datepicker()方法　90

8.3.1　datepicker(options)方法　90

8.3.2　datepicker("action", params)方法　95

8.4　使用日历的示例　95

8.4.1　用其他语言显示日历　95

8.4.2　在日历中显示多个月份　96

8.4.3　显示静态日历　99

8.4.4　指定最小及最大日期　99

8.4.5　禁止选择特定的日期　100

8.4.6　预先选择任意日期　101

8.4.7　在选择日期时执行Ajax请求　104

第9章　自动补全　106

9.1　自动补全的基本用法　106

9.2　格式化内容　107

9.3　autocomplete()方法　109

9.3.1　autocomplete(options)方法　109

9.3.2　autocomplete("action", params)方法　110

9.4　在建议列表上使用bind()管理事件　111

9.5　使用自动补全机制的示例　112

9.5.1　指定建议列表的宽度　112

9.5.2　打开HTML页面时即显示建议列表　113

9.5.3　在输入框获得焦点时显示建议列表　114

9.5.4　为建议列表的显示营造特效　114

9.5.5　动态创建建议列表　115

9.5.6　基于用户输入的数据动态创建建议列表　116

9.5.7　在建议列表中插入图片　118

第10章　拖放　122

10.1　draggable()方法　122

10.1.1　draggable(options)方法　122

10.1.2　draggable("action", params)方法　127

10.2　在移动元素上使用bind()管理事件　127

10.3　使用拖动功能的示例　128

10.3.1　在移动过程中执行额外处理　128

10.3.2　给移动施加一些限制　129

10.4　droppable()方法　135

10.4.1　droppable(options)方法　135

10.4.2　droppable("action", params)方法　137

10.5　在保管元素上使用bind()管理事件　138

10.6　使用放置功能的示例：购物车　138

10.6.1　使用拖放功能来创建一辆购物车　138

10.6.2　给购物车的放置过程添加视觉特效　141

10.6.3　从购物车中移除图书　142

第11章　选择元素　145

11.1　选择元素的基本用法　145

11.2　格式化内容　146

11.3　selectable()方法　149

11.3.1　selectable(options)方法　149

11.3.2　selectable("action", params)方法　150

11.4　在选区中使用bind()管理事件　151

11.5　使用选择机制的示例　151

11.5.1　显示选择序列中的事件发生顺序　151

11.5.2　禁止选择某特定元素　153

11.5.3　禁止通过点击来选择元素　155

11.5.4　管理购物车　156

第12章　页面内的元素调序　159

12.1　元素调序的基本用法　159

12.2　格式化内容　160

12.3　sortable()方法　162

12.3.1　sortable(options)方法　162

12.3.2　sortable("action", params)方法　168

12.4　使用bind()管理元素调换事件　168

12.5　使用元素调序机制的示例　169

12.5.1　显示事件出现的顺序　169

12.5.2　在列表中放置任何元素　175

第13章　缩放　181

13.1　缩放的基本用法　181

13.2　格式化内容　182

13.2　resizable()方法　183

13.2.1　resizable(options)方法　183

13.3.2　resizable("action", params)方法　186

13.4　在缩放元素上使用bind()处理事件　187

13.5　使用缩放机制的示例　187

13.5.1　缩放时显示元素的尺寸　187

13.5.2　缩放时显示元素的位置　188

13.5.3　在缩放过程中执行动画　189

13.5.4　创建一个可缩放的文本框　191

第14章　jQuery UI中的视觉特效　194

14.1　新的视觉特效　194

14.1.1　effect(effectName, options, duration, callback)方法　194

14.1.2　blind特效　195

14.1.3　bounce特效　196

14.1.4　shake特效　197

14.1.5　clip特效　197

14.1.6　drop特效　198

14.1.7　explode特效　200

14.1.8　fold特效　201

14.1.9　highlight特效　201

14.1.10　puff特效　202

14.1.11　pulsate特效　203

14.1.12　scale特效　204

14.1.13　size特效　204

14.1.14　slide特效　205

14.2　show()、hide()以及toggle()方法　206

14.3　jQuery UI提供的增强的animate()方法　207

14.3.1　管理颜色的CSS属性　208

14.3.2　新的easing选项值　209

14.4　使用CSS类生成特效　210

14.4.1　addClass()、removeClass()以及toggleClass()的增强型方法　210

14.4.2　switchClass()方法　211

14.4.3　使用toggleClass()方法的示例　211

作者在国内前端开发圈子中极具认可度既包括基础内容，又包含部分高级内容知识点用具体的示例讲解，丰富实用介绍组件基本使用方法用简单通俗的语言详细解释说明组件的配置及事件选项通过精挑细选、循序渐进的示例帮助读者巩固学到的知识点《jQuery UI开发指南》是jQuery UI的快速开发指南，全面介绍jQuery UI如何改进HTML页面展示，内容包括jQuery UI 1.8版本的下列扩展特性：选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历、自动补全、拖放管理、选择元素、缩放、元素调序以及新的视觉特效等。　　《jQuery UI开发指南》共14章，讲述了jQuery UI的所有功能。作者用精简的代码展示了jQuery UI组件的使用方法，挑选出最为重要的配置选项和组件事件进行详细解释说明。精选的示例循序渐进、由易到难，从假设问题到解决问题，显示了作者挖掘jQuery UI功能的思考过程。　　《jQuery UI开发指南》适合Web开发人员及设计人员阅读。无论是jQuery UI的初学者还是有一定经验的开发人员，本书都是极好的技术参考书。【作者简介】Eric Sarrion管理着一个小型的培训与开发公司，曾为O‘Reilly法国分部写过多本有关Rails、HTML/CSS、J2EE以及JavaScript方面的书。