创建一个自定义 jQuery 插件

jQuery库是专为加快JavaScript开发速度而设计的。通过简化编写JavaScript的方式，减少代码量。使用jQuery库时，您可能会发现您经常为一些常用函数重写相同的代码。如果这样的话，这可能就是您需要编写自定义jQuery插件的一个原因。

jQuery插件允许您使用自定义代码扩展jQuery库；您可以对一些重复性函数使用插件。例如，很多插件可供幻灯片、下拉菜单和折叠菜单所用。如果您搜索jQuery插件，就会发现有大量可用于自己项目的示例（看看它们是如何构建的）

准备开始
jQuery是一个可扩展JavaScript语言的库。当您创建一个jQuery插件时，本质上是在扩展这个jQuery库。要真正了解插件如何扩展jQuery库需要对JavaScriptprototype属性有一个基本了解。尽管不直接使用，但是JavaScriptprototype属性可通过jQuery属性fn在后台使用，这是原生JavaScriptprototype属性的一个jQuery别名。
要使用fn属性创建一个新jQuery插件，只需要为fn属性分配一个插件名，并将其指向一个充当构造函数的新函数，类似于纯JavaScript。清单1中的代码显示了如何定义一个名为accordion的新jQuery插件，其方法是通过使用jQuery对象和fn属性，并将其分配给一个新的构造函数。
清单1.定义一个名为accordion的新jQuery插件
jQuery.fn.accordion=function(){
//Addplugincodehere
};
清单1展示了创建jQuery插件的一种方法；该示例没有什么功能性错误。但是，创建一个jQuery插件所推荐的方法是，先创建一个允许使用美元符号(

$

)的包装器函数。在默认情况下，美元符号可能与其他JavaScript框架发生冲突，如果将插件包装在一个函数中，就不会出现冲突。清单2中的示例代码显示如何将一个包装器函数应用到一个jQuery插件定义中。

清单2.在一个包装器函数中包装一个名为accordion的新jQuery插件

(function($){

$.fn.accordion=function(){

//Addplugincodehere

};

})(jQuery);

在清单2中，

jQuery

关键字被应用到包装器函数中，这允许您在插件中使用美元符号，就像使用

fn

属性时那样。包装器函数就绪后，就可以在整个插件的任何地方使用美元符号代替

jQuery

关键字，不会干扰其他第三方插件。该选项提供了一种方法使我们可以在开发整个插件中编写较少的代码，并且有助于您的插件代码保持整洁，易于维护。

维护链接性

jQuery的一个优势是允许您使用任何类型的选择器。但是，必须记住，您的插件可以处理几种不同的元素类型。使用

this

关键字允许您的插件应用于相关函数，通过循环实现每个元素的访问，而不考虑元素类型。如果在

each

循环前使用

return

关键字，就可以使用您的插件维护链接性。清单3显示了分配给一个函数处理程序且与

return

关键字相结合的

each

循环。

清单3.在

each

循环之前使用

return

关键字

(function($){

$.fn.accordion=function(){

returnthis.each(function(){

//Usingreturnallowsforchainability

});

};

})(jQuery);

有了清单3的代码后，示例accordion插件可用在一个方法调用链中。有了链接性（另一个强大的jQuery特性），您的插件就可用在一个方法调用链中。例如，下面的代码显示了如何淡出HTML元素，并在单一的方法调用链中将其从文档对象模型(DOM)中删除。

$("#my-div").fadeOut().remove();

构造一个accordion
一个典型的层叠设计包括标题栏和相关内容区域。定义列表是一个可供accordions使用的很好的HTML结构；dt元素供标题所用，而dd元素供内容区域所用。清单4中的HTML结构是一个定义列表，含有四个标题以及相应的内容区域。
清单4.单一方法调用链
<dlclass="accordion"id="my-accordion">
<dt>Section1</dt>
<dd>Maurismaurisante,blanditet,ultricesa,suscipiteget,quam.</dd>
<dt>Section2</dt>
<dd>Vestibulumaveliteuantescelerisquevulputate.</dd>
<dt>Section3</dt>
<dd>Nammi.Proinviverraleoutodio.Curabiturmalesuada.</dd>
<dt>Section4</dt>
<dd>Vivamusnisimetus,molestievel,gravidain,condimentumsitamet,nunc.</dd>
</dl>
清单4中定义的列表也有一个分配给它的名为accordion的CSS类。没有应用任何CSS，这个accordion结构看起来类似于图1中的基础设计。
图1.没有应用任何CSS的accordion结构





accordion类用于将类型应用到整个定义列表、标题和内容区域。在清单5的示例中，accordion类本身应用于宽度、边框、字体集和字体大小。清单5的示例中。您可以修改任何一个正在运行的CSS示例以包含您自定义的风格，比如颜色、字体、大小和间距。
清单5.用于定义整个定义列表样式的accordionCSS类
.accordion{
width:500px;
border:1pxsolid#ccc;
border-bottom:none;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
然后，您可以使用accordionCSS类定义标题(dt)和内容(dd)样式。标题和内容都包含一个设置底边框为0的共享样式，这允许标题栏和内容区域相互适宜地放置，如清单6所示。
清单6.与accordion标题和内容区域相关联的共享样式
.accordiondt,
.accordiondd{
border-bottom:1pxsolid#ccc;
margin:0px;
}
为了使dt元素看起来更像一个标题栏，设置一个背景色并添加一个指针光标，明显地呈现给用户该标题栏是可点击的。各种其他样式也都包括在这些类中，比如填充、字体大小和字体粗细。dd元素添加了填充，将描述与标题隔开一点。清单7显示了一个示例。
清单7.与accordion标题和内容区域相关的CSS类
.accordiondt{
background:#eaeaea;
cursor:pointer;
padding:8px4px;
font-size:13px;
font-weight:bold;
}
.accordiondd{
padding:12px8px;
}
有了这些增加的CSS，视觉效果将会更完美、更像accordion，如图2所示。

图2.一个应用自定义CSS的accordion结构

自定义您的插件

要制作一个功能性accordion，必须将自定义代码应用到您上一小节创建jQuery插件的函数。accordion插件从遍历所有已定义的accordion开始。要定义一个accordion，在HTML文档或外部嵌入式JavaScript文件中使用下列jQuery。

$('dl#my-accordion').accordion();

对于每个Accordion，您可以使用jQuery的

children

方法访问相关定义的标题，返回一个数组或

dt

元素。应用一个

click

事件到

dt

元素，然后一个名为

reset

方法应用到每个

dt

。accordion首次加载时，该

reset

方法会折叠所有

dd

元素。单击

dt

元素或者标题栏时，

click

事件会触发一个名为

onClick

的自定义方法。自定义

onClick

方法用于查找
accordion中的所有

dt

元素。它调用一个自定义

hide

方法，该方法通过使用

next

方法找到紧挨着

dt

元素的

dd

元素，隐藏每个相关的

dd

元素，通过使用

next

方法找到紧挨着

dt

元素的

dd

元素，然后向上滑动激活它。

所有

dd

元素被隐藏后，使用

slideDown

方法，就可以看见与单击过的

dt

元素相关的

dd

元素，并创建一个放大和收缩动画，如清单8所示。

onClick

方法的最后一行代码是

returnfalse

，确保任何被点击的主题栏没有显现出其一般行为。例如，如果您使用一个

anchor

元素作为标题栏，您可能想要执行

return
false

，这样就不会将用户定向到另一个页面或现有页面的一部分。

清单8.自定义用于创建一个jQuery插件的accordion函数

(function($){

$.fn.accordion=function(options){

returnthis.each(function(){

vardts=$(this).children('dt');

dts.click(onClick);

dts.each(reset);

});

functiononClick(){

$(this).siblings('dt').each(hide);

$(this).next().slideDown('fast');

returnfalse;

}

functionhide(){

$(this).next().slideUp('fast');

}

functionreset(){

$(this).next().hide();

}

}

})(jQuery);

如果该accordion插件与一个HTML定义列表结构相关联时，比如您之前创建的那个accordion函数将被应用。有了accordion函数，单击一个标题栏或

dt

元素时，会打开其内容区域，而其他内容区域则关闭。换句话说，一次只能打开一个内容区域。

Defaults和options

jQuery插件可以包括defaults和options。Options本质上就是传递给插件的参数。可以使用options发送一个参数作为objectliteral，这是一个标准jQuery实践，而不需要传递多个参数。如果您的插件支持options，使用

defaults

对象设置默认的options将是一个最佳方式。和options一样，defaults是一个
objectliteral，应该包括您想要传递到插件中的属性。

例如，如果您支持一个可用于在首次加载时打开accordion第一个内容区域的属性，那么在您的插件中应该包括一个open属性的默认值。在您的插件中使用defaults确定默认函数，使用options覆盖默认值。如果插件接收options，可以使用

$.extend

方法执行覆盖。jQuery的

$.extend

方法合并两个或多个对象。清单9中的示例显示在一个自定义jQuery插件中使用

$.extend

方法合并用户定义选项和默认选项的一般实现。

清单9.向一个自定义的accordionjQuery插件添加options和defaults

(function($){

$.fn.accordion=function(options){

varsettings=$.extend({},{open:false},options);

returnthis.each(function(){

vardts=$(this).children('dt');

dts.click(onClick);

dts.each(reset);

if(settings.open)$(this).children('dt:first-child').next().show();

});

functiononClick(){

$(this).siblings('dt').each(hide);

$(this).next().slideDown('fast');

returnfalse;

}

functionhide(){

$(this).next().slideUp('fast');

}

functionreset(){

$(this).next().hide();

}

}

})(jQuery);

$.extend

方法参数是一个目标对象和2个或多个合并对象。在本示例中，目标对象是一个空objectliteral，充当合并对象容器。目标将成为一个包含合并对象值的单一对象（在该案例中是

settings

变量）。第2个参数是一个包含默认插件属性的objectliteral。第3个参数是用户定义的options参数。要在一个HTML元素上使用accordion插件传递options，需要知道除了之前您作为objectliteral
传递的属性外还有哪些属性，如下所示。

$('dl#my-accordion').accordion({open:true});

在清单9示例中，传递到插件的options通过

$.extend

方法覆盖defaults。如果没有传递options，则使用默认值。对于示例插件，可使用

open

属性确定加载时是否打开第一个内容区域。

可重用性

您可以在任何HTML文档中重用示例accordion插件，可以在单个HTML文档中多次使用。您也可以包括多个accordion结构，就像已创建的那个accordion，使用刚创建的新accordion插件通过jQuery将每个单独定义为accordion。要向一个HTML文档添加多个accordion，只需要添加尽可能多的accordion结构。清单10中的代码包括两个accordion结构，由一个段落隔开。

清单10.在同一个HTML文档中使用多个accordion

<dlclass="accordion"id="my-accordion">

<dt>Section1</dt>

<dd>Maurismaurisante,blanditet,ultricesa,suscipiteget,quam.</dd>

<dt>Section2</dt>

<dd>Vestibulumaveliteuantescelerisquevulputate.</dd>

<dt>Section3</dt>

<dd>Nammi.Proinviverraleoutodio.Curabiturmalesuada.</dd>

<dt>Section4</dt>

<dd>Vivamusnisimetus,molestievel,gravidain,condimentumsitamet,nunc.</dd>

</dl>

<p>Loremipsumdolorsitamet,consecteturadipiscingelit.</p>

<dlclass="accordion"id="my-accordion2">

<dt>Section1</dt>

<dd>Maurismaurisante,blanditet,ultricesa,suscipiteget,quam.</dd>

<dt>Section2</dt>

<dd>Vestibulumaveliteuantescelerisquevulputate.</dd>

</dl>

清单10中的两个accordion结构几乎一样，除了内容不一样外，更重要的是ID值也不一样。第一个结构包含一个

my-accordion

ID值。第2个结构包含一个

my-accordion2

ID值。现在可以单独定向这些结构。例如，下列jQuery脚本使用已创建的新插件将每个accordion结构定义为一个accordion。

$('dl#my-accordion').accordion({open:true});

$('dl#my-accordion2').accordion({open:true});

两个accordion结构定义完成后，第一个面板默认设置为打开，图3显示一个用在同一个HTML文档的多个accordion插件的示例。

图3.用在同一个HTML文档的多个accordion结构

组合在一起

在创建新定制的jQueryaccordion插件，编写CSS，并放置好HTML标记之后，您就可以将它们组合起来放在一个最终的Web页面中。要使jQueryaccordion插件正常运行，必须嵌入jQuery库。我更倾向于使用ContentDeliveryNetwork(CDN)，根据用户地理位置分发库，以最快的方式交付文件。Google在其自身的CDN中包括jQuery库，您可以使用
URL

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

将文件嵌入到您的Web页面中。

该库的其他版本也是可用的。请参阅参考资料中有关Google开发人员网站上获取这些库的链接。其他文件中，只有那些需要在您HTML文档中引用的文件是CSS文件，设计成accordion和jQueryaccordion插件样式。在此之后，实际accordion
结构的HTML标记将被转换。清单11显示了一个示例。

清单11.将两个accordion结构定义为jQueryaccordion

<!DOCTYPEHTML>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<title>CreatingaCustomjQueryPlugin</title>

<linktype="text/css"rel="stylesheet"href="jquery.accordion.css"/>

<scripttype="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

</script>

<scripttype="text/javascript"src="jquery.accordion.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$('dl#my-accordion').accordion({open:true});

$('dl#my-accordion2').accordion({open:true});

});

</script>

</head>

<body>

<dlclass="accordion"id="my-accordion">

<dt>Section1</dt>

<dd>Maurismaurisante,blanditet,ultricesa,suscipiteget,quam.</dd>

<dt>Section2</dt>

<dd>Vestibulumaveliteuantescelerisquevulputate.</dd>

<dt>Section3</dt>

<dd>Nammi.Proinviverraleoutodio.Curabiturmalesuada.</dd>

<dt>Section4</dt>

<dd>Vivamusnisimetus,molestievel,gravidain,condimentumsitamet,nunc.</dd>

</dl>

<p>Loremipsumdolorsitamet,consecteturadipiscingelit.</p>

<dlclass="accordion"id="my-accordion2">

<dt>Section1</dt>

<dd>Maurismaurisante,blanditet,ultricesa,suscipiteget,quam.</dd>

<dt>Section2</dt>

<dd>Vestibulumaveliteuantescelerisquevulputate.</dd>

</dl>

</body>

</html>

结束语

在本文中，您已了解到创建一个自定义jQuery插件非常容易。您创建的任何可重复函数都可以迅速转化成一个插件，从而加快开发速度并提高开发效率。可重用性是任何插件的关键，可重用性意味着生产率的提高。