jQuery从入门到精通 (软件开发视频大讲堂)
上QQ阅读APP看书,第一时间看更新

3.5 jQuery插件简介

jQuery具有强大的扩展能力,允许开发人员使用或是创建自己的jQuery插件来扩展jQuery的功能,这些插件可以帮助开发人员提高开发效率,节约项目成本。而且一些比较著名的插件也受到了开发人员的追捧,插件又将jQuery的功能提升了一个新的层次。下面就来介绍插件的使用和目前比较流行的插件。

3.5.1 插件的使用

jQuery插件的使用比较简单,首先将要使用的插件下载到本地计算机中,然后按照下面的步骤操作,就可以使用插件实现想要的效果了。

(1)把下载的插件包含到<head>标记内,并确保它位于主jQuery源文件之后。

(2)包含一个自定义的JavaScript文件,并在其中使用插件创建或扩展的方法。

3.5.2 流行的插件

在jQuery官方网站中,有一个Plugins(插件)超级链接,单击该超级链接,将进入到jQuery的插件分类列表页面,如图3.11所示。

图3.11 jQuery的插件分类列表页面

在该页面中,单击分类名称,可以查看每个分类下的插件概要信息及下载超级链接。用户也可以在上面的搜索(Search)文本框中输入指定的插件名称,搜索所需插件。

说明

在该网站中提供的插件多数都是开源的,读者可以在此网站中下载所需要的插件。

下面对比较常用的插件进行简要介绍。

(1)jCarousel插件

使用jQuery的jCarousel插件用于实现如图3.12所示的图片传送带效果。单击左、右两侧的箭头可以向左或向右翻看图片。当到达第一张图片时,左侧的箭头将变为不可用状态,当到达最后一张图片时,右侧的箭头变为不可用状态。

图3.12 jCarousel插件实现的图片传送带效果

(2)easyslide插件

使用jQuery的easyslide插件实现如图3.13所示的图片轮显效果。当页面运行时,要显示的多张图片,将轮流显示,同时显示所对应的图片说明内容。在新闻类的网站中,可以使用该插件显示图片新闻。

图3.13 easyslide插件实现的图片轮显效果

(3)Facelist插件

使用jQuery的Facelist插件可以实现如图3.14所示的类似Google Suggest自动完成效果。当用户在输入框中输入一个或几个关键字后,下方将显示该关键字相关的内容提示。这时用户可以直接选择所需的关键字,方便输入。

图3.14 Facelist插件实现类似Google Suggest自动完成效果

(4)mb menu插件

使用jQuery的mb menu插件可以实现如图3.15所示的多级菜单。当用户将鼠标指向或单击某个菜单项时,将显示该菜单项的子菜单。如果某个子菜单项还有子菜单,将鼠标移动到该子菜单项时,将显示它的子菜单。

图3.15 mb menu插件实现多级菜单