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插件实现多级菜单