jQuery实例编程 part1

原文作者：ok-cool
原文链接：jQuery For Programmers: Part 1
译者：令狐葱

 

我可以写本小书来说说jQuery是怎么的好，以及它是怎么改变了我的Javascript编程习惯，让我觉得很受用。算了，废话少说，言归正传说说plugins（插件）。

其实我对jQuery的开发也不是很熟悉，但是它的好处是不言自喻的。至少，你可以将你的代码封装成可以重用的模块，并且使这些插件高度可配置。

例子

展开和折叠功能。可能每个人都见过，网站上的这些区域包含一些你可能想要看到的额外信息，但是它却不总是立即出现。你点击那个+然后稍等（译注： hey presto这个不知道怎么翻译），内容就会出现并且+变成了-，以便你把它折叠起来。

就像下面这个样子：

 

实现方法

 jQuery好就好在你可以很轻易的制作出很好的效果。我的意思是，当javascript关闭的时候，它可以完美的退化。当没有开启 javascript的时候，我们期望只是简单的显示原有的标记，要实现这个我们就需要使我们的插件在加载的时候来隐藏这些内容，把它放在图标+下面以表 示它是可以折叠的部分，然后关联相应的事件处理函数来管理展开、折叠效果。当javascript关闭的时候，用户也不至于手足无措。

下面是整个插件的伪代码。

插件的主代码

1. 为我们找得元素（头或者内容）设定默认的设置。

2. 遍历找到的每个jQuery对象（就是包含着头和内容的div标签）

3. 找到头元素并加上+图标

4. 给头添加一个事件响应（参见下面的头的点击响应部分）

5. 隐藏内容

头的点击响应

1. 设置内容是展开还是折叠的图标图片地址。

2. 在头中改变图标

3. 交替改变内容的显示和隐藏

代码部分

---

1. //This simple jQuery plugin is for collapsing and expanding sections of content.  
2. (function() {  
3.   
4. jQuery.fn.collapse = function(settings) {  
5.   
6. var cContainers = this;     //The jquery objects that contain our collapsable items.  
7.   
8. // define defaults and override with options, if available  
9. // by extending the default settings, we don't modify the argument  
10. settings = jQuery.extend({  
11. header: "h3",  
12. content: "ul",  
13. expandIcon: "images/plus_icon.gif",  
14. collapseIcon: "images/minus_icon.gif"  
15. }, settings);  
16.   
17. //Loop through the jquery objects (these are the elements that contain our items to collapse).  
18. return cContainers.each(function(){  
19.   
20. //This current dom element.  
21. var jDomElem = this;  
22. var headerDomElem = jQuery(settings.header, jDomElem);  
23. var contentDomElem = jQuery(settings.content, jDomElem);  
24.   
25. //Put the plus/minus icon in to the header.  
26. var expandIconDomElem = headerDomElem.prepend('<img src="' + settings.expandIcon + '" alt="" />');  
27.   
28. //When the header element is clicked.  
29. headerDomElem.click(function() {  
30.   
31. //Determine the correct expand/collapse icon src.  
32. var iconImgSrc = settings.expandIcon;  
33. if(contentDomElem.css("display")=="none") {  
34. iconImgSrc = settings.collapseIcon;  
35. }  
36.   
37. //Take the header (the clicked item) and change the icon in it. We know this is the first element inside it because we put it there.  
38. jQuery(this.firstChild).attr("src", iconImgSrc);  
39.   
40. //Show/hide the content.  
41. contentDomElem.toggle();  
42.   
43. });  
44.   
45. //Hide the content area.  
46. contentDomElem.hide();  
47.   
48. });  
49.   
50. };  
51.   
52. })(jQuery);

---

给插件命名

有个简单的给插件命名的方式，就是叫jquery.插件名.js，所以我们的插件就叫jquery.collapse.js。

同时，我们还使用 .pack作为文件名称的结尾，来表示它是压缩后的JS。比如，jquery.collapse.pack.js.

使用插件

现在我们有了插件，那就看看如何使用吧：

---

1. $(document).ready(function(){  
2. $("div.collapse").collapse();  
3. }); 

---

"div.collapse"意思就是我们将把我们的插件应用到有一个class属性为collapse的div标签上。我只是使用collapse这个类来简单的标示折叠、展开的内容。如果出于某种原因，我们需要改表这些div中的来表示头或者内容的元素名称，或者我们想改变一个那个图标，我们可以这样用这个插件：

---

1. $("div.collapse").collapse({header: "h2", content: "p", exapandIcon: "images/plus.gif", collapseIcon: "images/minus.gif"});

---

结果

你可以在这里下载这个插件的代码：link。