1、判断select选项中 是否存在Value=”paraValue”的Item
2、向select选项中 加入一个Item
3、从select选项中 删除一个Item
4、删除select中选中的项
5、修改select选项中 value=”paraValue”的text为”paraText”
6、设置select中text=”paraText”的第一个Item为选中
7、设置select中value=”paraValue”的Item为选中
8、得到select的当前选中项的value
9、得到select的当前选中项的text
10、得到select的当前选中项的Index
11、清空select的项

//js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
    var isExit = false;
    for (var i = 0; i < objSelect.options.length; i++) {
        if (objSelect.options[i].value == objItemValue) {
            isExit = true;
            break;
        }
    }
    return isExit;
}         

// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
    //判断是否存在
    if (jsSelectIsExitItem(objSelect, objItemValue)) {
        alert("该Item的Value值已经存在");
    } else {
        var varItem = new Option(objItemText, objItemValue);
        objSelect.options.add(varItem);
        alert("成功加入");
    }
}        

// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
    //判断是否存在
    if (jsSelectIsExitItem(objSelect, objItemValue)) {
        for (var i = 0; i < objSelect.options.length; i++) {
            if (objSelect.options[i].value == objItemValue) {
                objSelect.options.remove(i);
                break;
            }
        }
        alert("成功删除");
    } else {
        alert("该select中 不存在该项");
    }
}    

// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
    var length = objSelect.options.length - 1;
    for(var i = length; i >= 0; i--){
        if(objSelect[i].selected == true){
            objSelect.options[i] = null;
        }
    }
}      

// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
    //判断是否存在
    if (jsSelectIsExitItem(objSelect, objItemValue)) {
        for (var i = 0; i < objSelect.options.length; i++) {
            if (objSelect.options[i].value == objItemValue) {
                objSelect.options[i].text = objItemText;
                break;
            }
        }
        alert("成功修改");
    } else {
        alert("该select中 不存在该项");
    }
}        

// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
    //判断是否存在
    var isExit = false;
    for (var i = 0; i < objSelect.options.length; i++) {
        if (objSelect.options[i].text == objItemText) {
            objSelect.options[i].selected = true;
            isExit = true;
            break;
        }
    }
    //Show出结果
    if (isExit) {
        alert("成功选中");
    } else {
        alert("该select中 不存在该项");
    }
}        

// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue;    

// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;    

// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;    

// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;    

// 11.清空select的项
document.all.objSelect.options.length = 0;

Related Posts / 相关文章

• MySQL: group by … having …
• [英,转]45个新鲜有用的JS与jQuery技术和工具
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript
• JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度
• Javascript 实现图像倒影、发光效果

本文将介绍20个最新的jQuery效果，还有值得一提的是8月份jQuery 发布移动设备版本 jQuery Mobile。

1. Custom Animation Banner with jQuery

通过使用 jQuery Easing和jQuery 2D Transform插件，创建自定义animation banner。

View Demo（查看示例）

2. 快速反馈表 – jQuery & PHP

Martin Angelov 将教你如何快速的创建用于接收来自用户反馈的解决方案，使用到了jQuery, PHP 和 PHPMailer类。

View Demo（查看示例）

3. Wijmo – jQuery UI 组件

Wijmo是一个jQuery UI组件集，有超过30多个jQuery UI 组件；这将是一个CSS3，SVG，HTML5的混合物，目前还处于Beta阶段。

View Demo（查看示例）

4. 页面导航 – jQuery插件

这是一个页面上的导航插件，基于jQuery ScrollTo 插件，你可以在 Github上查看更多介绍。

View Demo（查看示例）

5. RSS Reader With jQuery Mobile

Jeffrey Way 创建了一个简单的RSS reader，主要用于iphone和Andriod手机，通过PHP和jQuery mobile 实现。

View Demo（查看示例）

6. Easy Accordion – jQuery插件

The Easy Accordion插件可以生成一个类似手风琴样子的自定义列表。

View Demo（查看示例）

7. Lettering – jQuery Typography Plugin

Lettering是一个轻量级易于使用的网页排版插件，例如印刷CSS3的海报，自定义类型的标题等。

View Demo（查看示例）

8. Annotation Overlay Effect with jQuery

创建一个简单的叠加效应

View Demo（查看示例）

9. Snippet – jQuery Syntax Highlighter

Snippet是一个很酷的jQuery语法高亮插件，基于SHJS脚本，你可以在SourceForge上找到源码。

View Demo（查看示例）

10. Google Powered Site Search With jQuery

教你如何创建一个自定义的搜索引擎，只需要使用Google AJAX Search API，你可以搜索到您网站上的图片，视频和新闻等……

View Demo（查看示例）

11. 简单的工具提示 – jQuery & CSS

Soh Tanaka 创建一个简单的jQuery和CSS样式提示

View Demo（查看示例）

12. Compact News Previewer with jQuery

创建一个文章/新闻预览，以经凑的方式显示您最想的文章或新闻。预览工具将会显示一些关于文章更长的描述。

View Demo（查看示例）

13. Exposure jQuery插件

Exposure是一个图片预览插件，用于创建丰富，自定义的视觉体验。

View Demo（查看示例）

14. Giveaway Randomizer App – jQuery

它会教你如何去创建一个jQuery专用的随机数发生器。

View Demo（查看示例）

15. jQuery Smooth Tabs Plugin

jQuery Smooth Tabs是一个简单易于使用的插件，可以让你选择一些漂亮的效果来显示你的文字内容，带来更好的用户体验。

View Demo（查看示例）

16. TN34 Timetabs – jQuery Plugin

Mario Alves创建的一个tab容器的jQuery插件，可以选定不一样的样式来显示下一个tab。下载插件：HERE.

View Demo（查看示例）

17. Full Page Image Gallery with jQuery

创建一个效果惊人的滚动缩略图和滚动全屏预览的画廊。

View Demo（查看示例）

18. bgStretcher – jQuery Plugin

Background Stretcher可以让你在背景中添加一个或多个大尺寸的图片，并调整他们的大小来填满整个页面，多张图片时会以幻灯片的形式出现。

View Demo（查看示例）

19. SlideNote – jQuery插件（滑动通知）

SlideNote 是一个自定义，扩展性很强的jQuery插件，可以轻松的在网页或你的web应用上创建滑动通知。

View Demo（查看示例）

20. Easy List Splitter – jQuery插件

Easy List Splitter插件将获取到的list和wrap装入一个container div，生成相应的列表项，并且生成一个有效的HTML代码。

View Demo（查看示例）

Related Posts / 相关文章

• [英,转]45个新鲜有用的JS与jQuery技术和工具
• 10个jQuery Lightbox效果插件
• LazyLoad – jQuery延迟载入插件
• 20多个漂亮的使用jQuery交互的网站设计欣赏
• 2009 年度最佳 jQuery 插件

方案一：@font-face (CSS3样式)

CSS3的@font-face属性（事实上CSS2中就已引入），为我们带来了一些希望，而Firefox 3.5新增的对@font-face的支持，让我们离这个希望更进了一些。

到现在为止，已经有Safari、Chrome、Opera 10和Firefox 3.5支持@font-face了，比较意外的是，IE系列浏览器也部分支持该属性。Mozilla旗下的其它产品，SeaMonkey 2 和Thunderbird 3 也支持该属性。

从表中可以看出，IE系浏览器不支持TTF格式的字体，只支持eof格式，不过，微软官方发布了一个WEFT工具，可以将TTF转化为EOF，需要的朋友可以去下载使用。

可以使用的样式如下：

@font-face　{
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
  font-style:　normal;
}
.fontFace{
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-size:　3.2em;
  letter-spacing:　1px;
  text-align:　center;
}

IE中的样式如下：

@font-face　{
　　font-family:　Goudy　Stout;
　　font-style:　normal;
　　font-weight:　400;
　　src:　url(GOUDYST0.eot);
}

相关链接：

• https://developer.mozilla.org/index.php?title=En/CSS/%40font-face
• Web fonts with @font-face :http://www.css3.info/preview/web-fonts-with-font-face/

方案二：sIFR (Scalable Inman Flash Replacement)

sIFR并非一种新技术，而是已经存在并被使用很多年了。sIFR是一种很有用也很好用的文本替换技术，通过Flash+JS+CSS将网络字体嵌入到页面中。

• sIFR 是一种用Flash替换页面中文本元素的技术。
• sIFR利用了Flash的dynamic text和character embedded这个功能实现。

关于sIFR的一些事实：

• sIFR不需要更改(X)HTML代码，所有的工作由Javascript、Flash和CSS来完成；
• 如果用户没有安装Flash或者不支持Javascript，那么(X)HTML的文本就会被CSS样式化后显示出来。
• sIFR是可缩放的，可以在渲染时更改为用户设置的缺省字体尺寸。
• sIFR兼容所有的屏幕阅读机，至今还没有问题被报道出来。
• sIFR的文本可以被鼠标选择，尽管当全选文本时，选中的状态看上去不那么确切。
• sIFR不影响搜索引擎的定位和评定，不会隐藏真实的文本内容。

在链接上使用sIFR

最新版本的sIFR允许链接文本被替换。但可能造成以下的可访问性问题：

• 不支持浏览器的右键点击功能（上下文菜单）
• 不支持apple的option键
• 没有状态条信息

使用步骤：

1. 包含所需的js和css:

   <link rel="stylesheet" href="all.css" type="text/css" media="all" /> <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" /> <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" /> <script src="sifr.js" type="text/javascript"></script> <script src="sifr-addons.js" type="text/javascript"></script>

2. 执行代码:

   <script type="text/javascript"> //<![CDATA[ if(typeof sIFR == "function"){ // 建议用这种格式 sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"})); // 这种格式也可以，但参数的顺序就必须按照指定的顺序写，没有的参数用null表示。 sIFR.replaceElement("h5#pullquote", "vandenkeere.swf", "#000000", "#000000", "#FFFFFF", "#FFFFFF", 0, 0, 0, 0); sIFR.replaceElement("h3", "tradegothic.swf", "#000000", null, null, null, 0, 0, 0, 0, null); }; //]]> </script>

sIFR.replaceElement函数的参数

• sSelector
  CSS selector ，使用这个选择器选择需要替换的文本元素。支持的选择器包括 ID选择器（#）,子代选择器（>）和类选择器（.）。 多个选择器可以用逗号隔开。如：“body h1″，“h5#pullquote”，“h3.sidebox”，“h3″等等。
• sFlashSrc
  嵌入字符的swf文件的位置。
• sColor
  文本颜色。如 (#000000).
• sLinkColor
  链接的文本颜色
• sHoverColor
  hovered links的颜色.
• sBgColor
  背景色。
• nPaddingTop
  上部填充。单位pixels, 但不要写 px部分。
• nPaddingRight
  右填充
• nPaddingBottom
  底部填充
• nPaddingLeft
  左填充
• sFlashVars
  传递给Flash的参数。参数间用&分隔。如下可以使用下面这些参数： textalign=center: 水平居中 offsetLeft=5: 距离左边5px offsetTop=5: 距离上边5px underline=true: 对hover的链接添加下划线
• sCase
  等于upper可以变成大写；等于lower 转换成小写。
• sWmode
  将该参数设置成 transparent ，可以使背景透明。如果希望元素叠放在Flash上，则应设置成opaque

总结

• sIFR并不会和图片替换技术相竞争；它是针对不同工作的独特的工具。它能被最好的使用在那些显示为浏览器缺省字体大小的，而又不能替换为自建图片的文本上。
• sIFR理想的使用场合是，当你想要仅用一张图片就显示自定义的字体或者反锯齿的标题时。这在web上被非常频繁的使用，在这些案例中sIFR是一个更好的选择。它可以缩放为用户缺省的字体尺寸，可以被选择，可以使用在数以千计的页面上而只需要下载一两个文件。

摘要

• 在页面标题上使用sIFR。
• 有限度的使用sIFR，以获得最佳的下载时间。
• 不要在链接上使用sIFR。

相关链接：

• sIFR 3版本：http://wiki.novemberborn.net/sifr3/
• sIFR 3文档： http://wiki.novemberborn.net/sifr3/
• Mike Davidson – sIFR: http://www.mikeindustries.com/blog/sifr/
• sIFR – 百度百科: http://baike.baidu.com/view/1311052.htm
• sIFR-文本替换技术: http://guowushi54.blog.163.com/blog/static/203582220071123112455818/
• 如何以及何时使用sIFR: http://www.w3cn.org/article/translate/2005/117.html

方案三：Typeface.js

Typeface被认为是替代SIFR的最佳方案，相对于sIFR，Typeface少了Flash的应用，使用纯JS来嵌入相关字体，而且用法也很简单：在页面中引入相应的js文件就可以。

<html>
　<head>
<!--加载所有的样式先-->
　　<link　rel="stylesheet"　type="text/css"　ref="/style.css">
<!--再加载typeface.js　库文件和typeface.js字体文件-->
　　<script　type="text/javascript"　src="typeface-0.10.js"></script>
　　<script　type="text/javascript"　src="helvetiker_regular.typeface.js"></script>
　</head>
　<body>
<!--继续并使用CSS指定typeface.js字体-->
　　<div　class="myclass　typeface-js"　style="font-family:　Helvetiker">
　　　文本文本...
　　</div>
　</body>
</html>

相关链接：

• typeface: http://typeface.neocracy.org/

方案四：cufon

cufon是一个比较新的技术，被定位为有价值的sIFR替代方案，它有很多优势：

• 无需浏览器插件——被浏览器原生支持；
• 兼容性——兼容各个主流浏览器
• 易用—— 无需配置
• 速度—— 快速渲染大量字体

cufon和typeface.js对比

cufon资源：

• cufon项目: http://wiki.github.com/sorccu/cufon/about
• cufon演示(列表): http://wiki.github.com/sorccu/cufon/demos
• cufon生成器: http://cufon.shoqolate.com/generate/
• wp-cufon: 一个使用cufon的wordpress插件 http://wordpress.org/extend/plugins/wp-cufon/
• Typeface.js VS sIFR VS cufon: http://stackoverflow.com/questions/692990/sifr-vs-cufon-vs-typeface-js

相关链接：

• cufon 文档: http://wiki.github.com/sorccu/cufon/about

综述：

事实上，sIFR、typeface.js和cufon都是目前常说的文本替换技术，这些技术都可以用来替换@font-face，并且实现更好的浏览器兼容性。但是每种技术都不是完美的：

@font-face最简单，虽然大部分浏览器也都支持了，但是其浏览器兼容性并不是很完美，对IE还需要eof字体的特殊支持，而且对于中文字体来说，一般都很大，这会占用很大的页面加载时间和服务器流量。

sIFR是兼容性和可用性最好、对SEO友好的一种方案，但也是实现起来最复杂的，而且需要浏览器支持Flash插件。

typeface和cufon都是利用在IE中渲染VML，而在非IE浏览器中使用canvas的方式实现“伪”字体的，他们使用起来相对简单，但是可用性和用户体验以及SEO都不是很理想。

版权问题是一个很重要的问题，无论你使用哪种技术，都需要考虑文字的授权。

注：

• 部分资料收集于网络，纯属交流学习，有侵犯版权之处请联系我
• 欢迎贡献讨论关于 “文字替换技术” 的更多相关文章资料

Related Posts / 相关文章

• CSS3, Please! The Cross-Browser CSS3 Rule Generator
• 揭秘HTML5和CSS3
• 来用实用的CSS3来制作你的酷炫按钮吧
• 谈谈sIFR – 可伸缩Inman Flash替换
• CSS 3 – 前途一片光明

Sign in with Twitter is the pattern of authentication that allows users to connect their Twitter account with third-party services in as little is one click. It utilizes OAuth and although the flow is very similar, the authorization URL and workflow differs slightly as described below.

The normal flow dictates that applications send request tokens to oauth/authorize in Twitter’s implementation of the OAuth Specification. To take advantage of Sign in with Twitter, applications should send request tokens in the oauth_token parameter to oauth/authenticate instead.

The oauth/authenticate method will perform the following:

1. If the user is logged into Twitter.com and has already approved the calling application, the user will be immediately authenticated and returned to the callback URL.
2. If the user is not logged into Twitter.com and has already approved the calling application, the user will be prompted to login to Twitter.com then will be immediately authenticated and returned to the callback URL.
3. If the user is logged into Twitter.com and has not already approved the calling application, the OAuth authorization prompt will be presented. Authorizing users will then be redirected to the callback URL.
4. If the user is not logged into Twitter.com and has not already approved the calling application, the user will be prompted to login to Twitter.com then will be presented the authorization prompt before redirecting back to the callback URL.

This behavior is explained in the following flowchart:

Sign in with Twitter Buttons

Twitter would prefer your application to use the following buttons. While it is easy roll your own buttons or create text links, using these standard buttons will instill user confidence and standardize the experience.

Darker

Lighter

Peter Denton has also created a number of buttons to make this experience easy and beautiful.

Related Posts / 相关文章

• 从 Twitter 运维技术经验可以学到什么
• 注册漏嘴网

所谓离线，指的是用户能够在没有网络的环境下也可以进行工作，并且当网络环境恢复后，之前的操作能够自动地同步到服务器上。目前，离线应用可以分为两种，一种是桌面应用，其中以 IBM Lotus Notes 为代表。另外一种则是近来比较热门的 Web 离线应用，其中最具代表的为 Google 的离线应用，如 Google Docs, Gmail, Google Reader 等。而本文介绍的 Dojo 离线功能，则是目前最为流行的实现第二种离线应用的框架。

回页首

Dojo 离线原理

Dojo Offline 是一个免费的开放源代码的离线开发工具，它可以轻松地让 Web 开发人员开发离线应用。Dojo Offline 构建于 Google Gear 之上，它使得在 Google Gear 上开发离线应用变得更加简单。Dojo Offline 对 Google Gears 的 API 进行了封装，能够更方便地以 JavaScript 的方式访问数据；另外，Dojo Offline 还提供了如下功能：

1. Offline Widget：开发人员只要添加几行代码，就能够将这个离线的 widget 嵌入自己的应用中，之后，就能够自动获得网络反馈 , 同步消息以及离线操作配置说明等。
2. 同步框架：保存离线数据，并且在网络恢复后将这些操作和服务器进行同步。
3. 自动的网络和应用程序状态监控机制：离线应用可以基于这些监控结果来决定采取什么样的操作。
4. slurp() 方法：通过 slurp() 方法来自动扫描页面，找出需要缓存到本地的资源，包括图片，样式，脚本等。这使得 Web 开发人员能够集中精力地去开发业务逻辑和展示页面，而不需要考虑具体哪些资源需要缓存到本地。
5. 提供两种本地存储实现方法：Dojo Storage 和 Dojo SQL。Dojo Storage 使用哈希表来存储离线数据，为开发人员屏蔽了重量级的 Google Gears 的 SQL 使用方法，我们可以通过 Dojo Storage 将数据保存到 Google Gears 里去。Dojo SQL 通过执行 SQL 命令，对一般的 JavaScript 对象进行存取。
6. 加密和解密关键字 ENCRYPT() 和 DECRYPT()：提供对下载后的离线数据加密和解密方法。
7. Dojo 其他模块的集成：如果用户选择 Dojo Offline，毫无疑问，其应用可以受益于 Dojo 的其他功能，比如完善的事件处理机制，Ajax 框架等等。

回页首

Google Gears 简介

Google Gears 是 Google 开发的一个自由和开源软件，以 BSD 许可证发布。主要是为了能够让用户可以在离线时能够继续使用 Web 应用。这套软件透过 SQLite 数据库让本地端能够把资料暂存起来。所以网页是透过缓存取得的，而不是从实际的网络上取得。而且，Web 相关的程序可以周期性的透过 Gears 将本地缓存的资料与网络上的资料做同步。如果网络暂时无法使用，这个同步过程将会延后，直到网络恢复为止。Google Gears 通过以浏览器扩展的方式添加 JavaScript API，使得浏览器的脚本能够访问本地的缓存数据库。该扩展目前支持 Firefox，Internet Explorer 和 Safari，并需工作于 Windows、Mac OS X，或是 Linux 下。

Google Gears 有几个主要的组件：

1. 一个本地服务器，用来存储和读取离线程序资源（包括 HTML 文件 , JavaScript 文件 , 图片等）。
2. 一个小型数据库（基于 SQLite 轻量数据库），用来储存本地数据。
3. 一个工作池，用来让开发者将本地数据与服务器端后台同步。
4. 一个桌面模型，可使网络程序的操作贴近桌面程序。
5. 一个地理定位模型，能够让网络程序侦测到目前用户的地理位置。

回页首

开发 Dojo 离线应用程序

一般来说开发一个离线应用有以下几个步骤：

1. 应用加载时缓存所引用的资源。
2. 应用加载之后设置必要的离线事件处理函数。如：与服务器进行同步操作时的下载事件、下载完成事件，重放事件等。
3. 检查应用是否在线，读取应用所需的数据。如果离线则从本地读取数据；如果在线则与服务器数据进行同步：首先上传离线数据（如果有的话），然后从服务器上下载最新数据。
4. 初始化应用程序。

下面我们会先分别介绍如何保存离线资源，保存和使用应用离线数据以及如何与服务器的数据保持同步等相关技术，然后以一个具体的例子说明如何按上述步骤开发一个离线应用。

保存离线资源

为了使页面能够在离线情况下操作，在页面加载时必须要保存页面所引用的 HTML 文件，JavaScript 文件，CSS 文件，图片文件等资源，这样在与服务器断开连接时，页面便能够从本地缓存中提取到页面及相关的资源。Dojo 提供了一个功能非常强大的函数 slurp 来实现这一功能。slurp 函数在页面加载之后会自动分析页面所引用的资源，并得到一个资源文件的 url 列表，然后抓取 url 的内容，保存到 Google Gears 中。slurp 函数能够缓存大部分的资源文件，包括引用 CSS 文件里的图片，但是对于使用内联方式指定的 CSS 图片以及用 JavaScript 动态产生的引用 slurp 则无法进行缓存。这种情况可以通过调用 dojox.off.files.cache () 方法来手动添加要缓存的资源，具体用法详见后文。

Dojo Offline 还提供了在调试时查看已缓存资源文件的方法，首先以 debug 方式加载 Dojo，然后在页面和 Dojo Offline 加载完之后调用 dojox.off.files.printURLs() 函数。这个函数会在控制台以调试的方式打印出已缓存的资源文件的 url。

保存和使用离线数据

一般来说，离线应用不仅要缓存页面所引用的 HTML 文件，JavaScript，CSS，图片等资源，还要缓存页面所使用的数据。Dojo 对 Google Gears 的访问接口进行了封装，提供了 Dojo Storage 和 Dojo SQL 两种方式操作离线数据。通过这两种方式，用户可以方便、灵活地保存和读取离线数据。

• Dojo Storage

提供了一种类似哈希表的方式对数据进行操作，数据以键值对的方式存取。

保存：dojox.storage.put(key,value) — key 是字符串类型，value 可以是字符串和可序列化的 JavaScript 对象，但是浏览器对象（如 DOM 节点和 XMLHttpRequest 对象）是不能够保存的。

读取：var value = dojox.storage.get(key) —获取字符串 key 对应的值。
清单 1

var car = {type: "Nissan", color: "white", price: 20000, optional:
 "air-conditioner, stereo"};
dojox.storage.put("complexKey", car);

var value = dojox.storage.get("someKey");
var car = dojox.storage.get("complexKey");
if(car)
alert(car.type);

上述代码先将一个对象 car 放置在 Dojox.Storage 里，然后又从中取出并展示。

• Dojo SQL

通过 Dojo SQL 对 Google Gears 关系存储层的封装，能够以更适合 JavaScript 对象的访问方式对关系表进行操作。如下所示，我们对 Documents 表进行了创建，插入，查询操作：
清单 2

//create Documents table if not exist
dojox.sql("CREATE TABLE IF NOT EXISTS DOCUMENTS ("
+ "fileName		TEXT NOT NULL PRIMARY KEY UNIQUE,"
+ "content		TEXT NOT NULL) ");
//insert a record
dojox.sql("INSERT INTO DOCUMENTS (fileName, content) VALUES (?, ?)", fileName, contents);
//query
var results = dojox.sql("SELECT * FROM DOCUMENTS WHERE fileName = ?", someFileName);

Dojo 查询操作返回的是一个记录对象的数组，如访问第一条记录的 fileName 字段，可以使用 results[0].fileName，访问 content 字段则可以使用 results[0].content。

与服务器同步数据

离线操作所产生的新数据，在与服务器连接可用时需要上传到服务器；并且，在该用户离线期间，其他用户也可能已经更改过数据，因此重新连接服务器时需要下载最新的数据。Dojo 的同步操作发生的时机有两个，一是在页面首次加载并且在线的时候，或是离线后又检测到连接恢复的时候，具体包括 3 个步骤：

1. 下载并缓存最新的页面资源，包括由 slurp 函数以及用户手动缓存的资源。Dojo Offline Widget 会自动更新相应的状态，如下图所示：

   图 1. 下载状态
   

2. 上传用户在离线期间所创建的数据。

   图 2. 上传状态
   

3. 下载服务器最新数据进行展示。

   图 3. 同步成功
   

   如上所示，Dojo Offline 提供了一个 UI 控件来通知用户当前的状态，如下载，上传以及网络连接状态等。Dojo Offline Widget 处理了大部分的逻辑，开发人员可以直接在页面中使用该控件。使用 Offline Widget 很简单，只需在页面加入一个占位符即可。Offline Widget 也提供了扩展机制，以更改所使用的图片和样式来跟页面风格保持一致。

Dojo 离线应用示例

Dojo Offline 随附的开发包中提供了 3 个例子，下面以 hello world 为例说明如何构建一个简单的离线应用。hello world 程序模拟了用户与服务器简单的消息交互。用户界面包括一个输入框和一个发送按钮，在输入框里输入文本，点击发送按钮将消息发送到服务器。为了保持用例的简单，实际上消息并没有真正被发送到服务器，而只是简单地将其弹出。在应用离线时，点击发送按钮则会先在本地保存该消息，当应用重新连接时再重新执行该操作。

1. 首先加载 Dojo 及离线所使用的 JavaScript 文件。

   清单 3

   <script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true"></script> <script type="text/javascript" src="../../../../dojox/off/offline.js"> </script>

   当然，我们也可以用 dojo.require 方法进行加载：

   清单 4

   <script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true"></script> <script type="text/javascript" > dojo.require(“dojox.off.offline”); </script>

2. 设置应用程序的名字，这个名字会显示在 Dojo Offline Widget 上。

   清单 5

   dojox.off.ui.appName = "Hello World";

3. 缓存页面资源文件。要使离线功能正常工作，这个函数必须在 Dojo Offline 初始化之前调用，即 dojox.off.initialize 函数调用之前。

   清单 6

   dojox.off.files.slurp();

4. 初始化应用程序，设置离线操作的一些事件响应函数。

   清单 7

   initialize: function(){ console.debug("helloWorld.initialize"); var self = this; dojo.connect(dojox.off.sync, "onSync", this, function(type){ if(type == "download"){ self._messages.push("Hi! This is fake downloaded data!"); dojox.storage.put("messages", self._messages); dojox.off.sync.finishedDownloading(); }else if(type == "finished"){ this._messages = []; dojox.storage.remove("messages"); } }); dojo.connect(dojox.off.sync.actions, "onReplay", this, function(action, actionLog){ if(action.name == "new hello world message"){ var message = action.data; self.sendMessage(message); actionLog.continueReplay(); } }); if(!dojox.off.isOnline){ this.loadOfflineData(); } this.printMessages(); }

   可以看到，此处最主要的两个操作是设置 dojox.off.sync 对象的 onSync 事件和 dojox.off.sync.actions 对象的 onReplay 事件。其中，onSync 用来处理与服务器的同步，download 事件发生在第一次加载页面或是网络重新连接的时候，在该事件中我们应该从服务器下载数据，并在下载完毕之后调用 dojox.off.sync.finishedDownloading() 方法，以便告诉 Dojo Offline Widget 更新当前状态。finished 事件则说明从服务器下载数据结束，可以更新应用程序了。

   Dojo Offline 使用 action log 来记录用户在离线时所执行的操作，并在重新获得网络连接时再次执行这些操作，将数据上传到服务器。

   一般来说，程序初始化时首先要判断应用是否在线，如果不在线则加载本地数据进行页面展示。值得注意的是，这些事件何时触发是由 Dojo Offline 的同步框架根据当前应用程序状态决定的，开发人员只需设置相应的事件处理函数即可。

5. 保存离线数据，这是通过创建 action log 来实现的。在与服务器重新连接时 action log 会自动重新执行。

   清单 8

   saveOfflineSend: function(message){ this._messages.push(message); dojox.storage.put("messages", this._messages); var action = {name: "new hello world message", data: message}; dojox.off.sync.actions.add(action); alert("This message has been saved for sending when we go back online");

6. Dojo 的离线功能要在页面加载完及 Dojo Offline 初始化之后才能工作，因此页面本身的代码要在 Dojo Offline 初始化完成之后执行。Dojo Offline 的初始化完成可以用 dojox.off.ui 的 onLoad 事件来标识。我们首先将页面的初始化函数绑定到 dojox.off.ui 的 onLoad 事件，然后调用 dojox.off.initialize 函数对 Dojo Offline 进行初始化。

   清单 9

   dojo.connect(dojox.off.ui, "onLoad", helloWorld, "initialize"); dojox.off.initialize();

7. 加载 Dojo Offline Widget。实际上任何 html 元素，只要 id 为“dot-widget”都可以作为 Offline Widget 的占位符。Dojo Offline 初始化的时候会对这个元素进行填充。

   清单 10

   <div id="dot-widget"></div>

8. 为页面加入展示元素。

   清单 11

   <div id="helloMessage" style="margin: 1em;"> <label for="helloInput" style="margin-right: 0.2em;"> Enter Hello World Message: </label> <input name="helloInput" id="helloInput" style="margin-right: 0.2em;"> <button id="sendMessage" onclick="helloWorld.send()" style="margin-right: 0.2em;"> Send</button> </div> <p>Debug output:</p>

9. 运行 hello world

   hello world 示例程序不涉及服务器端代码，因此并不一定需要部署才能执行。但是为了便于测试在线 / 离线操作，最好还是通过服务器访问。

   在 Dojo Offline 里随附的例子中，Moxie 编辑器是一个包括服务器和客户端的完整应用程序，它使用 Jetty 作为 Web 容器，使用 Derby 作为数据库。我们可以启动 Moxie 应用所在的 Jetty 容器来访问 hello world 应用。

   首先请安装 jdk1.5 或以上版本，在 dojox/off/demos/editor/server/ 目录下，运行：

   java -jar editor.jar

   在浏览器地址栏输入 http://localhost:8000/dojox/off/demos/helloworld/helloworld.html 即可访问 hello world 应用。可以通过关闭 / 打开 Jetty 来观察 hello world 和 Dojo Offline Widget 在离线、在线及同步时的行为。

回页首

高级议题

网页资源的手工缓存

尽管利用 slurp() 方法可以为我们完成很多自动化的工作，但一些出现在 JavaScript 中的动态加载的资源是 slurp() 所无法分析得到的。因此，在实际应用中作为补充，我们往往还需要将一些 slurp 过程中的“漏网之鱼”手工加入本地缓存中。而 Dojo Offline 也为我们提供了相应的功能以支持这一需求。

手工将网络资源加入本地缓存的方法十分简单，例如，假设我们要将一个名为 big_and_little_fish.jpg 的文件缓存起来，可以执行如下方法：
清单 12

dojox.off.files.cache("images/big_and_little_fish.jpg");

不仅如此，Dojo Offline 还提供了一次性指定多个文件的功能，调用方法如下所示：
清单 13

dojox.off.files.cache([
 "images/fish1.png",
 "images/fish2.png",
 "scripts/some_dynamic_fish.js"
 ]);

我们可以多次调用 cache() 方法，假如调用过程中指定了多个同名文件，则最后一次被缓存的文件将会替换前面的同名文件。利用这一方法，再结合前述的 slurp() 方法，我们就可以很好的将离线所需的全部资源在本地缓存起来了。

数据的加密与解密

将数据下载到本地进行缓存是离线功能得以实现的重要步骤，但是假如这些数据中包含有敏感信息，例如身份证号码，而本地环境又不甚安全时，则对数据进行加密处理是很有必要的。前面曾经提到，我们在利用 Dojo Offline 进行数据存储时可以选择使用 Dojo SQL。而 Dojo SQL 允许我们很方便的对数据的某些字段进行加密和解密。

假设我们以前面的 DOCUMENT 表为例，假定其中的“content”字段属于敏感信息。

Dojo SQL 提供了两个特殊的关键字，ENCRYPT() 和 DECRYPT()，分别用以实现加密和解密操作。以 content 为例，调用方式类似如下：
清单 14

var password = "password";
dojox.sql("INSERT INTO DOCUMENTS VALUES (?,ENCRYPT(?))", "helloworld.txt",
"sensitive content", password,
function(results, error, errorMsg){
if(error){ alert(errorMsg); return; }
});

在上述代码中，我们在后一个字段加上了 ENCRYPT 关键字，声明对其进行加密。除此以外，我们还提供了一个 password 参数，这是底层加密机制所必须的。当我们启用应用系统时，系统会提示输入这一密码。出于对本地数据安全性的考虑，请不要将其存于 Cookie，Dojo Storage，或是 Dojo SQL 中，否则他人就可以轻易利用这一密码解开存于本地的敏感数据。另外，上述代码里还定义了一个回调函数。该回调函数将会在加密过程结束之后被调用。如果加密成功，results 对象中将会包含经过加密后的数据；如果加密失败，则 error 值将会为 true，并且 errorMsg 中会包含对错误原因的描述信息。

和加密一样，对数据进行解密的过程也十分简单。我们只需对需要解密的字段调用 DECRYPT 关键字即可。示例代码如下：
清单 15

var password = "password";
dojox.sql("SELECT fileName, DECRYPT(content) FROM DOCUMENTS",
password,
function(results, error, errorMsg){
if(error){ alert(errorMsg); return; }
// go through decrypted results
alert("First document info: "
+ results[0].fileName + " "
+ results[0].content);
});

在上述代码中，我们利用 alert 语句将加密后的第一条结果数据打印了出来。其中的 password 必须与加密时所使用的完全一致，否则解密将会失败，结果数据将仍然是加密后的样子。

假如我们要对多个字段进行加密，Dojo SQL 的 ENCRYPT 还有一种很方便的书写方法，即：ENCRYPT(?, ?)；同样的，对于 DECRYPT 也存在类似的书写方式，已完成一次性对多个数据字段进行解密：DECRYPT(fileName, content)

定制 Offline Widget

虽然利用 Dojo Offline Widget 可以省去我们很多的功夫，但是在某些情况下，其默认行为并不一定能够很好的满足我们的需要，例如：默认的样式风格与我们的应用程序不一致，此时，我们就可以对 Offline Widget 进行一定程度的定制。

事实上，我们在页面上所见到的 Offline Widget 有其对应的模板文件，该文件位于 dojox/off/resources/offline-widget.html，其中包含有一系列的 HTML 元素，这些元素都有相应的 ID，比如：dot-widget-network-indicator，Offline Widget 就是利用默认的 CSS 文件对其进行控制的，该 CSS 文件位于：dojox/off/resources/offline-widget.css。我们可以通过自定义 CSS 的方式来改变 HTML 元素的样式，从而改变 Offline Widget 在页面中的展现风格。

除了改变展现风格，有时我们可能还需要改变展现的内容，我们可以将 offline-widget.html 中的内容选择性的复制到我们自己的 HTML 页面中，这样我们就可以根据自己的需要随意设计 Offline Widget 的展现内容，而无需定义一个 ID 为 dot-widget 的特定 DIV 了。

此外，如果我们只是想修改 Offline Widget 所使用的默认图标的话，则还有更为简单的做法。那就是对如下几个 JavaScript 变量进行修改：

• dojox.off.ui.onlineImagePath：表示在线状态的图标
• dojox.off.ui.offlineImagePath：表示离线状态的图标
• dojox.off.ui.rollerImagePath：表示同步正在进行的图标
• dojox.off.ui.checkmarkImagePath：表示同步结束的图标

例如，如果我们想将表示在线状态的绿色小圆球状图标替换为自己设计的图标，则可以修改如下：

dojox.off.ui.onlineImagePath = “images/myonlineball.png”;

最后，假如我们对默认的“Learn How”页面不甚满意的话，则还可以对 dojox/off/resources/learnhow.html 进行修改，其对应的 CSS 样式也定义与 dojox/off/resources/offline-widget.css 中。

性能问题

Dojo Offline 每次在对数据进行同步时，始终都会刷新缓存于本地的资源，这一点有可能会对同步的性能构成较大的影响，因为毕竟并非每一次同步都需要刷新所有的本地数据。为了提高同步的效率，Dojo Offline 提供了一种可选的方案，即由应用程序提供一个名为 version.js 的特殊文件，并将其置于应用程序的主路径下。假如该文件存在的话，则同步期间 Dojo Offline 会去读取该文件的内容，并判断其内容是否改变，以此来选择性的刷新本地缓存文件。

我们在 version.js 文件中所提供的内容其实非常简单，可以是一个字符串，也可以是一个数字，形式不限。例如：”03-15-2009.9″。只要能够让 Dojo Offline 判断出内容的变化即可。

除了同步时候的性能问题外，另一个可能会遇到的性能问题是数据的存储。当我们使用 Dojo SQL 来存储数据时，必须先将底层所依赖的 Google Gears 的存储数据库打开，而后才能进行数据的存储，而当数据存储完毕之后，还需将数据库关闭。通常情况下，我们并不需要关心这一点，因为 Dojo SQL 会自动为我们完成这一切，每次当我们执行一句 SQL 语句时，底层代码都会自动处理数据库的打开和关闭。

不过，假如我们是在批量的向本地缓存插入数据的话，比如在一个循环次数为上百次的 for 循环中执行数据插入操作，那么每执行一次 SQL 语句都要打开和关闭一次数据库或许是一种很低效做法。为了提高效率，我们可以在批量操作数据之前通过调用 dojox.sql.open() 手工将数据库打开，等所有操作完成之后后再通过调用 dojox.sql.close() 手工将其关闭。插入数据期间，Dojo SQL 会自动判断数据库的连接状态，并保持连接一直处于打开状态，直至手工关闭为止：
清单 16

var dataSet = getDataSet(); // get an array that has a bunch of data
//in it
dojox.sql.open();
for(var i = 0; i < dataSet.length; i++){
 dojox.sql("INSERT INTO DOCUMENTS (fileName, content) VALUES (?, ?)",
 dataSet[i].fileName, dataSet[i].content);
}
dojox.sql.close();

回页首

总结

本文介绍了 Dojo Offline 的强大功能。通过阅读本文，读者能够了解到 Dojo Offline 的基本工作原理和一定的高级定制功能，从而掌握如何使用 Dojo Offline 进行 Web 离线应用程序开发的技能。

申明：

本文仅代表作者个人观点。

参考资料

学习

• Dojo 的 Wiki：对 dojo 进行了全面的介绍，是一个入门的好地方。
• Dojo 官方网站：提供了最全面的资料，包括 dojo 源码，各种文档，实例等等。
• 参考 Dojo offline 官方文档。
• Dojo 官方文档库：在这里您可以找到全部和 Dojo 开发相关的文档资料。
• 参考 Google Gear 相关文档，了解更多 Google Gear 的内容。
• 参考 W3C Offline Web Applications 规范。
• developerWorks Dojo 专题：汇集了大量与 Dojo 相关的技术资源。
• 通过 developerWorks Web 开发专区 内有关 Web 技术的文章和教程（包括本专栏之前的各期文章）扩展您的站点开发技能。

获得产品和技术

• IBM 试用软件：使用这些可直接从 developerWorks 下载的软件构建您的下一个开发项目。

讨论

• 通过参与 developerWorks blog 加入 developerWorks 社区。

作者简介

		何辉剑，现在 IBM 中国软件开发实验室 Lotus 开发中心工作，目前从事 Lotus Quickr 的开发定制以及客户支持工作。对 Dojo，Web2.0 相关技术和社会化软件有丰富的经验。

		张顺，现在 IBM 中国软件开发实验室 Lotus 开发中心工作，目前从事 Lotus Quickr 的开发定制以及客户支持工作。对 Web 服务，Web2.0 相关技术有浓厚的兴趣。

		莫映，现在IBM中国软件开发实验室Lotus开发中心工作，目前从事Lotus Quickr的Platform Service开发。热衷于Web 2.0相关技术及智能Web 2.0应用的构建。

Other Posts / 其他文章

• 免费的Photoshop高分辨率笔刷
• [转]CSS文字排版终极指南
• CSS中的RGBa色彩
• 谈谈sIFR – 可伸缩Inman Flash替换
• [译]Facebook是如何设计的

一个品质远远超出“原型建造”的Ajax库

点击下载PDF：Dojo中文手册

Related Posts / 相关文章

• 【转】使用 Dojo 的 Ajax 应用开发进阶教程 : 富含语义的 HTML

回车键提交表单是我们经常操作的一个动作，而什么条件下能使回车键提交却很少有人关心！

我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
1、如果表单里有一个type=”submit”的按钮，回车键生效。
2、如果表单里只有一个type=”text”的input，回车键生效。
3、如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
4、其他表单元素如textarea、select不影响。

实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第4条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。

一个demo，列出了一些例子

Other Posts / 其他文章

• 【转】马云给正在奋斗的人的精典语句
• 揭开iPhone版Google，Gmail，Google Reader神秘面纱的方法
• 空间总算是弄好了
• 完美兼容IE6，摆脱table用CSS实现图片垂直居中
• Theme Upgrade Advice For MeePlace 2.4

Yes, this is another round-up of fresh and useful Javascript techniques, tools and resources. But don’t close the tab yet, as you might find this one very useful. In this selection we present calendars, forms, buttons, navigation, debugging, optimization and compatibility tables as well as handy resources and tools. We also cover various jQuery-plugins that will help you extend the functionality of your website and improve user experience with ready components or coding solutions.

The last section also covers a number of useful educational resources such as a compilation of useful JavaScript coding practices, a detailed comparison of JavaScript frameworks and general JavaScript programming conventions. We are looking forward to your feedback.

You may be interested in the following related posts:

• 50 Fresh JavaScript Tools That Will Improve Your Workflow
• 45 Powerful CSS/JavaScript-Techniques
• 70 Useful AJAX And JavaScript Techniques

[By the way, did you know there is a brand new Smashing WordPress Book? Push WordPress past its limits!]

Calendars and Timelines

jDigiClock – Digital Clock (HTC Hero inspired)
jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget.

jQuery Sliding Clock v1.1
jQuery transpearant Slider clock with CSS sprites.

Date / Time Picker
Note that this control is not designed to work in IE6; although it will function correctly in most cases, the positioning of the calendar may be way off depending on how your page is styled.

JavaScript Debugging and Validation Tools

Venkman JavaScript Debugger project page
Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x. It does not include Gecko-based browsers such as K-Meleon 1.x, Galeon 2.x and Netscape 8.x. The debugger is available as an add-on package in XPI format. Venkman JavaScript Debugger has been provided as part of the Mozilla install distribution since October 3rd 2001.

CompanionJS
Companion.JS (pronounced Companion dot JS or CJS) is a Javascript debugger for IE.

How to Test your JavaScript Code with QUnit
QUnit is a powerful JavaScript unit testing framework that helps you to debug code. It’s written by members of the jQuery team, and is the official test suite for jQuery. But QUnit is general enough to test any regular JavaScript code, and it’s even able to test server-side JavaScript via some JavaScript engine like Rhino or V8.

JS Bin – Collaborative JavaScript Debugging
JS Bin is an open source collaborative JavaScript debugging tool.

Forms, Buttons & Navigation

Making a Google Wave History Slider
Here is shown how to create a Google Wave-like history slider. Using it will enable visitors to go back and forth in time to view the changes that take place on a comment thread.

Fancy Radio Buttons With jQuery
Creation of 2 mandatory option sets that a user could choose, while hiding off the radio button inputs and using an anchor links to make it a bit more usable.

Creative Button Animations with Sprites and JQuery
Fading hover effect for which the transition is smoothed with JavaScript, using jQuery library.

Password (un)Masking
JavaScript jQuery that toggles the masking and unmasking of the password field.

jQuery MagicLine Navigation
These “sliding” style navigation bars have been around a while, and turns out it’s really pretty darn easy. Here are put two examples together.

Fixed Fade Out Menu: A CSS and jQuery Tutorial
The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again. Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields
The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.

Sliding Labels v2
Form label keeping the label inline, but sliding it off to the left rather than going away on click.

Ketchup Plugin
Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.

Layout tools

jQuery {css}designerGrid Plugin
{css} designerGrid is A jQuery Plugin developed for website interface developers who use the grid system of layout. {css} designerGrid is intended to assist these developers with CSS prototyping.

css-template-layout
JavaScript (jQuery) implementation of the CSS Template Layout Module

How to create a fluid grid with jQuery
Grid-based layout is probably the more preferred way to style up a webpage to give it more magazine-like look and feel. This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout (See demo here). The algorithm/procedure used in this tutorial is very simple and straightforward. There are more advanced algorithms out there which can handle multiple scenarios. But the purpose is to understand the basic logic on how to create such layout. So here it goes…

closure-templates
Closure Templates are a client- and server-side templating system that helps you dynamically build reusable HTML and UI elements. They are easy to learn and customizable to fit your application’s needs. Closure Templates support JavaScript and Java and use a data model and expression syntax that works for either language. You can also use the built-in message support to easily localize your applications.

Useful jQuery Plugins

TipTip jQuery Plugin
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb minified!

jQuery Roundabout
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)

jParse – jQuery XML Parse Plugin
jParse is a jQuery plugin that allows you to parse XML that was fetched with the jQuery .ajax method (making it fully customizable).

jQuery Quicksand plugin
Reorder and filter items with a nice shuffling animation.

typeQuery, change website typography with jquery
typeQuery gives the flexibility to change the font-family for everything you define with class, id, or tag, this example is referring to the selected item on a select object with id=”tag” and the font-family value at select object with id=”family”: $($("#tag").val()).css("font-family", $("#family").val());

Flip! A jQuery plugin v0.9.9
Flip is a jQuery plugin that will flip easily your elements in four directions.

Data Encryption With JavaScript: jCryption
jCryption is a jQuery plugin for encrypting POST/GET data submitted by forms. It uses public-key algorithm of RSA for the encryption & has a PHP file for handling the decryption of data.

Minimalist jQuery: 11 useful plugins under 4K
jQuery makes our lives easier. So much so that it’s tempting to use it all the time, inadvertently slowing our page load times (cue YSlow and Hammerhead). Combining, compressing, and delivering scripts at the end of your page helps in the HTTP request department. On the file size front, below are jQuery plugins that give solid bang for your performance buck.

Undo/Redo in jQuery
An easy-to-use plugin for adding undo/redo capabilities to a jQuery application. It is based loosely on the Objective-C/Cocoa way of doing things.

editease
editEase – jQuery CMS | no fuss, no database, no worries

jsHub
jsHub is a single piece of JavaScript (a “tag”) that can handle reading different sorts of page information and then send them to many different vendors’ products. One piece of code to send to Google Analytics, Omniture SiteCatalyst, WebTrends and Mixpanel. Instead of one piece of JavaScript per vendor, jsHub has a single piece of code (the “hub”) and plugins that know how to translate into the required wire protocol for each vendor. Vendors only maintain the plugin for their product.

Educational JavaScript Resources and Tutorials

Caffeinated Simpleton
JavaScript is an amazing little language, but it’s got some quirks that turn a lot of people off. One of those quirks is this, and how it’s not necessarily what you expect it to be. this isn’t that complicated, but there are very few explanations of how it works on the internet. This article is an attempt to explain how this works and how to use it properly.

What You Need To Know About JavaScript Scope
This article discusses how JavaScript handles scope and how various JavaScript libraries provide methods for dealing with it and how they smooth out a few bumps. We’ll also look at how you can get back to basics and do some interesting scope wrangling without a library, a useful approach if you’re writing code that needs to stand alone.

Learning Advanced JavaScript
A very nice tutorial to learn JavaScript, containing code and discussion from the upcoming book Secrets of the JavaScript Ninja by John Resig.

Highlight search terms automagically with JavaScript and mark
Script surrounding the search term(s) with the mark element rather than a span, although the class searchword is retained in case you want to style these marks differently from others. In the CSS, the rule article mark is just added to turn it a gentle shade of pink.

10 Really Helpful Traversing Functions in jQuery
With jQuery, selecting HTML elements is laughably easy. But at times, we may wish to further refine the selection, which can be a hassle when the HTML structure is complicated. In this tutorial, we’ll explore ten ways that we can refine and extend a set of wrapped elements that we wish to operate upon.

Using keyboard shortcuts in Javascript
If you want to enhance your web app, Javascript keyboards shortcuts is definitely something to consider. In this article, you’ll learn to use JS keyboard shortcuts, with and without the JQuery framework.

Code Conventions for the JavaScript Programming Language
This is a set of coding conventions and rules for use in JavaScript programming.

jQuery – Select element cheat sheet
This cheat sheet helps you to find the index of a selected option, set the selected option by value, set the selected option by text, insert a new option before or after another and get the text or value of the selected option.

Compare JavaScript frameworks
Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

Park your Horse, Code Cowboy: Professional JavaScript Workflows, Part 1
In this series, we’ll talk about tools & techniques you can use to cover those No’s, and cut a lot of strife & embarrassment from your JavaScript experience.

JavaScript Reference examples (example source code)
JavaScript Reference examples, organized by Objects, Properties, Methods & Collections. Some Event Handlers Reference are also available.

JavaScript best practices
A compilation of best practices and good advice I’ve amassed over the years, much of it learnt the hard way (experimentation and suchlike). Take the advice below to heart and keep it in a part of your brain that has a quick access route so you can apply it without thinking about it. I am sure you will find things to disagree with, and that is a good thing – you should question what you read, and strive to find better solutions. However, I have found that following these principles has made me a more effective developer and allowed other developers to build upon my work more easily.

wtfjs
JavaScript is a language we love despite it giving us so much to hate. This is a collection of those very special irregularities, inconstancies and just plain painfully unintuitive moments for the language of the web.

转自：http://www.smashingmagazine.com/2010/03/12/45-fresh-useful-javascript-and-jquery-techniques-and-tools/

Related Posts / 相关文章

• 一个利用jQuery实现菜单跟随页面滚动而移动的代码
• 在Dreamweaver中加入jQuery代码编写联想提示
• Galleriffic-jQuery相片展示插件
• NyroModal-jQuery的一个遮罩层插件
• JavaScript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

出版商: Oreilly | ISBN: 0596805780 | 2010年1月  | PDF | 192页 | 2.8 Mb

It’s a fact: if you know HTML, CSS, and JavaScript, you already have the tools you need to develop your own iPhone apps. With this book, you’ll learn how to use these open source web technologies to design and build apps for the iPhone and iPod Touch on the platform of your choice-without using Objective-C or Cocoa.

Device-agnostic mobile apps are the wave of the future, and this book shows you how to create one product for several platforms. You’ll find guidelines for converting your product into a native iPhone app using the free PhoneGap framework. And you’ll learn why releasing your product as a web app first helps you find, fix, and test bugs much faster than if you went straight to the App Store with a product built with Apple’s tools.

* Build iPhone apps with tools you already know how to use
* Learn how to make an existing website look and behave like an iPhone app
* Add native-looking animations to your web app using jQTouch
* Take advantage of client-side data storage with apps that run even when the iPhone is offline
* Hook into advanced iPhone features — including the accelerometer, geolocation, and vibration — with JavaScript
* Submit your applications to the App Store with Xcode

PDF下载：

Oreilly.Building.iPhone.Apps.with.HTML.CSS.and.JavaScript.Jan.2010.rar

Related Posts / 相关文章

• HTML5新功能演示
• 揭秘HTML5和CSS3
• 转牛X无敌！！！Zen Coding: 一种快速编写HTML/CSS代码的方法
• 在Dreamweaver中加入jQuery代码编写联想提示
• 关于一些浏览器的的Hack

这次后台增加的功能中，有一个是能够多选/全选项目，这个已经是历史遗留问题了，在我所有开发的项目中都是用这套自己开发的后台系统，改一改就成。这次布莱恩吧multi-selectable列在了Milestone里，所以就写了。以前有做过多选，不过由于是原始form的post，所以比较简单。这次用AJAX的后台多选操作，我还是想了一下才开始动手的。

我的想法是，通过遍历checkbox，来得到有被选定了的checkbox的value，然后再传给后端进行多选处理。

下面公开MeePlace的这部分代码。

全选按钮。用户点击全选的那个checkbox后，checkbox的onclick=”select_item_all(this,”allitem”,”childitem”)”
其中”allitem”是全选的checkbox的classname，因为也许这个全选会出现两个，或者更多，比如表头和表尾各一。
“childitem”是所有的条目前的checkbox的classname。
JS代码：

//全选按钮
function select_item_all(whochecked,allitem,childitem)
{
 if(whochecked==true)
 {
  $('.'+allitem).attr('checked',true);
  $('.'+childitem).attr('checked',true);
  $('.itemtr').addClass('trselected');
 }
 else
 {
  $('.'+allitem).attr('checked',false);
  $('.'+childitem).attr('checked',false);
  $('.itemtr').removeClass('trselected');
 }
}

这样通过判断提交全选的checkbox是否被勾选，来达到全选目的。

下面的代码是点击”Delete selected”（“删除所选”）之后，扫描所选中的checkbox的value以及发出警告和异步提交的代码
JS代码：

function delselected(sheet,where,childitem)
{
//通过扫描制定childitem（项目前的checkbox的classname），来获取选中了的项目IDs
   var selected_ids='';
   var obj=$("input:checked[class='"+childitem+"']");
    $.each(obj, function(i,item){
       selected_ids+= $(item).val() +',';
     });  

if(selected_ids)
{
 var a=confirm("CAUTION! You are going to delete a quantity of items.\n\rThese items will never be restored after deleted.\n\rSure to delete these items?");
if(a==0) return ;
}
else   //没有发现选中的checkbox
{
 alert('You have not selected any item.');
 return;
}

 //通过jQuery的$.post来异步提交数据
$.post("/mgt/func/delete.php?"+Math.random(), {
sheet:sheet,
where:where,
equal:selected_ids
},function(data){tips('Items deleted.');nav();});

}

对应 delete.php的代码，虽然代码不安全，能够直接注入的样子，直接操作数据库。但是出于是后台的代码，而且MeePlace对SESSION的检验非常严格，所以就这么用了，我想没有一个Admin想用自己的Admin权限黑自己的网站的。LOL
PHP代码：

//检查_SESSION

//自己的数据库连接，或者是框架的数据库接口

///传递过来的值，equals是所选ID经过explode()函数之后得出的数组
$sheet=$_REQUEST[sheet]; //
$where=$_REQUEST[where]; //
$equal=$_REQUEST[equal]; //

$equals = explode(“,”, $equal);
/// 循环删除数据库中的制定条目
$i=0;
while($i if($equals[$i]){
$query="delete from `$sheet` where `$where`= '$equals[$i]' limit 1";
$rc=mysql_query("$query") or die("ERROR: $query");
$output.=$query."\n\r";
}
$i++;
}

另外如果你想通过checkbox的onchange来调用全选函数的话，结果是：IE不支持！最后只好使用onclick来实现了。这个也是历史遗留问题。算是IE的一个不愿解决的BUG

Related Posts / 相关文章

• What’s new for Meeplace 2.8
• Meeplace 2.6 Release [Feb 13, 2010]
• 今日新闻：MeePlace LLC在北美注册
• 我的近况与MeePlace 2.4说明
• Theme Upgrade Advice For MeePlace 2.4

jQuery Lightbox Plugin

支持的媒体类型： Images

演示

下载

Fancybox

支持的媒体类型： Images, Inline HTML, iFrame

演示

下载

Shadowbox

支持的媒体类型： Images, Inline HTML, iFrame, AJAX, Flash, Video

演示

下载

ThickBox

支持的媒体类型： Images, Inline HTML, iFrame, AJAX

演示

下载

Slightly Thickerbox

支持的媒体类型： Images, AJAX, Video

演示

下载

Fancy Zoom

支持的媒体类型： Images, Inline HTML, Flash

演示

下载

Facebox

支持的媒体类型： Images, Inline HTML, AJAX

演示

下载

nyroModal

支持的媒体类型： Images, Inline HTML, iFrame, AJAX, Video

演示

下载

Interface Imagebox Demo

支持的媒体类型： Images

演示

下载

piroBox

支持的媒体类型： Images

演示

下载

Greybox Redux

支持的媒体类型： Images, iFrame

演示

下载

prettyPhoto

支持的媒体类型： Images

演示

下载

From: Rounding Up the Top 10 jQuery Lightbox Scripts

Related Posts / 相关文章

• 20个jQuery新效果
• [英,转]45个新鲜有用的JS与jQuery技术和工具
• LazyLoad – jQuery延迟载入插件
• 20多个漂亮的使用jQuery交互的网站设计欣赏
• 2009 年度最佳 jQuery 插件

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width – border

clientHeight = height – border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码

1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
            25
            26
            27
            28
            29
            30
            31
            32
            33
            34
            35
            36
            37
            38
            39
            40
            41
            42
            43
            44
            45
            46
            47
            48

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <title>请调整浏览器窗口</title>
            <meta http-equiv="content-type" content="text/html; charset=gb2312">
            </meta></head>
            <body>
            <h2 align="center">请调整浏览器窗口大小</h2><hr />
            <form action="#" method="get" name="form1" id="form1">
            <!--显示浏览器窗口的实际尺寸-->
            浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />
            浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />
            </form>
            <script type="text/javascript">
            <!--
            var winWidth = 0;
            var winHeight = 0;
            function findDimensions() //函数：获取尺寸
            {
            //获取窗口宽度
            if (window.innerWidth)
            winWidth = window.innerWidth;
            else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
            //获取窗口高度
            if (window.innerHeight)
            winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
            winHeight = document.body.clientHeight;
            //通过深入Document内部对body进行检测，获取窗口大小
            if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)
            {
            winHeight = document.documentElement.clientHeight;
            winWidth = document.documentElement.clientWidth;
            }
            //结果输出至两个文本框
            document.form1.availHeight.value= winHeight;
            document.form1.availWidth.value= winWidth;
            }
            findDimensions();
            //调用函数，获取数值
            window.onresize=findDimensions;

            //-->
            </script>
            </body>
            </html>

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

Related Posts / 相关文章

• JavaScript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）
• [英,转]45个新鲜有用的JS与jQuery技术和工具
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript
• Javascript 实现图像倒影、发光效果
• JavaScript MD5 加密

Related Posts / 相关文章

• 20个jQuery新效果
• [英,转]45个新鲜有用的JS与jQuery技术和工具
• 10个jQuery Lightbox效果插件
• 20多个漂亮的使用jQuery交互的网站设计欣赏
• 2009 年度最佳 jQuery 插件

你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间？如果你的编辑器有代码提示功能，你编写的时候就会容易些，但即便如此你还是要手动敲入很多代码。

在JavaScript方面，当我们想要在一个页面上获取某个特定的元素时，我们就会遇到同样的问题，我们必须写很多代码，这就变得难于维护和重用。JavaScript框架应运而生，它们同时引入了CSS选择器引擎。现在，你可以使用简单的CSS表达式来获取DOM元素，这相当酷。

但是，如果你不仅仅可以用CSS的选择器布局和定位元素，还能生成代码会怎么样？比如，如果你这样写：

div#content>h1+p

…然后就可以看到这样的输出：

<div id="content">
<h1></h1>
<p></p>
</div>

有些迷惑吧？今天，我将向你介绍Zen Coding，一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。

注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：http://vimeo.com/7405114，上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。

如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：

Demo

• Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持)
• 中文版演示

下载(完全支持)

• Aptana (跨平台);
• Coda, via TEA for Coda (Mac);
• Espresso, via TEA for Espresso (Mac);

下载(部分支持，只支持“展开缩写”)

• TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
• TopStyle;
• Sublime Text;
• GEdit;
• Dreamweaver CS4
• editArea在线编辑器;
• Zen Coding在线编辑器中文版

现在让我们看一下这些工具是如何工作的吧。

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成 一些东西，是写一个长代码的较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。

这里是一个支持的属性和操作符的列表：

• E
  元素名称(div, p);
• E#id
  使用id的元素(div#content, p#intro, span#error);
• E.class
  使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;
• E>N
  子代元素(div>p, div#footer>p>span);
• E+N
  兄弟元素(h1+p, div#header+div#content+div#footer);
• E*N
  元素倍增(ul#nav>li*5>a);
• E$*N
  条目编号 (ul#nav>li.item-$*5);

正如你能看到的，你已经知道如何使用Zen Coding了：只是些一个简单的仿CSS选择器(呃，“缩写”抱歉)，就像这样…

div#header>img.logo+ul#nav>li*4>a

…然后调用”展开缩写”行为。

这里有两个新增的操作符：元素倍增和条目编号。比如，如果你想生成5个<li>元素，你可以简单的写位li*5。它也将同样重写全部子代元素。如果你想写4个<li>元素，每个里面都有一个<a>标签，你就可以简单的写为li*4>a，这样会生成以下HTML代码：

1
2
3
4

<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写，div.item$*3:

1
2
3

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

只需在你想要索引出现的任何class或id属性上添加一个美元符号即可，而且想要多少都可以。那么，这样…

 div#i$-test.class$$$*5

会被转换成为:

1
2
3
4
5

<div id="i1-test" class="class111"></div>
<div id="i2-test" class="class222"></div>
<div id="i3-test" class="class333"></div>
<div id="i4-test" class="class444"></div>
<div id="i5-test" class="class555"></div>

你会看到，当你写a的缩写的时候，输出是<a href=””></a>。或者，如果你写img，输出就是<img src=”” alt=”” />。

Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的？有一个专门的文件，名为zen_settings.js描述了输出元素。这是一个简单的JSON文件，描述每种语言的缩写(是的，你可以为不同的句法定义缩写，比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样：

1
2
3
4
5
6
7

'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->',
			...
			},
			  'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',
			...
			}
			}

元素类型

Zen Coding有两个主要的元素类型：“片段(snippets)” 和 “缩写(abbreviations)”。片段就是随意的代码碎片，而缩写是标签定义。通过片段，你可以写出你想要的任何代码，它也会照你写的格式输出；但是你必须手动的格式化它(使用\n 和\t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方，就像这样：cc:ie6>style。如果你不使用${child}变量，子元素将会输出于代码片段的后面。

有了缩写，您必须编写标记定义，而且语法是非常重要的。通常，你必须写一个简单的带有所有默认的属性的标签，比如: <a href=””></a>。当Zen Coding被加载后，它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以，如果你写<img src=”” alt=”” />，你会告诉Zen Coding这个标签必须是空的，然后“扩展缩写”行为就会在输出之前为它使用特定的规则。

对于片段和缩写，你可以添加一个管道符号，它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的，Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。

例子

那么，这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先，它将一个完整的缩写分开为独立的元素：这样div>a 会被分成div 和a 元素，当然也会维持他们的关系。然后，每个元素，解析器先在代码片段内而后在缩写中寻找定义。如果它找不到，将会使用元素的名字作为新的标签，并为其添加缩写中定义的id和class。比如，如果你写mytag#example，解析器在片段或缩写中找不到mytag定义，它就会输出<mytag id=”example”><mytag>。

我们制作了很多默认的CSS和HTML缩写和片段。你会发现学习使用Zen Coding可以增加你的生产力。

HTML 标签对匹配器

对于HTML编码者的另一个非常常见的任务是寻找一个元素的标签对。例如你想选择整个<div id=”content”>标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。

不幸的是，很多现代开发工具在该功能方面有所欠缺。那么我就决定写一个我自己的标签对匹配器作为Zen Coding的一部分。不过它依然在beta阶段并尚存一些问题，但它可以工作的很不错并很快。不是浏览整个文档(像通常的那种HTML标签对匹配器的做法)，它从光标的当前位置开始寻找相关的标签。这使得它非常快并且上下文无关：它甚至可以用于这段JavaScript代码片段：

1
2
3
4
5
6
7

var table = '<table>'; for (var i = 0; i < 3; i++) {
	table += '<tr>'; for (var j = 0; j < 5; j++) {
		table += '<td>' + j + '</td>';
	}
	table += '</tr>';
}
table += '</table>';

使用缩写包裹

这真的是一个很酷的特性，它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器bug？或者你需要添加一个装饰，比如一个背景图片或者边框到一个块级内容？你必须写开始标签，临时打断你的代码，找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。

该功能相当简单：它要求你输入缩写，然后执行适当的“展开缩写”行动并将你期望的文本放到你缩写的最后一个元素里面。如果你没有选择任何文本，它就会启动标签对匹配器并使用结果。它同样能搞清楚你的光标的位置：标签的内容里面或者是开始和关闭标签中间。依赖于它的位置，它会包裹标签的内容或标签本身。

缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操作符后面的数字，比如：ul#nav>li*>a。当Zen Coding 发现一个使用未定义的倍增数的时候，它会将它作为一个重复元素：你的章节中有多少行，它就会输出多少次，并将每行的内容放到重复元素的最后一个子元素里面。

如果你在这段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span：

1
2
3
4
5

About Us
Products
News
Blog
Contact Up

你将会得到以下结果：

1
2
3
4
5
6
7
8
9

<div id="header">
	<ul id="navigation">
		<li class="item1"><a href=""><span>About Us</span></a></li>
		<li class="item2"><a href=""><span>Products</span></a></li>
		<li class="item3"><a href=""><span>News</span></a></li>
		<li class="item4"><a href=""><span>Blog</span></a></li>
		<li class="item5"><a href=""><span>Contact Up</span></a></li>
	</ul>
</div>

你可以看到，Zen Coding是一个强大的文本处理工具。

快捷键

• Ctrl+,
  展开缩写
• Ctrl+M
  匹配对
• Ctrl+H
  使用缩写包括
• Shift+Ctrl+M
  合并行
• Ctrl+Shift+?
  上一个编辑点
• Ctrl+Shift+?
  下一个编辑点
• Ctrl+Shift+?
  定位匹配对

这些快捷键是可以自定义的。

在线演示

你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢？因为Zen Coding是用纯JavaScript开发并迁移到Python，它甚至可以用于浏览器内部，这令它成为引入到CMS的首选。

• Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持)
• 中文版演示

支持的编辑器

Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件：它获取文本、做一些处理并放回新的文本(或索引，用于标签匹配)。Zen Coding由JavaScript和Python编写，所以它实际上可以运行于任何平台。在Windows，你可以运行JavaScript版本，而Mac和Linux 分支可以使用Python版。

如果让你的编辑器支持Zen Coding，你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如，TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能，但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。

完全支持

• Aptana (跨平台);
• Coda, via TEA for Coda (Mac);
• Espresso, via TEA for Espresso (Mac);

部分支持(只支持“展开缩写”)

• TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
• TopStyle;
• Sublime Text;
• GEdit;
• Dreamweaver CS4
• editArea在线编辑器;
• Zen Coding在线编辑器中文版

Aptana是我主要的开发环境，它使用一个JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具，所以任何一个新的Zen Coding版本都将会首先对Aptana可用，然后部署到Python并兼容其它的编辑器。

Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平台支持，由Ian Beck开发。原始的源代码在GitHub上，但我还是制作了我自己的分支以整合Zen Coding的特性。

总结

很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做，还有很多的编辑器需要被支持以及一些文档要写。请浏览现在的文档 以及源代码以寻找你的问题的答案。希望你喜欢Zen Coding!

附：Zen coding的具体用法

遗憾的是， 本文原作者并没有说明zen coding的具体用法，神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例，其它编辑器平台暂不描述，如有疑问可以在评论中与前端观察的网友交流。

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用Aptana，下面的第一步可以跳过。

ni
1. 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如果你使用Aptana，可跳过这一步)
2. 在你的当前工作去创建一个顶级的项目，给它命名，比如，就叫zencoding
3. 在新创建的项目中创建scripts文件夹
4. 解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:
5. 安装之后，Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

注意事项：

• Aptana版的官方插件是基于MAC机的，如果你用的是Windows，需要手动更改快捷键(在每个文件头部的注释片段中更改)
• 官方的文件编码有点儿乱，修改官方js的时候，请注意编码问题，修改不当会造成相关功能的丢失；

DreamWeaver

好消息是，现在已经有了Zen coding for DreamWeaver插件，坏消息是，该插件支持的功能很少，只支持展开缩写功能。而且默认的快捷键是无效的。只能在“命令”菜单中点击操作。另外，没有测试该插件是不是只支持CS4版本。不过比较好的是，作者将本插件的源码也放出了，你可以自定义一个Dreamweaver的插件。

事实上，官方的DW插件在Windows下有点儿bug，就是会出现空白的行，我简单的修正了下，重新编译了个包，在本机测试没问题，感兴趣的童鞋可以下载尝试：http://www.boxcn.net/shared/c71z7×7sfe

原作者介绍：

Sergey Chikuyonok是一位俄罗斯的前端开发工程师和作者，他在优化方面有很大的热情：从图片、JavaScript效果到工作流程和节省时间的编码。访问他的主页和他的Twitter。

Related Posts / 相关文章

• 关于一些浏览器的的Hack
• HTML5新功能演示
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript
• 揭秘HTML5和CSS3
• CSS中的RGBa色彩

jQuery是使用最多的JS库之一，它有很多优点，比如轻量、易用、完善的Ajax、良好的浏览器兼容，以及它有健壮的选择器等。

这些优点使得jQuery成为帮助前端开发人员的有力工具。越来越多的大型网站开始使用jQuery及其插件实现其前端交互。

今天展示的20个jQuery交互的网站设计不仅交互效果很酷，界面设计的也很棒，希望能够给你的设计提供某些参考。

当然，使用jQuery的优秀的网站并不只这些，如果你知道有很不错的基于jQuery的网站设计，欢迎与我们共享，多谢。

翻页、滑动、lightbox – serialcut.com

滑动、导航 – tearoundapp.com

滑动、导航 – mtvsticky.com

滑动、动画 – worldofmerix.com

滑动、拖拽 – icondock.com

滑动、导航 – directdesign.it

翻页、弹出 – jumpstartforbusiness.co.uk

滑动, Lightbox – 10bestthings.com

滑动 – paramoreredd.com

滑动 – bulletpr.co.uk

滑动、淡出、Ajax、导航 – bestbefore.ro

lightbox、Ajax – www.geochirp.com

滑动、导航 – eyedraw.eu

LightBox、Ajax、拖拽 – rachelbloch.ch

滑动、动画 – marfil.me

动画、提示 – jquerystyle.com

弹出、Ajax、提示 – virtuousquare.fr

滑动、动画 – bonadiesarchitect.com

滑动、热键 – pauljnoble.com

翻页、滑动、lightbox – ormanclark.com

提示、lightbox – tedxbucharest.com

Related Posts / 相关文章

• 20个jQuery新效果
• [英,转]45个新鲜有用的JS与jQuery技术和工具
• 10个jQuery Lightbox效果插件
• LazyLoad – jQuery延迟载入插件
• 2009 年度最佳 jQuery 插件

jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery  的特长是网页效果，因此，它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 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

Related Posts / 相关文章

• 20个jQuery新效果
• [英,转]45个新鲜有用的JS与jQuery技术和工具
• 10个jQuery Lightbox效果插件
• LazyLoad – jQuery延迟载入插件
• 20多个漂亮的使用jQuery交互的网站设计欣赏

1. Storage Utility
这个组件实现了本地存储的功能，提供了一个HTML5风格的借口，你可以利用这个接口进行本地存储，它提供三种解决方案：HTML5 存储、利用Google Gears存储 和 利用 Flash Share Object 存储。随着支持 HTML5 标准的浏览器越来越多，这三种存储方案可以覆盖大部分的用户了。

2. SWFStore Utility
这个组件为上个组件 Storage Utility 提供 Flash Share Object 存储的功能，并且包括了一个利用 Flash Share Object 存储文本的 JavaScript API 。它对存储的键值对 支持即时的 gzip 压缩，这可以让你不会很容易超过 100KB 的 Flash 默认的本地存储上限（当然，如果用户同意的话这个上限是可以更改的） ，可以有效地帮助你节省空间。

3. SWF Utility
这个组件是一个用来把 Flash 嵌入到页面中的轻量级工具。需要注意的是，它只使用<object>标签来嵌入 Flash，而并不是所有的浏览器都支持这个标签。

4. ProgressBar Control
一个高度可定制的进度条组件。

此外，在 YUI 2.8.0 中还有很多bug fix 以及重要改进：

1. Connection Manager 支持跨域。 Connection Manager 利用 Flash 实现了跨域请求的功能，并且Connection Manager 的核心功能也被剥离到了 connection-core 这个模块中，如果你只是想用 Connection Manager 实现简单的 XHR ，可以只使用 connection-core 这个模块。

2. YUI Charts 开始支持多个坐标轴。

3. 更多改进请看 YUI 2.8.0 的 README

这次发布一个有意思的事情是，有一些重要的组件其实是 Yahoo 之外的人编写的，YUI 开源绝对是个明智之举啊。现在 YUI 的源码都在 github 上，你要是有热情有能力，也可以参与一下。如果你不了解Git，可以到Git官方网站上学习一下，这个版本控制系统很强大，学了肯定用得着。

更多请看 YUI Blog 。

转：http://www.zhuoqun.net/html/y2009/1375.html

Related Posts / 相关文章

• 如何联机调试和发布 iPhone App
• Reset CSS – 复位(重置) CSS

HTML 是开发 Web 应用的基础。目前已经有数以千亿的使用 HTML 语言编写的网页。HTML 语言的规范也不断在演进和更新。HTML 语言虽然上手比较简单，但是如何开发出组织良好、结构清晰和可维护性高的 HTML 文档，对很多 Web 开发人员来说，也是一个值得探讨的话题。随着 Ajax 应用的流行，一种称为“富含语义的 HTML（Semantic HTML）”的最佳实践，逐渐被广大 Web 开发人员所推崇。这种实践的主要思想是还 HTML 以本来面目，只使用 HTML 来描述文档的结构，而把与展示相关的部分从 HTML 文档中剥离出去，交给 CSS 来处理。本文将详细介绍这一最佳实践，涉及的内容包括 HTML 规范的演化历史、推荐使用的 HTML 元素和属性、一系列具体的最佳实践和微格式。

下面从富含语义的 HTML 的简要介绍开始，所涉及的内容包括 HTML 规范历史以及它与 CSS 和 JavaScript 的关系。

富含语义的 HTML 介绍

富含语义的 HTML（Semantic HTML）指的是编写 HTML 文档的一种很好的实践。这种实践要求在编写 HTML 文档时，尽可能的使用 HTML 规范中定义的与文档结构相关的富含语义的元素，而避免使用与展示相关的元素，将展示相关的内容交给 CSS 去处理。通过应用这种实践，可以将 HTML 文档的结构与展示分离，使两者达到松散耦合。这种松散耦合带来的好处是使得结构和展示可以分别独立变化，不会杂糅在一起。当只需要修改 Web 应用的外观时，理想情况下，Web 应用的 HTML 文档都不需要修改，只需要修改 CSS 文件即可。

Ajax 应用的流行，从一个方面推动了这种实践的流行。目前的 Web 2.0 应用都要求快速上线，并且以渐进的方式不断推出新功能，即所谓的“永远 beta 版（perpetual beta）”。这种需求对于 Web 应用的架构有比较高的要求。只有在各个部分松散耦合的情况下，快速添加新功能或改进已有功能才是可能的。富含语义的 HTML 的实践促进了 Web 应用的松散耦合，因此越来越被广大 Web 开发人员所接受。另外，HTML 语言自身的演化发展，也从一个侧面反映出了这个趋势。下面将从简要介绍 HTML 语言的历史开始，并介绍富含语义的 HTML 与 CSS 和 Ajax 应用的关系。

HTML 的历史

HTML 语言从诞生之日起一直在不断演化，其规范的版本也有很多。HTML 的发展历史可以简要地概括如下。可以在 参考资料 中找到这些规范的链接。

HTML 最初的草案

HTML 最早使用在欧洲核子能研究机构中，用来方便研究人员使用和共享文档。在 1991 年出现的关于 HTML 的最早的说明中，HTML 中共包含 22 个元素，其中的 13 个保留到了 HTML 4 中。由于 HTML 最初是用来描述科学文档的，这 22 个元素基本都是用来描述文档的结构的。比如 <a> 用来表示文档之间的超链接；<p> 表示文档中的段落；<h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 用来表示不同级别的标题。

HTML 2.0

HTML 2.0 规范在 1995 年 11 月发布为 RFC 1866。2.0 规范中增加了 <img> 和与表单提交相关的 <form>、<input> 和 <select> 等元素。

HTML 3.2

HTML 3.2 规范在 1997 年 1 月作为 W3C 的推荐规范发布。正是在这个版本中，由 Netscape 和微软的 Internet Explorer 引入的很多与展示相关的元素被规范化。这些元素包括 <font>、<basefont>、<strong>、<strike>、<u>、<b> 和 <center> 等。这些元素使得 HTML 页面的结构与展示被杂糅在一起。

HTML 4.01

HTML 4.01 规范在 1999 年 12 月作为 W3C 的推荐规范发布，并于 2000 年 5 月成为国际标准。HTML 4.01 规范试图解决 HTML 3.2 规范中引入的与展示相关的元素的问题，与此同时，又需要考虑规范的向后兼容性。HTML 4.01 规范把许多与表示相关的元素标记为废弃的，不推荐使用。同时引入了三种“风格（flavor）”。在“严格（Strict）”风格中，废弃的元素是不能使用的；在“过渡性（Transitional）”风格中，废弃的元素是可以使用的；在“框架（Frameset）”风格中，只允许使用与框架相关的元素。

HTML 5

作为 HTML 规范的下一个版本，HTML 5 引入了更多富含语义的元素，如 <nav> 表示网站的导航栏，<section> 表示文档中的章节；与此同时，在 HTML 4.01 中被废弃的一些元素，如 <center> 和 <font> 等被移除了。

从上面列出的 HTML 规范的历史中可以看出，HTML 从仅包含表示文档结构的元素，到后来引入了与展示相关的元素，再到目前两者并存，以及下一个版本中展示相关的元素部分被移除。HTML 规范的发展趋势是与展示相关的元素将逐步消失。HTML 文档应该描述文档本身，而不应该描述文档如何展示给用户。HTML 规范的发展以一种螺旋式上升的方式实践着这个最初的目标。

富含语义的 HTML 与 CSS

在 HTML 中，与展示相关的元素的引入，主要是由于当时并没有好的方式来指明 HTML 文档中元素的样式。比如将一段文本用加粗或倾斜的字体来显示。在 CSS 广泛应用之前，只能通过 HTML 元素或属性来实现。由此引入了 <b> 和 <i> 这样的元素。随着 CSS 规范在浏览器中得到广泛的支持，Web 开发人员有了更好的方式来指明 HTML 文档中元素的样式。比如将一段文本加粗显示可以使用 CSS 语法 {font-weight : bold;} 来实现。正是由于 CSS 的出现与流行，富含语义的 HTML 实践才成为可能。

富含语义的 HTML 与 Ajax 应用

目前 Ajax 应用非常流行，越来越多的应用采用 Ajax 技术来提高自身的用户体验。Ajax 虽然是基于原有的 HTML、JavaScript 和 CSS 等技术，但是它重新定义了这三种技术在 Web 应用开发中的定位。一个典型的 Ajax 应用的结构如 图 1 所示。

图 1. Ajax 应用的典型结构图

在 图 1 中可以看到，Ajax 应用由三个部分组成，分别是结构、展示和行为。结构指的是应用的基本内容结构，由 HTML 来描述；展示指的是应用的外观，包括颜色、字体大小等样式，由 CSS 来描述；行为指的是应用与用户的交互，包括界面的部分刷新、处理与服务器端的交互等，由 JavaScript 来描述。在这三个部分中，由 HTML 描述的文档结构是整个 Ajax 应用的基础，CSS 通过各种选择器为文档应用样式，而 JavaScript 则通过 DOM 操作来修改文档结构。

富含语义的 HTML 为 Ajax 应用提供了描述结构的最佳方式。在开发 Ajax 应用时，从一系列富含语义的 HTML 文档出发，将为后面的开发打下良好的基础。HTML 规范中元素和属性众多，而富含语义的 HTML 的实践则推荐使用 HTML 规范中表示文档结构和富含语义的元素和属性。下面将详细介绍这些推荐使用的元素和属性，同时也会讨论那些不建议使用的与展示相关的元素和属性，并说明如何用 CSS 替换它们。

HTML 元素与属性

下面将介绍 HTML 4.01 规范中的一些重要的元素与属性。这些元素与属性大致上分成两类，一类是表示文档结构和富含语义的，是推荐使用的；另一类是与文档的展示相关的，是不推荐使用的，而应该用 CSS 来实现相应的展示效果。

文档结构和富含语义的元素

文档结构和富含语义的元素的介绍见 表 1。

表 1. 文档结构和富含语义的元素介绍

与展示相关的元素和属性

与展示相关的元素和属性的介绍见 表 2。 表 2 中给出了相应的 CSS 替代实现方式。

表 2. 展示相关的元素和属性介绍

上面介绍的这些元素和属性，为编写富含语义的 HTML 文档提供了最基础的构建元素。除此之外，在编写富含语义的 HTML 文档时，还有很多不错的最佳实践可以参考。运用这些实践，将可以从更加宏观的角度来看待富含语义的 HTML。下面将具体介绍这些实践。

最佳实践

在编写富含语义的 HTML 文档时，有一些比较好的做法可以借鉴。遵循这些做法，将帮助避免很多常见的问题。这些好的实践包括在编写 HTML 文档之前需要选用合适的 DTD，编写完成之后需要验证 HTML 文档的语法，在编写过程中需要选用适合的元素和 class 属性来表示语义等。下面将具体介绍如何在具体的 HTML 文档编写过程中应用这些最佳实践。

选用合适的 DTD

HTML 文档中的文档类型声明（Document type declaration，DTD）用来声明该文档所使用的 HTML 规范的版本。该声明可以帮助浏览器确定如何显示该文档。目前主流的 HTML 规范版本是 4.01，同时 HTML 4.01 提供三种风格，因此比较常用的 HTML 文档类型声明有 表 3 中所示的三种。

表 3. HTML 4.01 规范对应的 DTD 说明

对于富含语义的 HTML 文档来说，通常来说是不应该使用与展示相关的元素与属性的。因此，HTML 4.01 严格型的文档类型声明是最适合的。不过有些文档结构语义，只使用 HTML 4.01 严格型中规定的元素和属性的话，是无法实现的。（关于这一点的具体说明，见 绕开“灰色地带”）。综合来说，比较好的折衷方案是使用 HTML 4.01 过渡型的文档类型声明，但是在文档中避免使用废弃的元素和属性。如果可以确定 HTML 4.01 严格型中规定的元素和属性已经足够的话，使用该类型的文档类型声明是最好不过的选择。

需要说明的是，目前的浏览器都有很强的容错性和向后兼容性。因此，即便没有正确的声明文档类型，浏览器也能正确的显示。但这并不意味着可以放弃使用正确的文档类型声明。

验证你的 HTML

在选择好了文档类型声明之后，另外一个必须要做的步骤是使用 HTML 语法验证器来验证 HTML 文档。W3C 提供了一个 HTML 文档验证器。（见 参考资料 ）。该验证器可以根据 URL 来验证，也可以验证用户上传的 HTML 文件或是直接输入的 HTML 代码。该验证器会根据文档的类型声明进行校验，并给出详细的信息。可以根据验证的结果进一步的修改 HTML 文档。 图 2 中给出了对一段不符合 HTML 4.01 严格型语法的 HTML 文档进行验证的结果。

图 2. 使用 W3C HTML 语法验证器的结果

图 2 中的 HTML 文档在 <ol> 元素中使用了属性 start，因此不符合 HTML 4.01 严格型规范。如果改成 HTML 4.01 过渡型的文档类型声明就是合法的。

使用合适的元素

HTML 4.01 规范中提供了不少语义丰富的元素，应该把这些元素应用在适合其语义的地方。大多数 Web 开发人员对于常用的 HTML 元素比较熟悉，使用也较多。对于一些不太常见的元素则很少使用，而用其它元素来代替。比如 <div> 和 <span> 就在很多情况下被用来代替其它元素。虽然将 <div> 和 <span> 和 CSS 相结合，都可以达到预期的显示效果，但是这样会削弱文档本身的语义。 代码清单 1 和 清单 2 中给出两种 HTML 文档的写法。 代码清单 1 中使用 <span> 元素，并通过 class 属性为 header 来表明该 <span> 元素的语义是“标题”。这种情况下，采用 代码清单 2 中给出的做法，使用 HTML 规范提供的 <h3> 元素会更合适。因为 <h3> 本身就已经包含了“标题”的语义，就不需要再通过 class 属性来说明了。

清单 1. 错误的 HTML 元素选择

<style>
 .header {
 font-size : 1.2em;
 }
</style>	

<div class="container"/>
 <span class="header"> 标题 </span>
 <div class="content"> 内容 </div>
</div>
	

清单 2. 正确的 HTML 元素选择

<div class="container"/>
 <h3> 标题 </h3>
 <div class="content"> 内容 </div>
</div>
	

避免错误的元素使用

对于 HTML 中的元素，浏览器会有默认的展示样式。比如 <blockquote> 元素，通常来说浏览器会以缩进的方式来显示其中被引用的文本；而 <em> 元素，浏览器则会把其中的文本显示为斜体。这种默认的展示样式会造成一种错误的元素使用方式，即为了达到某种展示效果而使用该元素，而忽略元素本身的语义。比如希望将一段文本以缩进的方式显示，就使用 <blockquote> 元素，即使该段文本并非是引用自外部文档的。

这种方式的问题在于过分依赖于浏览器的默认样式而忽视元素的语义。一旦浏览器的默认样式发生变化或是被其它 CSS 样式所修改，原本预期的展示效果就无法实现。

使用富含语义的 class 属性

HTML 元素的 class 属性为使用 CSS 来修改元素的样式提供了切入点。一个好的 class 属性可以为已有的 HTML 元素增加语义。比如 <h1 class="important"> 中，<h1> 本身的语义是表示标题，而通过使用 important 这样一个 class 属性的值，进一步说明该标题是比较重要的。可以通过 CSS 为该标题添加加粗、不同的颜色等样式来突出该语义。对于类似 <div> 和 <span> 这样并没有附加语义，而只是单纯作为容器使用的 HTML 元素来说，好的 class 属性可以为其添加语义。比如 <div class="summary">，通过 class 属性就为该 <div> 添加语义，说明其表示的是一段摘要。

一个好的 class 属性值应该要说明其对应的 HTML 元素的作用，而不应该说明该元素的展现样式。由于 class 属性会在 CSS 中作为选择器来使用，因此很容易就误用一些表示展现样式的名称。比如 redTextBlueBorder 这样的名称，虽然清晰的描述了其展现样式是红色文字加上蓝色边框，但是并没有描述元素的作用，是不好的名称。如果需要对样式进行修改，比如改成蓝色文字加上红色边框，那么名称也需要相应的修改，变成 blueTextRedBorder。一个好的名称，在所描述的元素的作用没有变化时，即便展现的样式发生改变，就不需要修改。

绕开“灰色地带”

尽管推荐使用表示文档结构和富含语义的 HTML 元素和属性来编写 HTML 文档，但是在有些情况下，不得不使用与展示相关的元素和属性来完成特定的功能。这是实践富含语义的 HTML 中的“灰色地带”。下面列举几个常见的情况：

• 有序列表元素 <ol> 的属性 start 和 <li> 元素的 value 属性在 HTML 4.01 严格型文档类型声明中是被废弃的。但是这两个属性是用来控制有序列表的数字编号顺序的惟一方式。
• <iframe> 元素在 4.01 严格型文档类型声明中是不被允许的。
• <b> 和 <i> 元素虽然是与展示相关，但是在 HTML 4.01 严格型文档类型声明中仍然是合法的。
• 在很多时候，<table> 元素被用来作为布局的手段。然而从语义上来说，<table> 更适合用来显示表格型的数据。推荐的方式是使用 <div> 元素来进行页面布局。CSS 3 中引入了复杂的网格布局。

正是由于上面所述这些“灰色地带”的存在，通常来说，目前最适用的是 HTML 4.01 过渡型文档类型声明。

之前关于富含语义的 HTML 的介绍，都是从基本元素和属性的角度出发，下面将介绍富含语义的 HTML 组件：微格式。

微格式（Microformat）

微格式（Microformat）是满足特定模式的有组织的 HTML 片断，用来描述网页中富含语义的实体。在编写 HTML 文档时，经常会需要包含某些富含语义的实体，包括人、事件、评论、地理位置和个人简历等。比如在个人博客中经常会包括作者本人的基本信息。微格式定义了描述这些实体的 HTML 应该具有的格式。通过使用微格式，这些实体的语义得以在 HTML 中保留。微格式是富含语义的 HTML 这一指导原则的良好实践。它将对语义的保留提升到了 HTML 片断的层次。微格式使用富含语义的 HTML 元素和 class 属性。下面通过一个实例来说明微格式的用法。

hCard 是一种用来描述人、公司、组织机构和地点的微格式。 代码清单 3 中给出了一个实例。

清单 3. hCard 微格式实例

<div class="vcard">
 <span class="fn">成富</span>
 <div class="adr">
 <span class="type">工作</span>:
 <div class="street-address">东北旺西路8号</div>
 <span class="locality">海淀区</span>,
 <span class="region">北京市</span>,
 <span class="postal-code">100193</span>
 <div class="country-name">中国</div>
 </div>
 <div class="tel">
 <span class="type">工作</span>8245xxxx
 </div>
 <div class="tel">
 <span class="type">家庭</span>138xxxxxxx
 </div>
 <div>电子邮件:
 <span class="email">chengfbj@cn.ibm.com</span>
 </div>
</div>
	

在 代码清单 3 中，微格式 hCard 使用了 <div> 和 <span> 这两个通用 HTML 元素，加上富含语义的 street-address、postal-code、country-name、tel 和 email 等 class 属性。 代码清单 3 中的 HTML 片断清晰的表达了“人”这样一个实体的语义。Web 开发人员可以使用不同的样式来显示这样一个实体。

在编写 HTML 文档时，如果需要描述的实体已经有相关的微格式的规范，应该按照相应的规范来使用合适的 HTML 元素和 class 属性。更多微格式的信息见 参考资料 。

至此，关于富含语义的 HTML 的主要内容就已经介绍完毕，下面介绍一些相关的其它话题。

其它话题

下面介绍与富含语义的 HTML 相关的其它话题，主要与可访问性（Accessibility）相关。

可访问性

可访问性指的是网页内容应该可以被残障人士所访问。对于失明的用户来说，他需要使用屏幕阅读器这样的设备来读取网页的内容。富含语义的 HTML 文档可以有效的为屏幕阅读器提供语义信息，从而帮助它更好的将文档的含义传达给用户。由于文档的展示对用户是不可见的，因此文档的语义就显得尤为重要。

比如，在文档中经常需要对一段文字进行着重强调。如果使用与展示相关的元素，可以写成 <b>Text</b>。通常来说，浏览器会用粗体来显示这段文本，从而传达给用户强调的语义。但是对于屏幕阅读器来说，它并不能很好的理解 <b> 所要传达的语义，可能是表示强调，也可能只是用粗体显示的普通文本。但是使用 <strong>Text</strong> 的话就不一样了，因为 <strong> 元素本身就包含了强调的语义，屏幕阅读器可以采用合适的方式来传达出来，比如加重朗读时的语调等。

富含语义的 HTML 文档也能更好的被搜索引擎所理解。

总结

本文详细介绍了目前 Ajax 应用开发中的一个最佳实践“富含语义的 HTML”，即 HTML 文档应该只表示 Web 应用的结构，而不是展示。在编写 HTML 文档的时候，应该尽量使用 HTML 规范中表示文档结构和富含语义的元素和属性。本文中介绍了 HTML 规范的历史以及规范中哪些元素和属性是推荐使用的。与此同时，还给出了一系列编写 HTML 文档时的最佳实践。最后，介绍了微格式以及可访问性相关的内容。

声明

本人所发表的内容仅为个人观点，不代表 IBM 公司立场、战略和观点。

参考资料

学习

• HTML 最初的草案

• HTML 2.0 规范

• HTML 3.2 规范

• HTML 4.01 规范

• HTML 5 规范

• 在 微格式网站 中查看已有的微格式规范
• developerWorks Web development
  专区 ：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。

• developerWorks 技术活动 和 网络广播 ：随时关注 developerWorks 技术活动和网络广播。

获得产品和技术

• 使用 W3C HTML 语法验证器

讨论

• 查看“ 编写 HTML 文档 ”讨论组中的最新内容

关于作者

Related Posts / 相关文章

• 语义化的HTML结构到底有何好处?
• HTML5新功能演示
• [下载] Dojo 中文手册《实战Dojo工具包》PDF
• Zen Coding资源更新
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript

图像倒影效果
下载地址：http://www.netzgesta.de/reflex/reflex.zip

图片发光效果
下载地址：http://www.netzgesta.de/glossy/glossy.zip

Related Posts / 相关文章

• JavaScript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）
• [英,转]45个新鲜有用的JS与jQuery技术和工具
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript
• JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度
• JavaScript MD5 加密

我就开始到网上到处去搜索,下面是自己找到的两个JS代码.前个是用原javacript写的,后个是用框架jquery的一个插件写的.感觉都不错.(其实这些JS都不是真正的能对图片进行切割,他们只是提供一个从那点开始切割,要切割的长各宽.把这些参数传到后台由后台语言去操作.)也不多说了,下面就给出这两下例子吧.

这个是cloudgamer博客的,这个解释的很清楚

http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html

下面的一个是用jquery框架的一个插件.这个是英语的,不过还好啦,看jquery代码应该还是没有问题的

http://odyniec.net/projects/imgareaselect/

Other Posts / 其他文章

• 关于 iPhone 网页开发
• [转]如何做好一份前端工程师的简历？
• Base64 javascript encode decode 另一种不错的方法
• 分享21Andy的CentOS的repo
• CSS阴影详解