插件,通俗讲就是外挂。
是一种遵循一定规范的应用程序接口编写出来的程序。作用就是让程序,或者平台执行更多样化的任务。
而jQuery插件就是,基于jQuery的插件了。
通过使用jQuery插件,我们可以节省大量的开发时间来实现我们的目标。
下面就简单介绍一下插件,并向大家演示如何使用他人开发的插件。
 

插件入门

 
编写一个jQuery插件需要给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称:
比如插件名称叫myplugin:

那么为什么不用$而用jQuery呢?
为了避免和其他JavaScript库冲突,最好将jQuery传递给一个自我执行的封闭程序,jQuery在此程序中映射为$符号,这样可以避免$号被其他库覆写。在这个封闭程序中,我们可以无限制的使用$符号来表示jQuery函数。
如下:

那么定义好了插件,怎么使用插件呢?
只要把插件指定到某个对象上就ok了。
如:

这样,该插件所对应的效果就会实现在.header元素上。
 

实例1

 

插件的使用

 
之前讲的只是简单的开发原理。而真正的插件有很多编写方法,也可以对相关声明做出自定义。
下面就以一个实际的例子,教大家如何使用插件。

lightbox的使用

lightbox是一个图片插件,当我们点击小图或者某个链接的时,可以弹出窗口显示大图片,就像一个灯箱一样。所以叫lightbox。

插件地址:
http://lokeshdhakar.com/projects/lightbox2/

页面当中介绍了,如何使用该插件。或者自定义插件。
很多jq的插件,使用的方法都一样。就是引入需要的文件,然后将插件作用于对象。
1,调用jq的库。
2,调用插件文件。
3,如果插件有css样式表,调用该样式表。
4,按插件要求搭建对象框架。
5,执行插件。
 
查看下面的视频,看看我是如何使用该插件的:
(我有两张图片,一张小图,一张大图。我想点击小图后弹出大图。)
如果下方视频没有显示,请点击:http://www.tudou.com/programs/view/5sZLbtXNsL4/?resourceId=0_06_02_99

 
那么,从视频中可以看到,弹窗弹出的时候有一个过渡时间,这个过渡时间就可以通过下面的方法进行修改。

也可以设定大图的最大宽度:

那么还有更多的选项可以设定。详情可以查看该插件的页面。
 
其实,插件就是这么一回事儿,这么简单的几个步骤就能获得这样的一个效果。如果自己从头开发,那就花太多时间了。
这就是插件的优点。
那,其它插件的用法也是跟这个差不多的。

本篇文章相关标签: