网页特效设计基础第9章-常用的第三方jQuery插件.ppt

1、刘刚刘刚 主编主编新一代信息技术“十三五”系列规划教材 第第9 9章章 常用的第三方常用的第三方jQueryjQuery插件插件 虽然使用虽然使用 jQuery 自身的脚本库可以满足大部分的开自身的脚本库可以满足大部分的开发需求，但是由于它的开源性，现在很多的开发人员都基发需求，但是由于它的开源性，现在很多的开发人员都基于于jQuery 本身的脚本库开发了更多、更实用的本身的脚本库开发了更多、更实用的 jQuery 插件，本章我们将对常用的一些第三方插件，本章我们将对常用的一些第三方 jQuery 插件的使插件的使用进行详细讲解。用进行详细讲解。9.1 jQuery 9.1 jQuery 插件

2、概述插件概述 jQueryjQuery插件是一种建立在插件是一种建立在 jQuery jQuery 库上的库上的 JavaScript JavaScript脚本库，开发人员可以使用它创建高度交互的脚本库，开发人员可以使用它创建高度交互的 Web Web 应用程序。应用程序。本节我们将对本节我们将对 jQuery jQuery 插件进行介绍。插件进行介绍。9.1.1 9.1.1 什么是什么是 jQuery jQuery 插件插件 jQuery jQuery 插件是一种用来提高网站开发效率的、已经插件是一种用来提高网站开发效率的、已经封装好的封装好的 JavaScript JavaScript 脚

3、本库，由于脚本库，由于 jQuery jQuery 的开源特性，的开源特性，现在有很多第三方的现在有很多第三方的 jQuery jQuery 插件可供开发人员直接使用。插件可供开发人员直接使用。jQuery jQuery 插件的主要特点如下。插件的主要特点如下。p 提高提高 Web Web 网站的开发效率。网站的开发效率。p 高度集成，使用方便。高度集成，使用方便。p 根据自身需求进行修改，增强扩展性。根据自身需求进行修改，增强扩展性。p 界面美观。界面美观。9.1.2 9.1.2 常用的第三方常用的第三方 jQuery jQuery 插件插件 现在市面上的第三方现在市面上的第三方 jQuer

4、y jQuery 插件有很多种，我们可插件有很多种，我们可能在逛论坛或者技术网站时经常看到能在逛论坛或者技术网站时经常看到“*个最值得收藏的个最值得收藏的 jQuery jQuery 插件插件”“”“严重推荐严重推荐*个个jQuery jQuery 插件插件”“”“最实用的最实用的 jQuery jQuery 插件下载插件下载”等帖子，这些帖子中都包含了很多种第等帖子，这些帖子中都包含了很多种第三方的三方的 jQuery jQuery 插件，而且还会提供简单的使用示例。插件，而且还会提供简单的使用示例。表表 9-1 9-1 中列出了一些笔者常用的第三方中列出了一些笔者常用的第三方 jQuery

5、 jQuery 插插件。件。表表 9-1 常用的常用的 jQuery 插件插件9.1.3 9.1.3 如何调用第三方如何调用第三方 jQuery jQuery 插件插件 调用第三方调用第三方 jQuery jQuery 插件的步骤如下。插件的步骤如下。（1 1）第三方）第三方 jQuery jQuery 插件是基于插件是基于 jQuery jQuery 开发的，因此，开发的，因此，在使用时，首先需要添加相应版本的在使用时，首先需要添加相应版本的 jQuery jQuery 库。例如，库。例如，添加版本添加版本 3.3.1 3.3.1 的的 jQuery jQuery 库，先将版本库，先将版本

6、3.3.1 3.3.1 的的 jQuery jQuery 库库 jquery-3.3.1.min.js jquery-3.3.1.min.js 复制到网页文件夹中，复制到网页文件夹中，然后在然后在HTML HTML 网页中编写如下代码：网页中编写如下代码：script type=text/javascript src=jquery-3.3.1.min.js（2 2）然后需要添加要使用的第三方）然后需要添加要使用的第三方jQueryjQuery插件的插件的JSJS库及库及CSSCSS样式文件。例如，添加样式文件。例如，添加uploadifyuploadify插件的插件的JSJS脚本文件及脚本文件

7、及CSSCSS样样式文件，先将式文件，先将uploadifyuploadify插件的插件的JSJS脚本文件及脚本文件及CSSCSS样式文件复样式文件复制到网页文件夹中，然后在制到网页文件夹中，然后在HTMLHTML网页中编写如下代码：网页中编写如下代码：link href=css/default.css rel=stylesheet type=text/css/link href=css/uploadify.css rel=stylesheet type=text/css/script type=text/javascript src=scripts/jquery.uploadify.v2.0

8、.2.min.js（3 3）完成以上步骤之后，即可通过定义）完成以上步骤之后，即可通过定义 JavaScript JavaScript 函数使用第三方函数使用第三方 jQuery jQuery 插件。例如，在网页中初始化插件。例如，在网页中初始化uploadify uploadify 插件，并设置其属性，代码如下：插件，并设置其属性，代码如下：$(document).ready(function()$(document).ready(function()$(#uploadify).uploadify($(#uploadify).uploadify(uploader:scripts/upload

9、ify.swf,/uploader:scripts/uploadify.swf,/上传所需上传所需的的FlashFlash文件文件 script:scripts/upload.ashx,/script:scripts/upload.ashx,/后台处理文件后台处理文件folder:/uploads,/folder:/uploads,/上传文件夹上传文件夹 queueSizeLimit:4,/queueSizeLimit:4,/限制每次选择文件的个数限制每次选择文件的个数 sizeLimit:6291456,/sizeLimit:6291456,/上传文件限制的最大值上传文件限制的最大值 fil

10、eDesc:fileDesc:图片文件图片文件,/,/文件类型的描述信息文件类型的描述信息 fileExt:fileExt:*.jpg;.jpg;*.png;.png;*.bmp;.bmp;*.gif,/.gif,/设置设置文件类型文件类型 ););););9.2 9.2 常用常用 jQuery jQuery 插件的使用插件的使用9.2.1 uploadify 9.2.1 uploadify 插件（文件上传）插件（文件上传）uploadify uploadify 插件是一款来自国外的优秀插件是一款来自国外的优秀 jQuery jQuery 插件，插件，它是基于它是基于 JS JS 里面的里面的

11、 jQuery jQuery 库编写的，结合了库编写的，结合了 Ajax Ajax 和和 FlashFlash，实现了多线程上传的功能。，实现了多线程上传的功能。uploadify uploadify 插件提供的功能主要包括：能够一次性选插件提供的功能主要包括：能够一次性选择多个文件上传、查看上传进度、控制文件上传类型和大择多个文件上传、查看上传进度、控制文件上传类型和大小、为每一步操作添加回调函数等；另外，小、为每一步操作添加回调函数等；另外，uploadify uploadify 插插件还自带一个件还自带一个 PHP PHP 文件，用于服务器端处理上传文件。文件，用于服务器端处理上传文件。

12、1 1属性属性 uploadify uploadify 插件的常用属性及说明如表插件的常用属性及说明如表 9-2 9-2 所示。所示。表表 9-2 uploadify 插件的常用属性及说明插件的常用属性及说明续表续表2 2方法方法 uploadify uploadify 插件的常用方法及说明如表插件的常用方法及说明如表 9-3 9-3 所示。所示。表表 9-3 uploadify 插件的常用方法及说明插件的常用方法及说明3 3事件事件 uploadify uploadify 插件的常用事件及说明如表插件的常用事件及说明如表 9-4 9-4 所所示。示。表表 9-4 uploadify 插件的常

13、用事件及说明插件的常用事件及说明9.2.2 zTree 9.2.2 zTree 插件（树菜单）插件（树菜单）zTree zTree 插件是一款基于插件是一款基于 jQuery jQuery 实现的多功能实现的多功能“树插树插件件”，优异的性能、灵活的配置、多种功能的组合是，优异的性能、灵活的配置、多种功能的组合是zTreezTree最大的优点。最大的优点。zTree zTree 插件的主要特点如下。插件的主要特点如下。p zTree zTree 将核心代码按照功能进行了分割，不需要的代码可将核心代码按照功能进行了分割，不需要的代码可以不用加载。以不用加载。p 采用了延迟加载技术，上万节点轻松加

14、载，即使在采用了延迟加载技术，上万节点轻松加载，即使在 IE 6 IE 6 下也能基本做到下也能基本做到“秒杀秒杀”。p 兼容兼容 IE IE、FireFoxFireFox、ChromeChrome、OperaOpera、Safari Safari 等浏等浏览器。览器。p 支持支持 JSON JSON 数据。数据。p 支持静态和支持静态和 Ajax Ajax 异步加载节点数据。异步加载节点数据。p 支持任意更换皮肤、自定义图标。支持任意更换皮肤、自定义图标。p 支持极其灵活的支持极其灵活的 checkbox checkbox 或或 radio radio 选择功能。选择功能。p 提供多种事件响

15、应回调。提供多种事件响应回调。1 1属性属性 zTree zTree 插件的常用属性及说明如表插件的常用属性及说明如表 9-5 9-5 所示。所示。表表 9-5 zTree 插件的常用属性及说明插件的常用属性及说明2 2方法方法 zTree zTree 插件的常用方法及说明如表插件的常用方法及说明如表 9-6 9-6 所示。所示。表表 9-6 zTree 插件的常用方法及说明插件的常用方法及说明图图 9-2 zTree 插件异步加载大数据插件异步加载大数据9.2.3 Nivo Slider 9.2.3 Nivo Slider 插件（图片切换）插件（图片切换）Nivo Slider Nivo S

16、lider 插件是一款基于插件是一款基于 jQuery jQuery 的多图片的多图片切换插件，它支持多种图片切换时的动画效果，而且支切换插件，它支持多种图片切换时的动画效果，而且支持键盘导航和连接影像功能。持键盘导航和连接影像功能。1 1属性属性 Nivo Slider Nivo Slider 插件的常用属性及说明如表插件的常用属性及说明如表 9-7 9-7 所所示。示。表表 9-7 Nivo Slider 插件的常用属性及说明插件的常用属性及说明续表续表2 2方法方法 Nivo Slider Nivo Slider 插件的常用方法及说明如表插件的常用方法及说明如表 9-8 9-8 所示。所

17、示。表表 9-8 Nivo Slider 插件的常用方法及说明插件的常用方法及说明图图 9-3 Nivo Slider 插件的使用插件的使用9.2.4 Pagination 9.2.4 Pagination 插件（数据分页）插件（数据分页）Pagination Pagination 插件是一款可以加载数据和进行分页插件是一款可以加载数据和进行分页的的 jQuery jQuery 插件，使用时，一般需要先将要显示的数据插件，使用时，一般需要先将要显示的数据载入到页面中，然后根据当前页面的索引号，获取指定载入到页面中，然后根据当前页面的索引号，获取指定页面需要显示的数据，并将这部分数据显示到相应的

18、容页面需要显示的数据，并将这部分数据显示到相应的容器中，从而实现分页显示数据的功能。器中，从而实现分页显示数据的功能。与一般的与一般的 jQuery jQuery 插件一样，插件一样，Pagination Pagination 插件使插件使用也很简单。例如，要使用方法用也很简单。例如，要使用方法 pagination pagination，可以用，可以用下面的代码：下面的代码：$(#page).pagination(100);$(#page).pagination(100);这里的这里的 100 100 参数是必须的，表示显示项目的总个参数是必须的，表示显示项目的总个数，得到的显示效果如图数，

19、得到的显示效果如图 9-4 9-4 所示。所示。图图 9-4 使用使用 ColorPicker 插件制作颜色选择器插件制作颜色选择器 Pagination Pagination 插件的常用属性及说明如表插件的常用属性及说明如表 9-9 9-9 所所示。示。表表 9-9 Pagination 插件的常用属性及说明插件的常用属性及说明图图 9-5 Pagination 插件的使用插件的使用9.2.5 jQZoom 9.2.5 jQZoom 插件（图片放大镜）插件（图片放大镜）jQZoom jQZoom 是一个基于是一个基于 jQuery jQuery 的图片放大镜插件，的图片放大镜插件，它功能强大

20、，使用简便，支持标准模式、反转模式、无它功能强大，使用简便，支持标准模式、反转模式、无镜头、无标题的放大，并可以自定义镜头、无标题的放大，并可以自定义 jQZoom jQZoom 的窗口位的窗口位置和渐隐效果。置和渐隐效果。jQZoom jQZoom 插件的常用属性及说明如表插件的常用属性及说明如表 9-10 9-10 所示。所示。表表 9-10 jQZoom 插件的常用属性及说明插件的常用属性及说明图图 9-6 jQZoom 插件的使用插件的使用9.3 9.3 综合实例：使用综合实例：使用 ColorPicker ColorPicker 插插件制作颜色选择器件制作颜色选择器 我们在使用我们在

21、使用 QQ QQ 聊天时，如果想设置字体颜色，可聊天时，如果想设置字体颜色，可以打开以打开 QQ QQ 聊天对话框中的设置字体颜色对话框，在这聊天对话框中的设置字体颜色对话框，在这个对话框中设置颜色的界面就是颜色拾取器。本实例使个对话框中设置颜色的界面就是颜色拾取器。本实例使用第三方的用第三方的ColorPicker ColorPicker 插件制作了一个简单的颜色拾插件制作了一个简单的颜色拾取器，运行效果如图取器，运行效果如图 9-7 9-7 所示。所示。图图 9-7 使用使用 ColorPicker 插件制作颜色选择器插件制作颜色选择器 （1 1）jQuery jQuery 插件是一种用来

22、提高网站开发效率的、已经插件是一种用来提高网站开发效率的、已经封装好的封装好的 JavaScript JavaScript 脚本库。脚本库。（2 2）uploadifyuploadify插件是一款来自国外的优秀插件是一款来自国外的优秀jQueryjQuery插件，插件，它是基于它是基于JSJS里面的里面的jQueryjQuery库编写的，结合了库编写的，结合了AjaxAjax和和FlashFlash，实现了多线程上传的功能。实现了多线程上传的功能。（3 3）zTree zTree 插件是一款基于插件是一款基于 jQuery jQuery 实现的多功能实现的多功能“树树插件插件”。（4 4）Ni

23、vo Slider Nivo Slider 插件是一款基于插件是一款基于 jQuery jQuery 的多图片切的多图片切换插件，它支持多种图片切换时的动画效果，而且支持键换插件，它支持多种图片切换时的动画效果，而且支持键盘导航和连接影像功能。盘导航和连接影像功能。（5 5）Pagination Pagination 插件是一款可以加载数据和进行分页插件是一款可以加载数据和进行分页的的 jQuery jQuery 插件。插件。（6 6）jQZoom jQZoom 插件是一个基于插件是一个基于 jQuery jQuery 的图片放大镜插的图片放大镜插件，它功能强大，使用简便，支持标准模式、反转模式、件，它功能强大，使用简便，支持标准模式、反转模式、无镜头、无标题的放大，并可以自定义无镜头、无标题的放大，并可以自定义 jQZoom jQZoom 的窗口的窗口位置和渐隐效果。位置和渐隐效果。（7 7）ColorPicker ColorPicker 插件是一款简单实用的取色插件，它插件是一款简单实用的取色插件，它能准确显示颜色的能准确显示颜色的 HEX HEX 数值。数值。