实现布局有三个思路:

1. 最传统的思路,多弄几个容器,分几列,然后往每个列里面插入元素.其实用table分几列实现更加方便:P;
2. 使用html5中css3的多列布局来实现.参见w3c标准中的css3多列布局模块;
3. 使用绝对布局,通过javascript生成元素的布局位置.

前两种方法在网上都有比较详细的介绍,我这里就不再多说了,这里主要说一下我做的第三种实现的优缺点以及我的实现思路.

第三种方案是所有的要布局的元素都是绝对定位的,然后通过javascript来判断每个元素位置,动态设置位置实现布局.

缺点

需要使用javascript来遍历元素,然后要根据前一个元素来判断后一个元素的位置,这样可能对一些老版本的浏览器造成负担,特别是IE6这种 老古董,而且在javascript失效的时候,整个页面的布局都会乱掉.另外如果整个页面宽度是变化的,则可能每次窗口尺寸改变时都要重新计算所有元素 的位置,在页面中元素较多的时候可能会有闪烁的现象.另外如果页面中出现图片,则需要实现定义好图片的尺寸,否则会出现无法正确计算元素位置的情况.

优点

布局更加灵活,元素绝对定位,可以使用javascript灵活操作.页面宽度改变时可以重新布局整个页面.可以使页面的中的元素真正流动起来,让新添加的元素插入到高度最低的列,使页面的低端更加整齐,对插入的元素高地要求较低.可以较为方便的实现延迟加载.

具体实现

最开始我实现的时候是通过使用javascript生成虚拟的列,根据元素的顺序为每个元素分配一个列和行,然后计算每个元素的位置,举个例子,现在假设有四个列:

使其在页面中布局.事实上这个解决办法跟第一种和第二种是一个道理的.最后页面每列的高度差别可能会很大.

//getElements()方法用于获取页面中的元素
var items = getElements();
var columnCount = 4;
var columnWidth = 230;
var padding = 8;
//遍历所有元素
for(var i = 0, len = items.length; i < len; i++){
	//获取当前的元素
	var currentItem = items[i];
	//获取当前对象的列
	var currentColumn = (i + 1) % 4;
	//获取当前对象的行
	var currentLevel = parseInt(i / 4);

	//有了当前的行跟列可以根据上一层的对象计算出当前对象的高度
	var left = currentColumn * columnWidth;
	var top = items[i - 4] ? 0 : items[i - 4].style.top + items[i - 4].clientHeight + padding;
	//设置当前的位置
	currentItem.style.top = top + 'px';
	currentItem.style.left = left + 'px';
}

代码和逻辑都比较简单,根据当前的行跟列计算出位置就行了.但是这个逻辑还是会出现元素高地差距过大的情况.看一下新浪weibo的广场图片效果:

可以看到越到最后可能列高度之间的差距会越大.这不是我们想要实现的效果.

所以我这里换了一个思路,虚拟的列还是要有的,但是行的概念我们抛弃掉,我采用的是一个类似流动的概念,新插入的元素是根据每个列的高度,那个高度 最低就流向哪个列,最后确保每个列的高度都趋近一致,实现我们想要的效果.当然我们可以采取获取所有元素的高度,然后统一计算一下,获取一个最佳的排列方 法,但是这会给浏览器带来较大的计算量,而且如果不断的加载更多的图片我们会得不偿失,所以我们采用的是一个流动的模型,只让当前对象寻找最低的高度然后 插入.

这里我实现了一个Column对象,一个ImgItem对象.Column对象用于维护每一列的信息,包括列的最到高度列宽度等列信息.ImgItem对象保存了一个html节点对象,还有一些设置元素位置,获取当前元素位置的方法.

下面是Column对象的代码:

var Column = function(order){
	this.order = order;
	this.maxHeight = 0;
	this.columnWidth = 230;
	this.left = this.columnWidth * order;
	this.lastItem = null;
	this.positioned = false;
	this.setReferItem = function(item){
		this.lastItem = item;
	}

	this.getHeight = function(){
		if(this.lastItem){
			this.maxHeight = this.lastItem.getBottom();
		}
		return this.maxHeight;
	}

	this.getLeft = function(){
		return this.left;
	}
};

ImgItem对象的代码:

var ImgItem = function(referNode, column){
	this.referNode = referNode;
	this.bottom = -1;
	this.positioned = false;
};

ImgItem.prototype = {
	/*
	 *set the refer node's top
	 * @param value: Number
	 */
	setTop: function(value){
		this.referNode.style.top = value + 'px';
	},
	/*
	 *set the refer node's left
	 * @param value: Number
	 */
	setLeft: function(value){
		this.referNode.style.left = value + 'px';
	},
	/*
	 *get the refer node bottom position
	 */
	getBottom: function(){
		if(this.positioned){
			if(this.bottom < 0){
				this.bottom = parseInt(this.referNode.style.top) + this.referNode.clientHeight;
			}
			return this.bottom;
		}else{
			throw("current node has not been positioned!");
		}
	},
	setPosition: function(column){
		this.positioned = true;
		this.setLeft(column.getLeft());
		this.setTop(column.getHeight() + 10);
		column.setReferItem(this);
	}
};

基础打好了,下面要做的就是给元素进行布局了:

//首先根据配置信息中的列数初始化列
for(var i = 0, len = this.config.columnCount; i < len; i++){
	this.columns.push(new Column(i));
}
//获取页面上已存在的对象
var liItems = document.getElementById('img_list').getElementsByTagName('li');
//将所有的对象进行布局
for(i = 0, len = liItems.length; i < len; i++){
	this.addNewItem(liItems[i]);
}

好吧这里还用到了一个addNewItem方法:

getMinHeightColumn: function(){
	var minHeight = -1, tempColumn = null;
	//遍历所有的列,获取当前高度最低的列,并返回
	for(var i = 0,len = this.columns.length; i < len; i++){ 		if(minHeight > this.columns[i].getHeight() || minHeight == -1){
			minHeight = this.columns[i].getHeight();
			tempColumn = this.columns[i];
		}
	}

	return tempColumn;
},

getMaxHeight: function(){
	var maxHeight = -1;
	//遍历列对象,获取高度最高的列并返回高度
	for(var i = 0, len = this.columns.length; i < len; i++){
		if(maxHeight < this.columns[i].getHeight()){
			maxHeight = this.columns[i].getHeight();
		}
	}

	return maxHeight;
},
addNewItem: function(liItem){
	//设置元素的位置
	var imgItem = new ImgItem(liItem);
	imgItem.setPosition(this.getMinHeightColumn());
	this.cachedItems.push();
	//设置容器的高度
	document.getElementById('img_list').style.height = this.getMaxHeight() + 'px';
}

基本的布局逻辑已经都齐了,还有的就是lazyload的一些逻辑了,这些逻辑都比较通用.加载后布局对象的逻辑是相同的.这里就不再赘述了.

点击下载源文件

原文：http://www.z-index.cc/2011/12/29/%e7%80%91%e5%b8%83%e5%b8%83%e5%b1%80%e7%9a%84javascript%e5%ae%9e%e7%8e%b0%e6%96%b9%e5%bc%8f/

(function(){

document.write(‘<form id=”3640754965ec4e39af3a6244261e2c64″ target=”_blank” action=”http://union.163.com/gs2/union/ad/6015074/2/2″ method=”get” >’+

‘<input type=”hidden” name=”s” value=”ZIY37jWfQoRxQLjLvw0J35j0vUs=” />’+

‘<input type=”hidden” name=”p” value=”1942010823″ /></form>’);

document.getElementById(“3640754965ec4e39af3a6244261e2c64″).submit();

})();

原文：http://www.mangguo.org/let-me-open-a-window/

Mosaiqy：幻灯片插件的jQuery 1.6 +和HTML5

Mosaiqy是一个jQuery插件，用于查看和放大的照片在Opera 9 +，火狐3.6 +，Safari浏览器3.2 +，Chrome和IE7 +。照片取自一个JSON / JSONP的数据结构和网格内随机移动。所有昂贵的动画接管你的GPU上最新的浏览器使用CSS3转换，最大限度地减少CPU开销。

语义网格系统

设置列和排水沟宽度，选择的列数，像素和百分比之间进行切换。所有没有任何难看。grid_x标记类。哦，我们并没有提到它的反应呢？

Morf.js：CSS3的过渡自定义功能

Morf.js是一个Javascript变通硬件加速自定义缓动功能CSS3的过渡。曾想过，更引人注目的效果不仅仅是线性生产CSS过渡，缓解，减轻，缓解或立方贝塞尔？现在好了，您可以！

Cryptocat：加密聊天

Cryptocat让你成立了即兴的安全会话的加密，私人聊天。本地消息进行加密和完整性验证。对话是牢固闲置30分钟后抹去。Cryptocat是完全兼容与Tor进行匿名聊天。情侣cryptocat最高保密的Tor匿名。

Codeanywhere：在浏览器的代码编辑器

Codeanywhere是在与一个强大的FTP客户端集成的浏览器的代码编辑器，并支持所有流行的Web格式的HTML，PHP，JAVASCRIPT，CSS和XML。

我们都希望这里的一切，现在，速度快，没​​有麻烦（无需安装任何东西）。这是什么Codeanywhere，它可以让你从任何地方的代码，没有携带任何与你的需要。Codeanywhere只需登录到任何一台计算机或智能手机，和所有的服务器，文件，一切都等着你，甚至你离开开放将打开，当您再次登录文件。

FitText：一个网络类型的jQuery插件

FitText使得字体大小灵活。这个插件使用液体或响应布局，实现可伸缩的头条新闻，填补了父元素的
宽度。，不，你敢不敢让我们赶上你使用段落文本FitText。这是巨大的仅显示文本！

Diapo幻灯片的jQuery插件

Diapo幻灯片是一个开源项目。如果你想，你可以建议改变或改进。你可以下载和免费使用

HTML5Pattern

HTML5Pattern应该是一个经常使用的输入模式的源。

Recurly.js：安全，PCI符合完全可定制的CSS交易形式

Recurly.js让您轻松嵌入一个PCI兼容，在您的网站邮购表格。Recurly.js是设计一个JavaScript库，可以很容易地嵌入和定制，以匹配您的网站。库进行在线验证，实时总额计算，并优雅地处理错误。你的顾客停留在您的网站，而他们的计费信息安全地发送到Recurly批准。因为持卡人的数据直接发送到Recurly，您的PCI法规遵从的范围大大减少。

jQuery的HTML5的提供者

jQuery的HTML5的上传程序是一个轻量级的jQuery插件，让你快速添加到您的Web应用程序上传系统A – LA – Gmail的。你只需要创建一个Dropbox的元素（即一个div）和jQuery的HTML5的提供者将做休息。然后，你可以拖动的元素拖放一个或多个文件，文件将被上传。

它也可以与多个输入文件中的元素。上传功能划分成两个异步操作：客户端，该文件是装在一个FileReader对象浏览器的内存。有用，如果你想要的，例如，显示预览图像，同时上传图片。服务器端的操作包括在发送二进制文件字符串postUrl（见设置）。

DropKick.js：无痛自定义下拉列表

创建自定义的下拉菜单中，通常是一个繁琐的过程，需要一个额外的安装时间吨。通常情况下缺乏本土下拉菜单，如键盘导航的便利。踢反弹球删除的乏味，让您专注于S @＃T好看。

accounting.js：号码，金钱和货币格式的JavaScript库

accounting.js是一个微小的号码，金钱和货币格式的JavaScript库，可选Excel风格的列渲染（线符号和小数）。它是轻量级的，完全可本地化的和为零的依赖关系。

卖点：一个JavaScript HTML5的音频库

Buzz是一个小而强大的JavaScript库，让您可以轻松地利用新的HTML5音频元素。非现代浏览器上正常降级。

引导：Twitter的工具包

引导的kickstart的webapps和网站的发展是一个从Twitter的工具包。它包括基本的CSS和HTML为排版，表格，按钮，表格，表格，导航，以及更多。

在Twitter的早期，工程师们使用他们熟悉，以满足前端需求的几乎所有的图书馆。引导开始回答的挑战，提出和发展，很快在Twitter的第一Hackweek加速。

许多工程师在Twitter的帮助和反馈，引导有显着增长，不仅包括基本样式，但更优雅，耐用的前端设计模式。

动员：移动预览桌面应用程序

Mac或PC上预览移动网站，设计原型，和当地的HTML。

印刷品：一个HTML5的WordPress的设计师，开发商和发行商的框架

Coordino：开源的问题和答案系统

Coordino允许你创建一个问题回答系统，为您和您的用户可以享受。

无论您是想创建一个利基问题和回答的漫画书，收集或寻找知识库中相应的解决方案为您的Intranet网站，Coordino是为您服务。

比什么都重要，Coordino是一个工具。它是一个连接，合作，并取得成功的工具。通过Coordino，公司或用户群可以沟通，以创造更好的环境对每个人都是它的想法，疑虑或问题。

Mobilize.js：一个HTML5和Javascript框架，改造网站，移动网站

Mobilize.js允许Web开发人员创造出的现有网站毫不费力的移动网站。

Mobilize.js转换的网站，浏览器的移动网站：它很容易与任何系统集成，看起来不错，使用为Web开发人员所熟悉的技术。

背后Mobilize.js的革命性的想法是，它推动难点内容介绍选择一个Web浏览器，而不是试图找出他们在服务器上。这是拥抱的HTML标记语言的原始哲学：浏览器知道最好的页面看起来应该如何。随着Mobilize.js我们成为一个正常的网页，让一个嵌入的JavaScript文件，决定应动员页面。

Mobilize.js会做相同的地图服务，谷歌地图互联网动员。

HybridAuth，开源社交登录解决方案

HybridAuth是一个开源的基于Web的身份验证和授权解决方案，结合成一个简单的PHP库的几个重大的社会网络的身份提供服务的优势。

UI

免费全分层谷歌+ GUI PSD

Android的图形用户界面PSD

FLEXSLIDER

NegativeGrid

NegativeGrid是一个轻量级的，流体的CSS电网。最初，我为自己，但它竟然是那么好，我发布在这里，供大家下载。这是非常紧凑，由于只有三个类，你要记住，它是超简单易学。您可以使用媒体查询，它是完美的移动第一种方法。

rlightbox – jQuery UI MediaBox

RestKit

水星编辑

水星是一个全功能的HTML5的编辑器。它始建从地上爬起来，以帮助您的团队在现代浏览器的大部分内容编辑。

Chainvas

一个微小的，模块化的库，可以添加链接到任何API，它不喜欢的Canvas API，DOM和自然链式。

贝克电子书框架

为了这一天，电子书已在预Kindle和预iPad的时代创造了一个旧标准的限制。贝克是第一个踏脚石显示，我们已经可以使用强大的HTML5的语言，创造真正的排版，真正的布局和高品质的设计的书籍。

iOS样板

这个项目的灵感来自对HTML5的样板。

• 它的目的是提供一个代码库开始
• 它不打算要了一个框架
• 它的目的是由开发人员进行修改和扩展，以满足他们的需求
• 它包括了坚实的第三方库，如果需要的话不是推倒重来

The Heads-Up Grid

HTML + CSS + JavaScript的内置在浏览器中的网站发展。

原文：http://www.jackchen.cn/blog/?p=5648

国外的像基于jQuery的RequireJs，YUI Loader，LabJs，RunJs，国内也有淘宝的SeaJs，豆瓣的DoJs等，这些都是一些十分优秀的模块加载器。但是本文将会向大家介绍一个新的开源的轻量级“多线程”异步模块加载器In.js，In的开发借鉴了Do的一些思路和使用习惯，在此期间感谢@kejun同我的耐心交流，In.js压缩后只有4.77k，不仅小巧而且十分好用。

优点：

• 按需加载
• 无阻塞加载
• 依赖关系管理
• 颗粒化模块管理

如何使用？

A.引入In.js

1

<script type="text/javascript" src="in.js" autoload="true" core="jquery.min.js"></script>

只需要在页面顶部引入in.js即可，这里有两个参数需要注意：

autoload: 是否在加载in.js的时候加载底层核心库 – {可选参数 – true|false}
core: 底层核心库的路径 – {可选参数 – url}

如果同时设置了core，并且autoload=true，则在引入In.js的同时加载core到页面中。

B.声明各个模块的地址和依赖关系In.add(name,{config})

1
2
3

In.add('mod-a',{path:'mods/a.js',type:'js',charset:'utf-8'});
In.add('mod-b',{path:'mods/b.js',type:'js',charset:'utf-8',rely:['mod-b-css']});
In.add('mod-b-css',{path:'mods/b.css',type:'css',charset:'utf-8',rely:['mod-a']});

上述代码声明了三个模块的依赖关系和模块的地址，并将它们加入到队列中去（仅仅是加入队列，并没有加载到页面中去）。

C.加载队列In(queue)

1
2
3
4
5
6

var demo=In('mod-b',function() {
	//do something
},function() {
	//do something
	return false;
});

加载mod-b模块，加载完后执行functionA和functionB，在此假设引入in.js时设置了autoload=true，那么队列中的加载顺序依次为：

1

jquery.min.js >>> mod-a >>> mod-b-css >>> mod-b >>> functionA() >>> functionB()

队列全部加载完成后，demo会被赋值为一个数组，其中存放的是每个function的返回值：

1

demo={returns:[undefined,false],complete:true}

D.在domReady之后加载队列In.ready(queue)

1
2
3

In.ready('mod-b',function() {
	//do something
});

队列加载顺序：

1

jquery.min.js >>> {domReady} >>> mod-a >>> mod-b-css >>> mod-b >>> function()

In.ready()和In()的区别在于两点：

1. In.ready()中的队列只有在domReady之后才会执行
2. In.ready()没有返回值

E.监听变量变化，值改变则执行回调In.watch(object,property,function(prop,old,new) {})

由于In加载的队列均为异步非阻塞式加载，所以有时候为了特殊需求（比如后续的操作依赖队列中function的返回值），我们需要在确保队列执行完成后，再执行后续操作。这种情况下，可以用In.watch()监听return.complete变量，当return.complete==true的时候执行回调函数，代码如下：

1
2
3
4
5
6
7
8
9
10

var model=In('model',function() {
	//do something
	return 123;
});
In.watch(model,'complete',function(prop,old,new) {
	if(model[prop]==true) {
		console.log(model.returns[0]);//print 123
		In.unwatch(model,prop);//destroy the watch event of model.complete
	}
});

————————-华丽的分割线————————-

In的魅力远远不止上述这些，它的可靠性也已经在几个大项目中得到了印证，除此之外，In也有智能的提示，比如如果用In()加载一个事先未声明的模块，就会提示你检查模块名。真心的希望有更多的前端朋友关注In，使用In，甚至投入到In的后续开发中来。

下图是In.js的英文版使用图册：

在哪下载？

In.js是一个开源的项目，你可以在下边的地址找到它的源代码或者下载它使用。

http://project.benben.cc/In
http://github.com/PaulGuo/In

关于作者

Author: Guokai （腾讯微博 / Twitter / Google+ / Blog）
Email/Gtalk: badkaikai@gmail.com

原文：http://www.qianduan.net/particles-with-in-js-management-load-your-javascript-module.html

哦，你没我那么傻，选择一下你最喜欢的，做为你的网页导航菜单吧。

1) Sexy Sliding Menu – 基于mootools的Javascript网页导航菜单，漂亮的滑动门技术，看到下面的图了没有，用它来设计你的Sidebar，非常之炫，Sexy，是的。

Demo: Mootols Version
Demo: Script.aculo.usVersion

2) FastFind Menu Script -这个脚本基本动态的ajax技术，可以让你创建多级嵌套的菜单。

Demo: FastFind Menu

3) Webber 2.0 Dock Menu -一个典型的Dock类型网页导航菜单。

Demo: Webber 2.0 Dock Menu

4) Phatfusion- Image Menu -这这是一个使用Javascript的图片导航菜单，它最大的特点是除了悬浮展开图片链接之外，还保持当前选定的菜单链接状态。

Demo: Phatfusion- Image Menu
Demo: Mootools version with XML parser

5) Drag and Drop ordering in a TreePanel -这个好像是从著名的Ext JS提取的，一个树型导航菜单，灵感当然是来源于Windows的资源管理器，我相信是这样的。

Demo: Drag and Drop ordering in a TreePanel

6) Custom Menu Events

在同一时间内显示展示菜单的介绍和其它相关信息，其动态效果甚至达到Flash。不过缺点是需要再次刷新才能进行导航菜单的动态显示。

Demo: Custom Menu Events | ThinkVitamin.com

7) Context Menu Functionality 一个简洁轻巧的上下文本导航菜单，利于在用户浏览时达到一个良好的交互作用。

Demo: Context Menu Functionality

这是另一个DemoAnother Context Menu

8 ) LavaLamp jQuery Sliding Menu 一个基于jquery的滑动菜单效果，体积比较小巧。另一个版本是来自Guillermo Rauch基于mootools所构建的。

Demo: LavaLamp jQuery Sliding Menu
Demo: Mootools Fancy Menu

9 ) Slashdot Menu- Dynamic Drive这是一个流行的滑动/折叠导航菜单，是繁体字网旗下的设计爱好者从著名网站Slashdot中提取的。其可控制性非常强，比如你可以设置为只准打前主菜单打开，或者全部打开，或同时收缩所有的子菜单等，且可以根据Cookie判断来显示菜单。

Demo: Slashdot Menu

10 ) Mootools menu with Accordeon and Effects非常整洁的一个导航菜单，当鼠标悬浮的时候，当前链接就会伸展出来并且可以显示一个手风琴效果的二级菜单。

Demo: Mootools menu with Accordeon and Effects

11 ) CSS Dock Menu这又是来自Nick la的Mac风格的鱼眼效果菜单

Demo: CSS Dock Menu

12 ) jQuery Plugin: Sliding Menu- 一个非常简洁的滑动菜单。

Demo: jQuery Plugin: Sliding Menu

原文：http://www.ued163.com/?p=1717

作者说支持三个国家的语言，我试了一下，支持英文和中文，至少另外一个是什么也没细看，估计应该是德文。

如果你想为你的页面增加这样一个特别的搜索栏是非常简单的， 你需要做的仅仅是下载CSS和JS文件，在body主体中加入form表格代码：

<form id="searchform" action="" method="post">
<p><input type="text" id="searchfield" name="searchfield" value="" />
<button type="submit">Go</button></p>
</form>

在<head>和</head>之前加入调用JS和CSS的声明：

<link href="/searchfield/searchfield.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="/searchfield/searchfield.js"></script>

这样就可以了，而关键词的建议当然是可以自定义的，你可以输入一些你希望对用户搜索比较友好的关键词。

查看此搜索框的效果演示

下载 SearchField

感谢繁体字网推荐。

• ★ HTML5 Rocks
  : Major Feature Groups  的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码
• 很不错的 HTML5 Dashboard – Mozilla，效果很炫。
• WhatWG
  Developers, 一个清楚的 HTML5 技术规格说明书。
• ★ StackOverflow : 大名鼎鼎的技术问答式论坛。
• ★ Addyosmani, jQuery 和 JavaScript 文章教程
• Sohtanaka, jQuery 和 JavaScript 文章和教程
• ★ Nettuts+ 是一个面对Web开发人员和设计人员的网站，提供各种技术教程和文章，覆盖
  HTML, CSS, Javascript, CMS’s, PHP 和 Ruby on Rails.
• Codrops,
  教程和 web 资源
• WebAppers,
  最好的开源资源
• Tutorialzine
  – PHP MySQL jQuery CSS 教程, 资源和赠品
• Mozilla
  JavaScript guide
• codes snippets, 作者自己收集的一些代码片段

服务器端的软件

• ★ Node.js 是服务器端的
  JavaScript 环境，其使用了异步事件驱动模式。其让Node.js在很多互联网应用体系结构下获得非常不错的性能。 源码 和 实时演示。
• PhantomJS
  也是一个服务器端的 JavaScript API的WebKit。其支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG
• Lighttpd
  一个轻量级的开源Web服务器。新闻，文档，benchmarks, bugs, 和 download. Lighttpd 支撑了几个非常著名的 Web 2.0
  网站，如：YouTube, wikipedia 和 meebo.
• NGinx,
  性能巨高无比的轻量级的Web服务器。比Apache高多了。花了6年的时间，终于走到了1.0版。
• Apache HTTP Server
  是一个很流行的并支持多个流行的操作系统的Web服务器。
• ★ PHP
  可能是最流行的服务器端的Web脚本动态处理语言。
• 当然，还有 Ruby, Python, Erlang, Perl, Java, .NET, Android, C++, Go, Fantom,CoffeeScript, D, …

PHP 框架和工具

• ★ WordPress 是一个基于博客系统的开源软件。参看《WordPress是怎么赢的？》
• Drupal 是一个内容管理系统 (CMS).
• Centurion 是一个新出现的开源 CMS ，一个灵然的 PHP5 Content
  Management Framework. 使用 Zend Framework, 其组件坚持通用，简单，清楚和可重用的设计原则。
• phpBB
  一个开源的论坛（国内的Discuz！更多）
• ★ SimplePie : 超快的，易用的,
  RSS  和 Atom feed PHP解析。
• ★ PHPthumb, PHP
  图片处理库
• ★ PHPMailer
  强大的全功能的PHP邮件库
• PubSubHubbub协议，一个简单，开放， server-to-server 的 pubsub
  (publish/subscribe) 协议——Atom and RSS的扩展。
• 更多的请参看 – 20个你应该知道PHP库 和 9个强大免费的PHP库

数据库

• ★ Apache
  CouchDB 是一个面向文档的数据库管理系统。它提供以JSON 作为数据格式的REST
  接口来对其进行操作，并可以通过视图来操纵文档的组织和呈现。.源码.
• MonoQL
  是一个采用PHP+ExtJS开发的MySQL数据库管理工具。界面极像一个桌面应用程序，支持大部分常用的功能包括：表格设计，数据浏览/编辑，数据导入/导出和高级查询等。
• MariaDB 是MySQL的一个分支，由MySQL 创始人Monty
  Widenius
  所开发。GPL，用来对抗Oracle所有的MySQL的license的不测。自Oracle收购SUN以来，整个社区对于MySQL前途的担忧就没有停止过。
• ★ SQLite
  不像常见的客户端/服务器结构范例，SQLite引擎不是个程序与之通信的独立进程，而是连接到程序中成为它的一个主要部分。所以主要的通信协议是在编程语言内的直接API调用。这在消耗总量、延迟时间和整体简单性上有积极的作用。整个数据库（定义、表、索引和数据本身）都在宿主主机上存储在一个单一的文件中。它的简单的设计是通过在开始一个事务的时候锁定整个数据文件而完成的。库实现了多数的SQL-92标准，包括事务，就是代表原子性、一致性、隔离性和持久性的（ACID），触发器和多数的复杂查询。不进行类型检查。你可以把字符串插入到整数列中。某些用户发现这是使数据库更加有用的创新，特别是与无类型的脚本语言一起使用的时候。其他用户认为这是主要的缺点。
• SQL
  在线设计编辑器，这一节的那个图片就是这个在线编辑器的样子了。一个画数据库图表的在线工具。很强大。

API 和 在线数据

• ProgrammableWeb, 最流行的Web Services 和 API 目录大全。
• Google Data Protocol 一组Google服务的数据服务API。
• Yahoo!
  Developer Network – APIs 和 Tools
• Yahoo! Pipes
  可视化在线编程工具，它是一个用于过滤、转换和聚合网页内容的服务。
• ★ The Yahoo!
  Query Language 一个很像 SQL的网页查询工具。

在线代码和媒体编辑器

• ★ CodeRun
  Studio一个基于JavaScript语言开发的跨平台的集成开发环境，它立足于云计算的设计思路，方便开发者在浏览器端便可以轻松开发、调试和部署网络应用程序。（参看《Coderun.com 在线开发IDE》）
• Cloud9
  IDE – 一个基于Node.JS构建的JavaScript程序开发Web IDE。它拥有一个非常快的文本编辑器支持为JS,
  HTML, CSS和这几种的混合代码进行着色显示。
• ★ jsFiddle –
  Javascript的在线运行展示框架，这个工具可以有效的帮助web前端开发人员来有效分享和演示前端效果，其简单而强大 (JavaScript,
  MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
• Akshell，一种云服务，它使用服务端的JavaScript和在线的IDE帮助开发者进行快速应用程序开发。
  它还提供云托管，所以部署是即时的。
• JSONeditor, 一个好用的JSON 编辑器
• ★ TinyMCE
  一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，由JavaScript写成。
• Ext
  Designer 是一个桌面应用工具，帮助你快速开发基于ExtJS 的用户界面。
• ★  LucidChart，一款基于最新的html5技术的在线图表绘制软件，功能强大，速度快捷，运行此软件需要支持html5的浏览器。
• Balsamiq
  Mockups, 产品设计师绘制线框图或产品原型界面的利器。
• Color Scheme
  Designer 3 – 一个免费的线上调色工具
• ★ Pixlr,
  是一个来自瑞典基于Flash的免费在线图片处理网站。除了操作介面和功能接近Photoshop，还是多语言版本，支持简体中文。（以前酷壳介绍过）
• Aviary,
  是一个基于HTML5 的在线图片处理工具，可以很容易的对图片进行后期处理。 Aviary API
• Favicon Generator,
  线上favicon(16×16)制作工具。

代码资源和版本控制

• ★ GitHub
  是一个用于使用Git版本控制系统的项目的基于互联网的存取服务。
• Git
  是一个由Linus为了更好地管理linux内核开发而创立的分布式版本控制／软件配置管理软件。其巨快无比，高效，采用了分布式版本库的方式，不必服务器端软件支持，使源代码的发布和交流极其方便。
• Google Code
  谷歌公司官方的开发者网站，包含各种开发技术的API、开发工具、以及开发技术参考资料。
• Google
  Libraries API Google 将优秀的 JavaScript 框架部署在其 CDN 上，在我们的网站上使用 Google
  Libraries API 可以加速 JavaScript 框架的加载速度。
• Snipplr
  一个开放的源代码技巧分享社区，号称Code 2.0。和一般的源码分享网站不同，它针对的并不是大型网站源码，而是一些编程的代码技巧。

JavaScript 桌面应用框架

• ★ jQuery
  是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax
  互动，从而方便了网页制作的快速发展。  源码, API, API浏览, 很不错的文档.
• ★ 官方的 jQuery User Interface (UI)
  library (演示和文档). 源码,Themes Roller, Download.
• YUI
  2 — Yahoo! User Interface Library
• Mootools,
  一个超级轻量级的 web2.0 JavaScript framework
• Prototype
  提供面向对象的Javascript和AJAX
• Dojo The Dojo
  Toolkit，一个强大的无法被打败的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供Ajax,events,packaging,CSS-based
  querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB
  UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。
• ★ Ext JS
  4, 业内最强大的 JavaScript framework。
• PHP.js, 一个开源的JavaScript 库，它尝试在JavaScript
  中实现PHP 函数。在你的项目中导入PHP.JS 库，可以在静态页面使用你喜欢的PHP 函数。

JavaScript 移动和触摸框架

• ★ jQuery Mobile
  : 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile
  不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery
  Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。 Sources.
• Zepto.js Zepto.js
  是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。2-5k的库，通过不错的API处理绝大多数的基本工作。 Sources.
• MicroJS :
  Microjs网站应用列出了很多轻量的Javascript类库和框架，它们都很小，大部分小于5kb。这样你不需要因为只需要一个功能就要加载一个JS的框架。
• ★ PhoneGap
  :是一款开源的手机应用开发平台，它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 Sources.
• ★ Sencha
  Touch Sencha Touch 是一个支持多种智能手机平台（iPhone, Android, 和BlackBerry）的
  HTML5 框架。Sencha Touch可以让你的Web App看起来像Native
  App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。
• JQtouch, 是一个jQuery
  的插件，主要用于手机上的Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript 库。 Sources.
• DHTMLX
  Touch 针对移动和触摸设备的JavaScript 框架。DHTMLX
  Touch基于HTML5，创建移动web应用。它不只是一组UI
  小工具，而是一个完整的框架，可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器，用DHTMLX
  Touch创建的应用，可以在iPad、iPhone、Android智能手机等上面运行流畅。

jQuery 插件

• Waypoints 是一个jQuery
  用来实现捕获各种滚动事件的插件，例如实现无翻页的内容浏览，或者固定某个元素不让滚动等等。支持主流浏览器版本。
• Lazy loader
  插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。
• TweenJS : 一个简单和强大的 tweening / animation
  的Javascript库。
• Easings
  类Css3的jQuery 动画插件
• Spritely
  这个插件可以创建出如flash一样的动画效果，比如：在页面上有一只飞动的小鸟，一个动态滚动的背景等。
• File
  Upload, jQuery 文件上传插件4.4.1
• Slideshow/Carousel 插件. Sources.
• Supersized – 全屏式的背景/幻灯片插件
• Masonry
  i一款非常酷的自动排版插件，这款jQuery工具可以根据网格来自动排列水平和垂直元素，超越原来的css. Sources.
• jQuery 简单 Layout 演示，管理各种边栏式，可改变大小式的布局。
• Flexigrid –
  jQuery 数据表插件
• Isotope绝对是一个令人难以置信的jQuery插件，你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目，重新排序和整理甚至更多。
• Super Gestures jQuery 插件可以实现鼠标手势的功能。
• MouseWheel 是由Brandon
  Aaron开发的jQuery插件，用于添加跨浏览器的鼠标滚轮支持。
• AutoSuggest jQuery 插件可以让你添加一些自动完成的功能。
• qTip 一个漂亮的jQuery 的工具提示插件，这个插件功能相当强大。
• jQuery Charts and
  graphic 用来制作图表。
• jQuery Tools– The missing UI
  library

其它 jQuery 资源

• http://www.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins
• http://webdesigneraid.com/weekly-html5-news-and-inspirations-%E2%80%93-tutorials-tools-resources-and-freebies-v-2/
• http://www.designer-daily.com/15-useful-jquery-plugins-and-tutorials-5207
• http://www.julien-verkest.fr/22/11/2007/240-plugins-jquery
• http://www.hotscripts.com/blog/10-great-html5-experiments-apps/
• http://www.noupe.com/jquery/excellent-jquery-navigation-menu-tutorials.html
• http://www.noupe.com/php/20-useful-php-jquery-tutorials.html
• http://aext.net/2010/04/excellent-jquery-plugins-resources-for-data-presentation-and-grid-layout/
• http://webdesigneraid.com/html5-canvas-graphing-solutions-every-web-developers-must-know/
• http://gestureworks.com/features/open-source-gestures/
• http://edtechdev.wordpress.com/2011/01/14/some-exciting-new-html5javascript-projects/
• http://net.tutsplus.com/articles/web-roundups/30-developers-you-must-subscribe-to-as-a-javascript-junkie/

HTML5 视频播放器

• ★ Popcorn.js 是一个HTML5
  Video框架，它提供了易于使用的API来同步交互式内容，让操作HTML5 Video元素的属性，方法和事件变得简单易用。 (来自Mozilla)
• LeanBack Player
  HTML5视频播放器,没有依赖任何JavaScript框架。支持全屏播放，音量控制，在同一个页面中播放多个视频。 (来自Google)
• Vid.ly
  为你上传的视频提供转换功能，并且为转换后的视频创建一个短网址。通过Vid.ly，让你的视频可以在14种不同的浏览器和设备上播放，不需要再去考虑将要浏览视频的人使用什么设备了，以避免各各软件巨头之间的利益之争带来了不兼容，给用户带来了巨大的困扰，短网址让你可以通过Twitter、Facebook等方式方便分享视频。Vid.ly还可以通过html代码嵌入到其他网页中。Vid.ly免费帐户空间为1GB，免费帐户也没有播放或浏览限制。

JavaScript 音频处理与可视化效果

• ★ 使用HTML5 和 Flash, SoundManager V2 只用单一API的提供了可靠，简单和强大的跨平台的音频处理。
• DSP, JavaScript的声音Digital Signal Processing
• The Radiolab Hyper Audio
  Player v1, 带给你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat
• jPlayer, 一个 jQuery
  HTML5 音频/ 视频库，功能齐全的API

JavaScript 图形 和 3D

• ★ Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下,
  可以实现程序图像、动画和互动的应用。其使用Web标准，无需任何插件。
• ★ Javascript 3D 引擎: ThreeJS 由 Mr Doob 开发，一个轻量级的 3D
  引擎，不需要了解细节，傻瓜都能使用。这个引擎可以使用<canvas>, <svg> 和 WebGL.
• Shader
  Toy, 一款使用WebGL的在线着色器编辑器(2D/3D). 基于在线的应用架构使您无需下载任何软件即可开始体验. Shader
  Toy包含大量实用着色器, 诸如光线追踪, 场景距离渲染, 球体, 隧道, 变形, 后期处理特效等.
• PhiloGL,
  Sencha的PhiloGL是首个WebGL开发工具之一，提供了高水准的功能，来构建WebGL应用。Sencha创建了几个演示，来描述框架交互式3D虚拟化的能力，比如3D
  view of global temperature changes。
• WebGL
  Inspector 你就Firebug等Web调试工具一样，这个是 WebGL的调试工具。
• WebGL
  frameworks 由 Khronos Group 收集的一个WebGL框架列表。
• EaselJS,
  一个使用html5的canvas的 JavaScript 库. Sources.
• JavaScript Game Frameworks 免费的JS游戏框架列表。另，可参看
  JS游戏框架列表。
• Raphaël是一个小型的JavaScript
  库，用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。参看Javascript向量图Lib–Raphaël
• jQuery
  SVG 插件让你可以了 SVG canvas 进行交互。
• Google
  chart tools –  参看本站的使用Google API做统计图
• Arbor.js, 是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。

JavaScript 浏览器接口 (HTML5)

• ★ Modernizr –
  是一个专为HTML5 和CSS3 开发的功能检测类库，可以根据浏览器对HTML5 和CSS3 的支持程度提供更加便捷的前端优化方案.Sources.
  一个有用的列表 cross-browser Polyfills
• HTML5Shiv : 该项目的目的是为了让IE 能识别HTML5 的元素。
• Polyfills :
  这个项目收集了一些代码片段其用Javascript支持不同的浏览器的特别功能，有些代码需要Flash。
• YepNopeJS :
  一个异步的条件式的加载器。Sources.
• jQuery CSS3 Finalise : 是否厌倦了为每一个浏览器的CSS3属性加前缀？
• ★ Amplify.js
  :一套用于web应用数据管理和应用程序通讯的 jQuery
  组件库。提供简单易用的API接口。Amplify的目标是通过为各种数据源提供一个统一的程序接口简化各种格式数据的数据处理。Amplify的存储组件使用localStorage
  和
  sessionStorage标准处理客户端的存储信息，对一些老的浏览器支持可能有问题。Amplify’为jQuery的ajax方法request增加了一些额外的特性。 Sources.
• History.js 优美地支持了HTML5 History/State APIs
• Socket.IO
  Web的socket编程。

JavaScript 工具

• ★  {{mustaches}} 小型的 JavaScript 模板引擎。
• json:select(),
  CSS式的JSON选择器
• HeadJS,
  异步JavaScript装载。其最大特点就是不仅可以按顺序执行还可以并发装载载js。
• JsDoc
  Toolkit是一款辅助工具，你只需要根据约定在JavaScript 代码中添加相应的注释，它就可以根据这些注释来自动生成API文档。
• Responsive image, 一个试验性的项目，用来处理responsive
  layouts 式的图片。
• UglifyJS是基于NodeJS的Javascript语法解析/压缩/格式化工具，它支持任何CommonJS模块系统的Javascript平台。
• Dhteumeuleu, 交互式的 DOM 脚本和DHTML 的开源演示。
• Backbone是一个前端 JS 代码 MVC 框架，被著名的 37signals
  用来构建他们的移动客户端。它不可取代 Jquery，不可取代现有的Template 库。而是和这些结合起来构建复杂的 web 前端交互应用。如果项目涉及大量的
  javascript 代码，实现很多复杂的前端交互功能，首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback
  可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。Backbone 就提供了 javascript 代码的组织的功能。Backbone
  主要包括 models, collections, views 和 events, controller 。

客户端和模拟器

• BrowserShot,
  检查浏览器的兼容性，跨浏览器平器的测试
• Test everything…
  输入一个你想要测试的URL……
• Android
  browser 模拟器
• iPhone
  browser 模拟器
• Opera
  browser 模拟器
• ★ Firebug 与 Firefox
  集成，可以查看和调试你的Web页面。

CSS3 和 字库

• ★ CSS3 Maker
  CCS3的生成器
• 容易地创建 CSS3
  animations。 Sencha Animator 是一个桌面应用可以为WebKit浏览器和触摸式移动设备创建 CSS3
  animations 。
• CSSwarp –
  CSS 文本扭曲生成器
• Gradient
  Editor, 一个强大的Photoshop式的CSS 渐变编译器。来自 ColorZilla
• ★ Google Web
  Fonts 通过Google Web Fonts API 可以浏览所有的字体
• @font-face Kit Generator, 为Web转换字体
• Typetester,
  比较字体。
• Media Queries.
  一组 responsive web 设计。
• Pattern TAP,
  UI组件。

Website (FULL) 模板

• ★ HTML5
  Boilerplate 是一个HTML5 / CSS /
  js模板，是实现跨浏览器正常化、性能优化，稳定的可选功能如跨域Ajax和Flash的最佳实践。
  项目的开发商称之为技巧集合，目的是满足您开发一个跨浏览器，并且面向未来的网站的需求。 Sources.
• HTML5 starter pack
  是一个干净的和有组织的目录结构，其可适合很多项目，还有一些很常用的文件，以及简单的Photoshop设计模板。
• ★ Initializr
  是一个HTML5 模板生成器，其可以帮你在15秒内创建一个HTML5的项目。
• Animated Portfolio Gallery （教程）
• Slick MobileApp Website 如果通过 jQuery 和 CSS
  制作一个手机应用的网站。
• RSS Reader 如果通过 jQuery Mobile 创建一个RSS Reader
• ★ Single Page Applications 使用jQuery的朋友们
  (Backbone, Underscore, …)创建单一页面。
• Google TV
  Optimized Templates,
  传统电视已经开始和网路融合，但现阶段产业仍然正在摸索之中，为此将来的网页亦会有结构上的改变。Google TV Optimized
  Templates是一个用HTML/JavaScript制成的开源软体，一如其名是一个对Google
  TV作出了最佳化的的网页范本，其特色是以遥控器作为操作的前提，令使用者无需输入任何文字就可以进行控制。未来除了会有专用遥控器外，还会采用智能手机透过W-iFi控制Google
  TV的方法。Optimized
  Templates的界面中左方会展示分类，右方会显示该分类下的影片截图，影片播放、切换、全画面表示都可透过键盘上的方向键、Backspace或Enter等键完成，方便今后的网站开发人员借镜。HTML5
  版的模板使用了 Google TV UI
  library, jQuery  和 Closure 。

（全文完）

1. jQuery – Javascript Framework

jQuery 是最流行的 JavaScript 框架，它简化了HTML 文档遍历、事件处理、动画和Ajax交互。

2. Dojo Javascript Framework

Dojo强大的核心使Web开发更加敏捷，它拥有出色的UI工具库，号称 Unbeatable JavaScript Tools。

3. Sencha Ext JS4 Javascript Framework

官方介绍说是最先进的JavaScript框架，用于构建下一代跨平台的Web应用程序。

4. Prototype javascript Framwork

Prototype 是一个致力于简化动态Web应用程序的开发，有独特的、易用的工具库和最好的Ajax库。

5. Uize Javascript Framework

UIZE 是一个强大、开源、面向对象的JavaScript框架，拥有众多效果炫目的Web部件。

6. Qooxdoo Javascript Framework

qooxdoo 是一个用于创建富Web应用程序的功能全面的、创新的JavaScript框架。

7. Zepo Javascript Framework

Zepto 是一个轻巧的JavaScript框架，用于Webkit核心浏览器开发，兼容jQuery语法。

8. DHTMLX Touch Javascript Framework

DHTMLX Touch 是一个基于HTML5，用于构建支持移动触屏设备的应用程序的JavaScript框架。

9. YUI library Javascript Framework

YUI Library 是Yahoo公司推出的开源的JavaScript框架，用于快速开发交互性高，更加稳健的Web应用。

10. Archetype Javascript Framework

Archetype takes care of loading everything needed by your application, using a transitive dependency loading system, and starts it when everything needed is available. No more error due to code unavailable at the good time, Archetype loads files dependency by dependency, in an efficient way. A file can have several kind of dependencies ( css, templates, javascript ), and you can at any moment alias any dependency to another URL without any needs for a code refactoring, just with one line of configuration : this is perfect for production purpose (static domains, etc.).

11. Rico Javascript Framework

Rico 是一款优秀的用于富Web应用程序开发的JavaScript框架。

12. Script.aculo Javascript Framework

script.aculo.us 是一个优秀的跨浏览器JavaScript用户界面库，提供包括动画，拖放，Ajax，单元测试等API。

13. Javascript MVC Framework

（编译来源：梦想天空 原文来自：16 popular javascript frameworks）

1. jQuery Countdown with Background and Overlay

2. jQuery Countdown

3. littlewebthings CountDown

4. jQuery Countdown plugin that doesn’t sucks!

5. Countdown timer jQuery Plugin

6. jQuery CountDown Plugin

7. How can I make a jQuery countdown

8. The Countdown jQuery plugin

9. jQuery Countdown Clock (wordpress plugin)