jQuery网页特效设计基础教程课件 第8单元 使用jQuery UI 插件.pptx

第8单元使用jQueryUI插件

了解jQueryUI插件的工作原理。了解jQueryUI常用插件的使用。了解jQueryUI常用特效的使用。教学目标pedagogicalobjectives能够熟练使用jQueryUI插件。能够熟练使用jQueryUI特效。掌握插件的应用技巧，设计出富有吸引力的用户界面，增强创新意识与团队协作能力。

目录导航8.1初识jQueryUI插件8.3jQueryUI的常用特效8.2jQueryUI的常用插件8.4项目实战：使用jQuery实现许愿墙

8.1.1jQueryUI概述（2）开源免费。轻松满足自由产品和企业产品的各种授权需求。（1）简单易用。继承jQuery简易使用特性，提供高度抽象接口，短期改善网站易用性。（3）广泛兼容。兼容各主流桌面浏览器，包括IE6+、Firefox2+、Safari3+、Opera9+、Chrome1+。（4）轻便快捷。组件间相对独立，可按需加载，避免浪费带宽、放慢网页打开速度。（6）开放公开。从结构规划到代码编写全程开放，人人均可参与文档、代码的编写与讨论。（5）美观多变。提供近20种预设主题，并可自定义多达60项可配置样式规则，提供24种背景纹理供选择。（7）强力支持。提供CDN（ContentDeliveryNetwork，内容分发服务）支持。（8）完整汉化。开发包内置包含中文在内的40多种语言包。

8.1.2jQueryUI的下载打开jQueryUI主页面01选择下载版本02选择主题03

8.1.3jQueryUI的使用jQueryUI下载完成后，会获得一个包含已选组件的ZIP文件（jquery-ui-1.13.2.custom.zip），解压该文件，得到jQueryUI包含的文件。jQueryUI包含的文件

8.1.3jQueryUI的使用在HTML网页中使用jQueryUI插件时，需要将jQueryUI包含的所有文件及文件夹（即解压后的jquery-ui-1.13.2.custom文件夹）复制到HTML网页所在的文件夹下，然后在HTML网页的head标记中添加jquery-ui.css文件、jquery-ui.js文件及external/jquery文件夹下jquery.js文件的引用。代码如下：linkrel=stylesheethref=jquery-ui-1.13.2.custom/jquery-ui.css/scriptsrc=jquery-ui-1.13.2.custom/jquery-ui.js/scriptscriptsrc=jquery-ui-1.13.2.custom/external/jquery/jquery.js/script一旦引用了以上3个文件，开发人员即可向HTML网页中添加jQueryUI插件。例如要向HTML网页中添加一个滑块插件，可使用如下代码实现。HTML代码如下：divid=slider/div添加滑块插件的JavaScript代码如下：

8.1.4jQueryUI插件的工作原理01OPTION安装为了跟踪插件的状态，首先介绍插件的生命周期。当插件安装时，插件的生命周期开启，只需要在一个或多个元素上调用插件，即安装了插件。例如以下代码开启了progressbar插件的生命周期：$(#elem).progressbar();此外在安装时，jQueryUI插件还可以传递一组选项，这样即可重写默认选项，代码如下：$(#elem).progressbar({value:20});

8.1.4jQueryUI插件的工作原理02OPTION方法option方法。option方法主要用来在插件初始化后修改选项。例如通过调用option方法修改进度条插件的value选项为30，代码如下：$(#elem).progressbar(option,value,30);disable方法。disable方法用来禁用插件，它等同于将disabled选项设置为true。例如以下代码用来将进度条插件设置为禁用状态：$(#elem).progressbar(disable);enable方法。enable方法用来启用插件，它等同于将disabled选项设置为false。例如以下代码用来将进度条插件设置为启用状态：$(#elem).progressbar(enable);destroy方法。destroy方法用来销毁插件，使插件返回到最初的标记，这意味着插件生命周期的终止。例如以下代码用来销毁进度条插件：$(#