可以参见：http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/

有詳細的说明，并有Demo可以在线预览，同时还提供了下载。
在使用的过程中，我遇到一些问题，花了好长时间才解决，在此记下来。

1. js版本问题
下载Demo后，发现它用到的jQuery版本是jquery-1.2.6.min.js。但我们项目中用到的jQuery大都使用了更高的版本，比如1.3.2或是，1.4.2。
如果替换掉Demo中的jQuery，会发现拖动和排序效果失效，但其它效果(编辑，删除)还起作用。上网查了一番，终于找到一解决办法: 在 inettuts.js 中找到 var notSortable = ”; 改成 var notSortable = null; 就可以了。

2. 和jScrollPane的css冲突问题
jScrollPane 是基于jQuery的滚动条效果，可以通过svn更新到本地，(svn 地址： http://jscrollpane.googlecode.com/svn/trunk/ ) 里面包含有Demo可供做测试。

情景再现：我有左右两个列表，左侧使用了jScrollPane。当把左侧的项目拖动到右侧时，要拖动的项总是被遮住；而从右侧拖回左侧则正常。我起初以为是z-index的设置有问题，修改z-index后，问题依然存在。然后，我用jQueryUI中的一些函数设置z-index也没起作用。但是去掉左侧列表的jScrollPane效果后，一切正常。

后来发现是css的原因，我们只需要修改 jScrollPane.css 中 .jScrollPaneContainer， 把其中的 overflow: hidden; 改成 overflow: visible; 如果其它页面中也用到了同样的css，为不影响其它页面，可以仅在当前页修改css.

3. thickbox和这两个js都冲突

情景再现：我在A页面中用js做了拖动，排序及滚动条效果，也就是用到了上面提到的两个js。在B页面使用thickbox弹出A页面。
问题：拖动效果失效，滚动条效果在不同浏览器下表现不一致。

解决办法：彻底放弃thickbox,改用fancybox。

关于 fancybox
官方网站：http://fancybox.net/
下载地址：http://fancybox.googlecode.com/files/jquery.fancybox-1.3.1.zip
使用方法：http://fancybox.net/howto

下载地址：http://sourceforge.net/project/showfiles.php?group_id=26031&package_id=252700

下面我们用一个实例来介绍它的用法。

测试环境：
Ubuntu 9.10
Postfix 2.6.5
PHP 5.2.10

<?php
require_once("class.phpmailer.php");

$mail = new PHPMailer();

// 默认编码为 iso-8859-1，当邮件中包含中文字符时，会出现乱码，所以我们改成UTF8
$mail->CharSet = 'UTF8'; 

// 设置PHPMailer是否使用 SMTP，如果设置了该项，其他相关项也需要设置
$mail->IsSMTP();

// SMTP服务器地址，也可以使用第三方提供的免费SMTP服务器，如新浪免费邮箱发信(smtp)服务器的地址为：smtp.sina.com
$mail->Host = 'localhost';

// 设置是否启用SMTP认证，当为true时有时会出错，所以这里我们设置为false
$mail->SMTPAuth = false;

// SMTP用户名，如果使用linux下的sendmail或postfix等邮件服务器, 此处留空；如果使用第三方的SMTP服务器，要填写相应用户名，也就是你的邮箱地址
$mail->Username = '';

// SMTP密码，基本同上
$mail->Password = ''; 

// 设置邮件正文的格式，默认为Html格式，当为false时，使用文本格式
$mail->IsHTML(true);

// 邮件正文
$mail->Body = 'The Mail Contents';

// 当用户查看邮件的设备不支持HTML时，可以在这里输入纯文本的内容
$mail->AltBody = "This is the body in plain text for non-HTML mail clients"; 

// 发件人地址
$mail->From = 'example@example.com'; 

// 发件人姓名
$mail->FromName = 'Ben';

// 也可以这样设置发件人的址址及姓名

$mail->SetFrom('example@example.com', 'Ben');

// 添加回复地址，姓名
$mail->AddReplyTo("example@example.com","Reply Name");

// 添加抄送地址，貌似只能在win32平台使用，未做测试
$mail->AddCC($address, $name = "");

// 添加密送地址，貌似只能在win32平台使用，未做测试
$msil->AddBCC($address, $name = "");

$mail->Subject = 'Test'; // 邮件主题

// AddAddress($address, $name = ""), 添加一个收件人地址，收件人姓名默认为空
$mail->AddAddress('example@example.com');

// 添加一个附件
$mail->AddAttachment("doc/learningjquery.pdf");

// 清除所有收件人地址,当给多人发送邮件时，此方法尤其有用
$mail->ClearAddresses();

// Send()方法：创建信息和发送邮件,如果发送失败返回false,使用下面的ErrorInfo属性可以显示错误描述,发送成功返回true
if(!$mail->Send())
{
	echo "Mailer Error: " . $mail->ErrorInfo;
	exit;
}

echo 'Send Successful.';
?>

PHPMailer的方法请参见： http://phpmailer.worxware.com/index.php?pg=methods
PHPMailer的属性请参见： http://phpmailer.worxware.com/index.php?pg=properties

樱花

樱花近景

地图

鸟窝

手印

垂柳

一树的樱花

Learn how to create a menu that appears like a standard menu bar in it’s default state, but which on rollover pulls down an information area that covers both the original menubar item and has an expanded section containing the text we want to display.

2. Move Elements with Style

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.

3. Automatic Image Slider w/ CSS & jQuery

A simple image slider using HTML/CSS/Javascript. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.

4. jQuery Quicksand Plugin

With Quicksand you can reorder and filter items with a nice shuffling animation. At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. You can do it in a couple of ways:

• 1. Use plain HTML, like an unordered list.
• 2. Download data by an Ajax call
• 3. Transform HTML items by JavaScript (for example, sort them differently)

5. jQuery Magic Line Sliding Style Navigation

The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities. As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

6. Text with Moving Backgrounds

The idea is to create a container which has a moving background, but only a set of letters will be visible of the background. It will be as if there are holes in your container.

Normally you would create a PNG file containing anti-aliased letters and place it inside some container on top of a background. Here what you need to do is place a full image over a background, covering parts that shouldn’t be seen. Just like a mask!

7. jDiv: A jQuery navigation menu alternative

A drop-down menu that displayed any content you need. Specifically a combination of images and lists, without being limited to only an unordered list. The advantages:

• More flexibility in design that your usual UL style;
• The use of the H4 tag and a UL for the hidden content adds some potential SEO but be sure that your header tag choice is in keeping with your copy’s layout;
• As long as your first-level nav item is linked to a page, you still retain accessibility with JS disabled.

8. Halftone Navigation Menu With jQuery & CSS3

A CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

9. Animate Panning Slideshow with jQuery

Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well. In this tutorial we’ll have a slideshow that transitions by changing the visible window.

10. SlideDeck

SlideDeck is a new way to display content on websites, mobile phones and kiosks. It delivers a better user experience by removing the information overload and providing a fun, quick and beautiful way to interact with digital devices.

下载链接

* jQuery Minified (23kb Gzipped)

* jQuery Regular (154kb)

当然，我们也可以直接使用来自Google服务器上托管的版本：http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js ，这使得您可以快速的加载jQuery文件。

关于此次版本更新的详细信息可参见jQuery官方文档。

拉洋片

在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，2009年，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。

AnythingSlider

由 CSS-Tricks 的 Chris Coyier 设计，功能齐全，应用十分广泛。

Easy Slider

这个 Content Slider 插件既包含传统“前后”导航模式，又包含页码式导航。

Coda-Slider 2.0

Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。

图片库

那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过，借助 jQuery，这种效果已经可以在本地实现，以下是本年度备受欢迎的几个 jQuery 图片库插件。

Galleria

这是一个基于 jQuery 的图片库，可以逐个加载图片并显示缩略图。

jQuery Panel Gallery

一个可以高度定义的图片库插件，无需对单个图片进行任何处理，这个插件会帮你完成一切。

slideViewer

slideViewer 会检查你的图片列表中的编号，动态创建各个图片的页码浏览导航。

Supersized

一个令人惊讶的图片循环展示插件，包含各种变换效果和预加载选项，会对图片自动改变尺寸以适应浏览器窗口。

导航

我们相信，作为网站的导航系统，应该越简单，越易用越好，然而，假如你确实希望实现一些更炫的效果，jQuery 就是最好的选项，以下插件是09年最好的 jQuery  导航插件。

jquery mb.menu

Horizontal Scroll Menu with jQuery

AutoSprites

表单和表格

在 Web 设计中，表单和表格都是不是很讨人喜欢的东西，但你不得不面对，本年度出现几个不错的 jQuery  插件帮你完成这些任务。

Password Strength

这个插件帮你评估用户输入的密码是否足够强壮。

Ajax Fancy Capcha

顾名思义，一个支持 Ajax 又很炫的 jQuery Captcha 插件，它使用了很人性化的验证机制。

Chromatable

这个插件可以帮助你在表格上实现滚动条。

jqTransform

一个式样插件，帮助你对表单中的控件进行式样控制。

Uploadify

实现多个文件同时上传。

jExpand

一个很轻量的 jQuery 插件，使你的表格可以扩展，在一些商业应用中，可以让表格更容易组织其中的内容。

本文来源：http://webdesignledger.com/resources/the-best-jquery-plugins-of-2009

Draw2D Javascript Drawing Library

Draw2D is the graph component of the Open-jACOB web based workflow editor. The purpose of this experiment is to see if a Visio-type workflow editor tool could be developed in a web browser. It demonstrates that it can be done.

JavaScript Vector-Draw Library

How many times you wished if you could only draw an arrow on your web page? Or few lines here and there? Unfortunately, HTML offers nothing in this department, and using images takes bandwidth and slows down the loading of your pages

jsDraw2D : 2D Graphics Library for JavaScript

This is a pure JavaScript library to draw 2D graphics on web pages inside web browser without using SVG or VML. JavaScript developers, web developers and webmasters can take advantage of the library to add graphics drawing functionality to their web applications or websites using the library. The library is entirely written in JavaScript and does not need any plug-in or additional software to run/execute. The JavaScript source code of the library is open and free under a LGPL License.

CanvasGraph.js : Graphing in Javascript

Canvas Graph is a small simple javascript library that allows you to conveniently plot simple line, bar and pie charts using the new HTML Canvas Tag.

PlotKit – Javascript Chart Plotting

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.

Raphael: javascript drawing library

Raphael is a very slick looking JavaScript library for drawing and animating vector graphics with JavaScript. The API is simple and well thought-out and it supports all major browsers, including Internet Explorer 6.

Drawing lines in Mozilla based browsers and the Internet Explorer

In this article, I want to explain and deduce the line drawing algorithm by Bresenham. Afterwards, I will show an optimized version which can be used to draw lines in Gecko based browsers like Mozilla or Firefox and Microsoft Internet Explorer. As you know, HTML itself is not able to describe lines. Therefore, there is no built-in features in the above-mentioned browsers for drawing lines. By implementing the Bresenham algorithm with JavaScript while applying some tricks, we will be able to draw

Flotr Javascript Plotting Library

Flotr is a javascript plotting library based on the Prototype Javascript Framework version 1.6.0.2 at the moment and inspired by Flot written by Ole Laursen.

DHTML, JavaScript Vector Graphics Library

This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses ovals, oblique lines, polylines and polygons for instance triangles, rectangles dynamically into a webpage. Usage of this Vector Graphics library should be easy even if you do not have JavaScript experience.

canviz JavaScript library

Canviz is a JavaScript library for drawing Graphviz graphs to a web browser canvas. More technically, Canviz is a JavaScript xdot renderer. It works in most modern browsers.

点此查看更多详细说明。

jQuery Tools 使用也很简便，只需几行调用代码即可，其官方站点包含大量演示和调用代码可以参考。以下是该 UI 库中包含的主要 UI 工具介绍。

jQuery Tools / Overlay

Overlay （浮动层）可以用来浮动在任何 HTML 对象的上方，在现代 Web 设计中，浮动层是一种非常有效的 UI 概念，可以用来

1. 着重显示你的产品。
2. 显示警示信息。
3. 提示用户输入。
4. 以灯箱风格浏览图片库。

jQuery Tools / Overlay 可以很轻松地处理上述各种情形和各种效果。 jQuery Tools / Tooltip

工具提示是 Web 上最实用的工具，Web 默认的提示工具太简陋，jQuery Tools / Tooltip 会以一种非常漂亮的视觉效果显示提示内容。

jQuery Tools / Tabs

Web 上最受欢迎的 UI 部件当属 Tab 容器，如果没有 Tab，我们的很多网页不知要多么混乱，所有用户都熟悉 Tab 这种用户友好的部件，jQuery Tools / Tab 非常好用，甚至可以使用浏览器的前进后退导航按钮在 Tab 间前进或后退。

jQuery Tools / Scrollable

jQuery Tools / Scrollable 可以在网页中实行定制的，局部的滚动，在现代 Web 设计中，这几乎是最受欢迎的一种技术，可以用在下面这些场合：

• 产品目录
• 滚动新闻
• 在表单中实现定制选择框
• 浏览图片库
• 视频播放列表
• 各种站点导航

jQuery Tools / Flashembed

如今 JavaScript 真是越来越快了，所有浏览器都在 JavaScript 引擎上较量，我们会看到越来越多的基于 JavaScript 的 Web 部件面世，然而至少在当下， Flash 仍有其用武之地，比如播放视频。

jQuery Tools / Flashembed 可以用来在网页中加载 Flash 对象，虽然类似的工具比比皆是，但 Flashembed 绝对是其中最好用的一个。

本文来源：http://www.noupe.com/jquery/jquery-tools.html

1. Fixing PNGs in IE6 with DD_BelatedPNG

• Created by: Drew Diller
• License: MIT
• Usage: Fixes alpha-transparent PNGs in IE6
• Size: 6.86kb (compressed)
• Compatibility: IE6 only
• View Demo
• Download

DD_belatedPNG was created for the single purpose of allowing alpha-transparent PNGs to be used in IE6 without resorting to Microsoft’s proprietary AlphaImageLoader filter. As anyone who’s tried to use PNGs in IE6 before knows, although they can be made to work to a very basic degree, things like repeated background-images are out of the question.

Using the AlphaImageLoader filter only fixes half of the PNG problem in IE6 as it can only be used with background images. To make use of alpha-transparent PNGs on <img> elements, another fix is used, which is typically the HTC fix which relies on a transparent PNG and an HTC behavior file. Additionally, as Firebug and YSlow users will be aware of, Microsoft’s AlphaImageLoader is slow; one of YSlow’s guidelines is to avoid the filter at all costs.

DD_belatedPNG uses Microsoft’s implementation of VML to replace PNGs with VML elements, which do support alpha-transparency. It can be used with both full <img> elements and CSS background-images. When background-images are replaced, common features such as background-repeat and :hover states can also be used so this library solves all of the common PNG problems in IE6.

Usage

Using DD_BelatedPNG is exceptionally easy; it only needs to be used with IE6, so the main script can be included in the page using a conditional comment:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<![endif]-->

The library has a single method, fix, which is used to supply simple CSS selectors that are targeted by the library, any <img> element that has a PNG src attribute, or any element using a PNG CSS background with the matching class name will be fixed. This part of the script can go into the conditional comment as well so that only IE6 will need to process these additional rules:

<script type="text/javascript">
  DD_belatedPNG.fix(".linkButton");
</script>

Fixed PNGs in IE6 will now appear as they should and can be background-positioned and repeated, and also work with :hover states, unlike Microsoft’s proprietary filter. The following image shows a before and after picture of an alpha-transparent background image:

2. Use any Font with Cufon

• Created by: Simo Kinnunen
• License: MIT
• Usage: Allows embedding of non-standard fonts without needing flash
• Size: 17.8kb (compressed)
• Compatibility: All (all common versions from all common vendors, including IE6)
• View Demo
• Download

Typography is one area of web development that has seen painfully little advancement when compared with other areas of the industry. Web developers have been forced to rely on a small set of ‘web safe’ fonts that are likely to be installed on the majority of their visitor’s computers. Image and flash-based solutions have arisen, both of which have downsides to using.

Cufon offers developers a robust and fast solution, which can be displayed in the browser without requiring third-party plugins using features built in to browsers. Cufon fonts can be used as VML for native IE implementation, or the <canvas> element for other more capable browsers. Awesomely, we can also set different styles of the replaced text, such as its color and size using pure CSS.

Usage

This library differs from the others in that a little bit of preparation is required before use; a new font file needs to be generated which can be done easily using the cufon website. The will generate an SVG font and save it in a JS file. This file needs to then be linked to any other <script> resource after the cufon core file:

<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="Breip_500.font.js"></script>

Then it’s just a case of telling Cufon which elements to replace:

<script type="text/javascript">
  Cufon.replace('h1.replacedFont');
</script>

The API offers other solutions for using multiple fonts on the same page and for improving performance in IE. Although I’ve called this section, “Using any Font”… you should remember that only fonts that are licensed to be embedded should be used. The following screenshot shows a replaced heading:

3. Use Firebug in any Browser

• Created by: Mike Ratcliffe
• License: BSD-style
• Usage: All the power of Firebug in browsers other than Firefox
• Size: 76.9kb (compressed)
• Compatibility: All non-Firefox browsers
• View Demo
• Download

Firebug is without doubt one of the greatest assets to web development available; I certainly use it on a daily basis when developing for the web, and I know it’s the plugin of choice for many others too. An unfortunate side-effect of Firebug’s excellence is that other similar tools for other browsers pale in comparison and appear inferior. Trouble-shooting layout issues and CSS bugs in IE for example can be a lesson in futility.

This is where Firebug Lite steps in; this is a simple JavaScript library that recreates most of the key features of the Firebug interface, bringing our debugger of choice to all other platforms. Fixing layouts and troubleshooting cross-browser issues becomes easy once more.

One of the greatest things about Firebug Lite is that you don’t need to download it or install anything in order to start using it; when you want to debug a page you’re working on in browsers that aren’t Firefox you can just include a script file whose SRC points to the online version:

<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>

That’s it, when you run the page in any other browser, Firebug Lite will be present on the page. For off line use, the script file, as well as a CSS file, can be downloaded and should just be used like any other JS or CSS file. The following screenshot shows Firebug Lite in Safari:

4. Render Interactive 3d Shapes with Raphael JS

• Created by: Dmitry Baranovskiy
• License: MIT
• Usage: Draw SVG shapes on the page
• Size: 58.4kb (compressed)
• Compatibility: All (all common versions from all common vendors, including IE6)
• View Demo
• Download

Ok, so this library isn’t quite so small, but there’s a reason for that; the library does a huge range of things and adds complete SVG control to a web page. Frankly, its power is awesome. Imagine being able to draw smooth curves across a web page and create custom shapes on the fly – Raphael does that.

You can do rounded corners that are completely cross-browser with no images (other than those actually drawn by the library), you can create faded reflections for any images, rotate the images dynamically and much more. As all paths are drawn using SVG elements, you can attach JavaScript events to them so that people can interact with the images on mouseover or click (or any other JS events). The possibilities are endless and the API provides a wide range of different methods that make working with the library a pleasure.

Usage

The library must of course be linked to:

<script type="text/javascript" src="raphael.js"/>

This is it, there are no other dependencies. Now we can begin creating our SVG shape:

<script type="text/javascript">
  var canvas = Raphael(50, 50, 620, 100);
  var shape = canvas.rect(0, 0, 500, 100, 10);
  shape.attr("fill", "#fff");
  canvas.text(250, 50, "Using Raphael to create custom shapes\ndrawn on the fly is extremely easy").attr("font", "20px 'Arial'");
 </script>

The library is made to be easy to use and we’ve only used a tiny fraction of its capabilities in this example. The page that this is used on should appear like this:

5. Progressively Enhance Your Site into the Future with Modernizr

• Created by: Faruk Ateş and Paul Irish.
• License: MIT
• Usage: Detect HTML5 and CSS3 support
• Size: 7kb (compressed)
• Compatibility: All
• View Demo
• Download

It’s an exciting time for web development with CSS3 and HTML5 advancing by the day, but it’s also a frustrating time because we’ve got all these advanced new technologies coming out with very little support. We want to start using all the great new HTML5 and CSS3 features, but most of the new HTML5 elements for example are only supported in maybe a single browser.

Modernizr is a tiny little library which simply tests whether the current environment supports a series of advanced features, such as the new <audio> and <video> elements. A JavaScript object is then created by the library which contains Booleans indicating whether each feature is supported. So if the current browser does support the new element, Modernizr.audio will return true. It’s that simple.

The library also adds class names to the <html> element that we can target with CSS in order to hide certain elements to the page, so when the <audio> element is supported, <html> element will receive the class name .audio. When browsers that don’t support it view the page, the element will get the class .no-audio.

This is incredible because it means that we can safely add these new features to our pages for the browsers that do support them, without causing chaos in the browsers that don’t. In the nature of progressive enhancement, we can create an accessible and broadly support core of content, and then progressively add more and more features for browsers that support them.

Usage

Let’s see it in action to display some nice CSS3 effects; first we just link to the very tiny library using the standard <script> element:

<script type="text/javascript" src="modernizr-1.0.min.js"></script>

Then we can add the following CSS:

.no-audio #audioContainer { display:none; }

This will ensure that browsers which do not support the <audio> element do not see it. The element does provide a built-in fallback for browsers that don’t support it, but this way is better. The body of the page could then look something like this:

<div id="audioContainer">
      <audio id="audio" src="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg" controls"true"></audio>
 </div>
<a id="linkToAudio" href="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg">Link to the audio</a>

Once this is done we can detect whether the browser supports HTML5 audio and show or hide the link to the media (we could easily do this using just the CSS, but this way we get to see the Modernizr object in action):

if (Modernizr.audio) {
  var audioLink = document.getElementById("linkToAudio");
  audioLink.style.display = "none";
}

This is all we need; capable browsers will see the <audio> element but not the link, while less capable browsers will see the link and not the <audio>:

Conclusion

Each of these libraries caters to a very specific problem; they’re generally much smaller than more well known and general purpose libraries, but just as useful for their specialized purpose. Each of them can aid us in one way or another when developing web sites from either easing development in IE6, using non-standard fonts without cumbersome replacement techniques, to detecting support for the latest CSS3 and HTML5 technologies or generating complex and interactive images.