jQuery教程(28)-jQuery插件开发之使用插件

文章标签: jquery,jquery-插件
2015-1-19 11:27:18     58 人阅读    

使用插件

            本教程前面讨论了jQueiy的核心组件,介绍了使用jQueiy库完成各种任务的许多方式。但是, 唯独还没有深人讨论的一个方面就是同它的核心一样强大的扩展能力。通过使用jQuery简洁的插 件架构,开发者能够把jQuery的功能扩展得更加丰富。
            jQuery社区不断发展,其创造的插件已经达到了数百个一小到选择器助手,大到全套的用 户界面部件。本章就来介绍怎么挖掘这个巨大的宝藏。
本章,我们将介绍如下内容:
□下载和配置插件;
□调用插件提供的jQuery方法;
□使用插件定义的选择符查找元素;
□使用jQuery UI添加专业的用户界面行为;
□使用jQueiy Mobile实现适合移动设备的功能。


7.1查找插件和帮助
         jQuery官方网站的插件库(地址为http://plugins.jqueiy.com/)囊括了大量插件。这个插件注册 表(The jQuery PluginRegistiy)中列出了每个插件的演示、示例代码及教程的链接。由于所有插 件都托管在GitHub (http://github.com/)代码库,因此通过查看一个插件的星级、有多少“分支” 代码,可以大致了解该插件的品质,至少是它的流行程度。这些信息都会在插件页面的侧边栏中 给出,查阅方便。
假如在上述官方网站、GitHub、作者网站及插件说明中,仍然找不到相关问题的答案,还可 以访问jQuery社区,以寻求帮助。jQuery论坛中专门有一个区域,讨论插件的使用,地址为: http://foram.jquety.com/using-jqueiy-plugins/。很多插件作者都是这个讨论组的积极参与者,他们
会积极解答新用户面临的难题。


7.2使用插件
        使用jQuery插件很简单。只要找到插件的URL,在HTML中引用它,然后在脚本中使用即可。 为了演示这个过程,我们需要找一个插件作为例子。
       jQueiy的Cycle插件就是一个不错的例子。这个插件是由Mike Alsup开发的,通过它可以把静 态的页面元素变成交互式的幻灯片。与其他广受欢迎的插件类似,这个插件能够满足各种复杂的 需求,但使用起来却很简单。


7.2.1下载并包含Cycle插件
       可以在jQuery插件注册表或它的主页http://www.malsup.com/jquery/cycle/中找到Cycle插件。 在下载页面中可以下载到这个插件的完整版和简化版。我们在这里下载使用完整版,文件名是 jquery.cycle.all.js。


      把文件下载到站点目录之后,需要在文档&<head>*引人这个插件。此时,注意把引人它 的代码放在引人jQuery主文件的代码后面,但要位于使用这个插件的脚本前面。

<head>
<meta charset="utf-8">
<title>jQuery Book Browser</title>
<link rel="stylesheet" href="07.css" type="text/css" />
<script src=Mjquery.jsM></script>
<script src=Mjquery.cycle.all.js"></script>
<script src=M〇7.js"></script>
</head>

           这样就安装了第一个插件。安装插件与安装jQuery—样简单。然后,就可以在脚本中使用这 个插件了。


7.2.2调用插件提供的方法
           Cycle插件可以作用于页面中的任何一组同辈元素。为展示这一点,我们需要一个简单的 HTML文档,文档中是一个包含图书封面和相关信息的列表,可以添加到HTML文档的主体中:

<ul id="books">
<li>
<img src="images/jq-game.jpgM alt="jQuery Game Development Essentials" />
<div class = __title__>jQuery Game Development Essentials</div>
<div class = __author__>Salim Arsever</div>
</li>
<li>
<img src = Mimages/jqmobile-cookbook.jpgM alt = __jQuery Mobile
Cookbook” />
<div class = __title__>jQuery Mobile Cookbook</div>
<div class = __author__>Chetan K Jain</div>
</li>
</ul>


          在CSS文件中写一些样式,就可以让这些图书封面并列地显示出来,如图7-1所示。
      

下载并包含Cycle插件

图7-1

通过Cycle插件可以将这个列表转换成可以交互的幻灯片。在DOM中适当的容器上调 用.cycle()方法,就可以实现这一转换,参见代码清单7-1。
代码清单7-1

$(document).ready(function() { $('#books').cycle();
});

         这个语法简单得不能再简单了。和之前使用其他内置的jQuery方法一样,我们也在一个包含 DOM元素的jQuery对象上调用了 .cycle()。即使没有提供任何参数,.cycle()也可以帮我们 完成转换工作。其中包括修改页面的样式,以便每次只显示一个列表项,然后每4秒就以交叉淡 人淡出的方式切换到下一个列表项

             如此简单易用是典型的jQueiy插件的特征。就这么一个简简单单的方法调用,就可以实现专业 实用的效果。不过,与其他插件一样,Cycle也提供了很多自定义的选项,可以通过配置改变效果。


原文地址:http://www.itmmd.com/201501/518.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

jQuery教程(29)-jQuery插件开发之为插件方法指定参数   上一篇
下一篇  jQuery教程(27)-jQueryajax操作之修改默认选项

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!