jQuery EasyUI從零開始學(xué)

第1篇  EasyUI的基礎(chǔ)組件

第1章  jQuery EasyUI快速入門 3

1.1  什么是jQuery EasyUI 3

1.2  jQuery EasyUI的初步使用 4

1.2.1  下載及版本說明 4

1.2.2  直接在HTML中使用 4

1.2.3  使用Javascript創(chuàng)建 4

1.3  搭建本地服務(wù)器 5

1.4  實(shí)戰(zhàn)：第一個(gè)EasyUI注冊(cè)頁面 8

1.5  小結(jié) 9

第2章  EasyUI表單 10

2.1  文本框簡(jiǎn)介 10

2.1.1  驗(yàn)證框（ValidateBox） 11

2.1.2  文本框（TextBox） 17

2.1.3  密碼框（PasswordBox） 26

2.1.4  數(shù)字框（NumberBox） 27

2.2  組合簡(jiǎn)介 33

2.2.1  組合（Combo） 33

2.2.2  組合框（ComboBox） 37

2.3  微調(diào)器簡(jiǎn)介 46

2.3.1  微調(diào)器（Spinner） 46

2.3.2  數(shù)字微調(diào)器（NumberSpinner） 48

2.3.3  時(shí)間微調(diào)器（TimeSpinner） 49

2.3.4  日期微調(diào)器（DateTimeSpinner） 50

2.4  菜單和按鈕 51

2.4.1  菜單（Menu） 51

2.4.2  鏈接按鈕（LinkButton） 56

2.4.3  菜單按鈕（MenuButton） 59

2.4.4  分割按鈕（SplitButton） 61

2.4.5  切換按鈕（SwitchButton） 63

2.5  快速輸入日期 64

2.5.1  日歷（Calendar） 65

2.5.2  日期框（DateBox） 68

2.5.3  日期時(shí)間框（DateTimeBox） 76

2.6  其他高級(jí)組件 77

2.6.1  標(biāo)簽框（TagBox） 77

2.6.2  搜索框（SearchBox） 78

2.6.3  文件框（FileBox） 80

2.7  表單 83

2.7.1  表單的基本使用方法 83

2.7.2  提交表單 85

2.7.3  初始化表單字段 86

2.7.4  文件上傳 88

2.8  小結(jié) 89

第3章  拖  放 90

3.1  DOM與事件對(duì)象 90

3.1.1   DOM 90

3.1.2   事件對(duì)象 92

3.2  拖放（Draggable） 93

3.2.1  拖放的使用方法 93

3.2.2  容器內(nèi)拖放 97

3.2.3  快速拖放 98

3.3  放置（Droppable） 99

3.3.1  放置的使用方法 99

3.3.2  授權(quán)拖放的組件 100

3.4  縮放（Resizable） 102

3.5  實(shí)戰(zhàn)：購物車的拖放 103

3.6  小結(jié) 105

第4章  常用組件 106

4.1  提示框（Tooltip） 106

4.1.1  創(chuàng)建提示框 106

4.1.2  提示框可綁定的元素 108

4.1.3  提示框的內(nèi)容 110

4.2  進(jìn)度條（ProgressBar） 111

4.3  滑塊（Slider） 112

4.4  實(shí)戰(zhàn)：向服務(wù)器提交滑塊數(shù)據(jù) 115

4.5  小結(jié) 116

第5章  窗口與布局 117

5.1   面板 117

5.1.1  基礎(chǔ)面板（Panel） 117

5.1.2  折疊面板（Accordion） 128

5.1.3  選項(xiàng)卡（Tabs） 134

5.2  布局（Layout） 139

5.2.1  簡(jiǎn)單的布局 140

5.2.2  添加和刪除布局 143

5.2.3  布局的種類 144

5.2.4  嵌套布局 146

5.2.5  自適應(yīng)高度布局 147

5.2.6  復(fù)雜布局 148

5.3  窗口（Window） 151

5.3.1  創(chuàng)建簡(jiǎn)單的窗口 151

5.3.2  創(chuàng)建模態(tài)窗口 153

5.3.3  創(chuàng)建內(nèi)聯(lián)窗口 153

5.3.4  窗口的布局 154

5.3.5  窗口的頁腳 155

5.3.6  窗口的邊框樣式 156

5.4  對(duì)話框（Dialog） 157

5.5  信息提示窗口（Messager） 159

5.5.1  底部提示窗口 159

5.5.2  消息提示窗口 160

5.5.3  確認(rèn)提示窗口 161

5.5.4  進(jìn)度提示窗口 162

5.5.5  輸入提示窗口 162

5.6  小結(jié) 163

第6章  深入理解EasyUI組件機(jī)制 164

6.1  使用EasyUI開發(fā)自定義組件 165

6.2  插件的制作方法 171

6.2.1  使用jQuery制作插件 172

6.2.2  $.extend方法 173

6.2.3  $.data方法 174

6.3  EasyUI插件源碼分析 174

6.3.1  默認(rèn)配置和選項(xiàng)對(duì)象 174

6.3.2  EasyUI屬性設(shè)置 176

6.3.3  默認(rèn)方法 179

6.3.4  其他源碼分析 180

6.3.5  總結(jié) 181

6.4  制作起止日期框插件 182

6.5  在標(biāo)記中定義組件 186

6.6  起止日期框使用文檔 187

6.7  小結(jié) 190

第2篇  EasyUI數(shù)據(jù)的獲取和展示

第7章  數(shù)據(jù)的獲取與展示 193

7.1  使用表單向服務(wù)器提交數(shù)據(jù) 193

7.2  數(shù)據(jù)網(wǎng)格（DataGrid） 194

7.2.1  使用本地?cái)?shù)據(jù)初始化數(shù)據(jù)網(wǎng)格 195

7.2.2  使用服務(wù)器端數(shù)據(jù)初始化數(shù)據(jù)網(wǎng)格 196

7.2.3  數(shù)據(jù)網(wǎng)格中的列 198

7.2.4  數(shù)據(jù)網(wǎng)格中的行 210

7.2.5  創(chuàng)建工具欄 214

7.2.6  數(shù)據(jù)網(wǎng)格事件和方法 215

7.2.7  數(shù)據(jù)網(wǎng)格編輯 221

7.2.8  數(shù)據(jù)網(wǎng)格視圖 228

7.3  分頁器（Pagination） 229

7.3.1  分頁器概述 229

7.3.2  數(shù)據(jù)網(wǎng)格中的分頁 233

7.4  數(shù)據(jù)列表（DataList） 236

7.5  屬性網(wǎng)格（PropertyGrid） 239

7.6  組合網(wǎng)格（ComboGrid） 241

7.7  樹（Tree） 244

7.7.1  樹形結(jié)構(gòu)簡(jiǎn)介 244

7.7.2  EasyUI中樹的使用方法 245

7.7.3  可編輯的樹 256

7.7.4  動(dòng)態(tài)操作樹 256

7.8  樹形網(wǎng)格（TreeGrid） 257

7.8.1  樹形網(wǎng)格的基本使用方法 258

7.8.2  復(fù)雜的樹形網(wǎng)格 263

7.9  組合樹（ComboTree） 265

7.10  組合樹形網(wǎng)格 266

7.11  小結(jié) 268

第8章  CRUD 應(yīng)用 269

8.1  了解什么是CRUD 269

8.2  創(chuàng)建簡(jiǎn)單的CRUD應(yīng)用 270

8.2.1  查詢數(shù)據(jù)（Retrieve） 270

8.2.2  增加數(shù)據(jù)（Create） 271

8.2.3  更新數(shù)據(jù)（Update） 272

8.2.4  刪除數(shù)據(jù)（Delete） 273

8.2.5  提交表單 274

8.2.6  服務(wù)器代碼簡(jiǎn)介 275

8.3  創(chuàng)建CRUD數(shù)據(jù)網(wǎng)格 276

8.3.1  獲取數(shù)據(jù) 276

8.3.2  新增數(shù)據(jù) 277

8.3.3  更新數(shù)據(jù) 278

8.3.4  刪除數(shù)據(jù) 278

8.4  自動(dòng)增加網(wǎng)格行數(shù)據(jù) 279

8.4.1  讀取數(shù)據(jù) 279

8.4.2  編輯數(shù)據(jù) 280

8.4.3  創(chuàng)建數(shù)據(jù) 282

8.4.4  刪除數(shù)據(jù) 283

8.5  小結(jié) 284

第3篇  EasyUI高級(jí)應(yīng)用

第9章  開發(fā)移動(dòng)頁面 287

9.1  移動(dòng)端基礎(chǔ) 287

9.1.1  自適應(yīng)屏幕寬度 287

9.1.2  移動(dòng)端調(diào)試方法 288

9.1.3  EasyUI開發(fā)移動(dòng)頁面基礎(chǔ) 289

9.2  表單 290

9.2.1  輸入框 290

9.2.2  按鈕 291

9.2.3  開發(fā)移動(dòng)端登錄頁面 292

9.3  移動(dòng)端頁面布局 293

9.3.1  工具欄 293

9.3.2  面板 294

9.3.3  選項(xiàng)卡 295

9.3.4  折疊面板 297

9.3.5  布局 297

9.3.6  菜單 298

9.3.7  樹 299

9.4  對(duì)話框 300

9.5  信息提示 300

9.6  動(dòng)畫 301

9.7  數(shù)據(jù)展示 301

9.7.1  簡(jiǎn)單的列表（SimpleList） 301

9.7.2  數(shù)據(jù)列表（DataList） 302

9.7.3  數(shù)據(jù)網(wǎng)格（Datagrid） 303

9.8  小結(jié) 304

第10章   jQuery EasyUI的主題 305

10.1  更改主題樣式 305

10.2  替換本機(jī)主題樣式 306

10.3  保存主題樣式 307

10.3.1  在服務(wù)器上保存 307

10.3.2  本地保存 307

10.4  圖標(biāo)的更改 308

10.5  小結(jié) 308

第11章   jQuery EasyUI的擴(kuò)展 309

11.1  數(shù)據(jù)網(wǎng)格視圖 309

11.1.1  數(shù)據(jù)網(wǎng)格詳細(xì)內(nèi)容視圖（DataGrid DetailView） 309

11.1.2  數(shù)據(jù)網(wǎng)格分組視圖（DataGrid GroupView） 312

11.1.3  數(shù)據(jù)網(wǎng)格緩存視圖（DataGrid BufferView） 314

11.1.4  虛擬滾動(dòng)視圖（VirtualScrollView） 315

11.1.5  自定義數(shù)據(jù)網(wǎng)格視圖 318

11.2  可編輯的數(shù)據(jù)網(wǎng)格（Editable DataGrid） 320

11.3  可編輯樹（Editable Tree） 322

11.4  數(shù)據(jù)網(wǎng)格單元格編輯（Cell Editing in DataGrid） 325

11.5  數(shù)據(jù)網(wǎng)格拖曳與放置（Drag and Drop Rows in DataGrid） 327

11.6  樹形網(wǎng)格行的拖曳與放置（Drag and Drop Rows in TreeGrid） 328

11.7  列的擴(kuò)展（Columns Extension） 329

11.8  數(shù)據(jù)網(wǎng)格的過濾（DataGrid Filter Row） 331

11.9  數(shù)據(jù)分析器（PivotGrid） 339

11.10  DWR加速 342

11.11  RTL的支持 343

11.12  Ribbon——Office功能區(qū)界面 344

11.13  文本編輯器（TextEditor） 345

11.14  小結(jié) 347

第12章  設(shè)計(jì)一個(gè)實(shí)戰(zhàn)項(xiàng)目 348

12.1  登錄驗(yàn)證設(shè)計(jì) 348

12.1.1  如何確認(rèn)身份 349

12.1.2  如何驗(yàn)證身份 350

12.1.3  登錄頁面的設(shè)計(jì) 351

12.1.4  登錄驗(yàn)證系統(tǒng)設(shè)計(jì)方案 354

12.2  加密與解密技術(shù) 355

12.2.1  對(duì)稱加密 355

12.2.2  非對(duì)稱加密 356

12.2.3  不可逆加密 356

12.3  EasyUI界面框架 356

12.4  小結(jié) 358