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