令狐葱@关注互联网

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。

发表于 @ 2008年03月10日 8:59 AM | 评论 (1)

使用 jQuery/PHP/MySQL实现自动完成功能

原文作者：nodstrum.com
原文链接：AutoCompleter Tutorial - jQuery(Ajax)/PHP/MySQL
译者：令狐葱

一如往常，demo和源码的zip包在文章最后，慢慢欣赏吧！

我觉得我有必要写这个教程，因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包，然后告诉你怎么使用，而不是告诉你它是如何工作 的以及为什么这样做。而知道这些可以让你对这个插件可以进一步的按自己的需求定制（关于这一点我在我的blog里写过不少关于其他应用的文章）。

此处阅读全文

发表于 @ 2008年03月10日 8:58 AM | 评论 (0)

javascript 的框架比较

javascript 的框架比较

 

前几天Justin Silverton在blog 上推荐了5个javascript 的框架，后边的留言中又有人力挺JQuery，于是看了一下JQuery，感觉真的很不错。所以如果世上只有一个javascript 框架，兴许不会有人说三道四或者排排名次，但是就是因为选择多了，才觉得无从选择。在 Google Trends 上比较了一下YUI,Prototype,Rico,Dojo,jQuery 这5个，兴许从图上可以看出点什么：》

 

 yui     prototype     rico     dojo     jquery    

发表于 @ 2007年05月16日 7:24 PM | 评论 (2)

[CSS] Nifty：不用图片做圆角效果

nifty 可以说是个很难得的一段代码，其功能就是不使用图片实现很漂亮的圆角效果（如图），主要使用css和javascript 实现。以前介绍过的 onlywire 用的就是这种技术。

目前 nifty 已经有第三版了，不过第一版用起来已经很方便了。（版本1、2、3） 

发表于 @ 2006年05月10日 12:29 AM | 评论 (3)

flash 版mp3播放器

在witao 上看到的几个可以嵌入到网页上的flash 版mp3播放器，其中我比较喜欢audio player，界面还不错，而且可以加入多首歌曲连续播放。下面是 大城小爱、简单爱。

还有一个叫做DEW Player，看上去也不错。。

witao 上还有更多关于其他Flash的音乐播放器的介绍。

发表于 @ 2006年05月08日 10:47 AM | 评论 (0)

[软件] CSS Tab Designer：几秒钟制作css 菜单

CSS Tab Designer是一个使用CSS来设计你的导航菜单的可视化软件，其实简单得说，也就是在软件里面内置了60多种menu样式，其实你只要有这些样式文件，完全可以自己修改满足需要。这个软件也就是提供一个可视化的界面罢了，当然，如果需要你也可以导出现有的样式进行修改。

软件下载地址。

另外，再推荐一些很不错的符合web 标准的css菜单：

CSS Navigation Techniques (37 entries).

Dragon Labs | The Ultimate Tabbed Menu

发表于 @ 2006年05月06日 7:07 PM | 评论 (1)

php的MVC架构

最近在看关于php 的几个框架，也不知道那个比较好用，看网上的评论似乎那个smarty 比较火，但是有感觉太复杂了。总体看来都是采用MVC的架构。

小侯正在研究cakephp，这个似乎也很不错，基于Ruby on Rails改造。不过我觉得还是有点复杂。刚才在网上看到一个廖宇雷写的框架，叫做FleaPHP，好像以前叫FLEA1。FleaPHP现在有了自己的官方网站，好像发展势头还不错。廖宇雷看样子也是chinaunix 上的牛人：〉

看一下先：〉但愿不让我失望。
PS：中文的完全帮助文档还没出炉：《=========

发表于 @ 2006年04月25日 1:42 AM | 评论 (2)

两个网页跳转地址的代码

两个网页跳转地址的代码(不隐藏跳转后地址)，在霏凡看到的，很不错。

发表于 @ 2006年04月12日 11:15 PM | 评论 (0)

[PHP] 不用数据库的Blog和BBS源码

在霏凡上看到的不需要数据库的BBS和blog 程序，在网上不是很容易找到，用php写的，下面提供下载地址，没有演示，不过我已经测试，都很好用，个人比较欣赏Mixer：〉

BBS:
Ofstar 2.6.0
官方网站:http://www.ofstar.net/
下载地址:简体安装版下载: (2.6.0)
简体升级版下载(2.x --->2.6.0)

BLOG程序:
mixer
cutenewsbystar

发表于 @ 2006年04月11日 1:13 PM | 评论 (4)

[PHP+MySql] 一步步教你写Blog

以前看过Trevis Rothwell 写的这篇Building a Weblog with PHP and MySQL，当时保存在美味，后来原有连接无法访问了：《 今天想起来这篇文章，在网上搜居然没有人转过，比较郁闷，后来通过代理（好像betaproxy也和Trevis Rothwell 有关系？）找到作者的一个站点，把这篇文章保存了下来。

[原文连接    我的转载]

这篇文章一步步讲述了一个简单的只剩下发表和恢复功能的blog的创建过程，是学习php+mysql 编程的很好的资料，所以贴出来和大家分享：》

文章中没有提供源代码下载，我整理了一下代码，运行通过。如果需要源码，可直接向我索取。

发表于 @ 2006年04月04日 11:32 PM | 评论 (2)