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 – 前途一片光明

div {
   background: rgba(200, 54, 54, 0.5);
}

它允许我们为元素添加透明色。或许我们习惯了使用”opacity“，它很简单易用，但是，opacity会使所有的子元素都变成透明的，而且很难去解决这个问题。

通过RGBa，我们可以将一个元素设置为透明，而不会影响其子元素：

声明一个保留颜色

并非所有的浏览器支持RGBa，所以如果允许的话，可以声明一个保留色彩。这个色彩应该是可靠的——所有的浏览器都支持。不声明就意味着，在不支持RGBa的浏览器里面，没有使用颜色。

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}</code>

不过，这条退路在某些古董级浏览器中依然无效。

RGBa的浏览器支持情况

对IE浏览器的更好的退路

因为IE浏览器支持条件注释，我们可以抛弃RGB并使用IE的一个私有CSS滤镜来实现同样的效果：

<!--[if IE]>
   <style type="text/css">
   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 
    </style>
<![endif]-->

RGBa颜色可以用于border，不过，不同的浏览器对于border的RGBa支持不太一样，不过唯一的不同是，FF在border的拐角处会出现叠加，比如透明度是0.4，那么在FF中，四个角的透明度会变成0.8，而支持RGBa的非FF浏览器不会出现这种情况。

转载：css-tricks

Related Posts / 相关文章

• HTML5新功能演示
• 用CSS修正一切：20多个常见Bug及其修正方法
• [转]CSS文字排版终极指南
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript
• 研究腾讯Qzone圆角头像CSS有感

这是一个HTML5新功能的演示文档，几乎包括HTML5所有激动人心的新功能的简介和DEMO。
IE系列浏览器无法浏览，firefox、opera等浏览器只能使用部分功能，如果想100%演示成功，请使用最新版的“谷歌浏览器（Google Chrome）”，建议使用最新版。

中文原版：http://directguo.com/html5/
中文镜像：http://ioio.name/html5/html5_zh_CN.html
英文原版：http://apirocks.com/html5/html5.html
英文镜像：http://ioio.name/html5/html5.html

Related Posts / 相关文章

• 揭秘HTML5和CSS3
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript
• 转牛X无敌！！！Zen Coding: 一种快速编写HTML/CSS代码的方法
• 关于一些浏览器的的Hack
• CSS中的RGBa色彩

毫无疑问，一个合理的布局和结构是最好选择。这不仅是因为你的布局在不同浏览器见表现不同，而且还因为的CSS有很多方法来布局你的每个元素。今天，我们希望与你们分享一些避免在创建CSS布局时容易遇到的错误的技巧。

IE Bug修正

1- Bug修正：IE双倍Margin bug

- 元素是浮动的-并且给元素一个和浮动同一个方向的margin-结果显示两倍的指定margin大小。这个方法非常简单。所有您需要做的就是添加一个display: inline规则到你的浮动元素。所以，你只是把例如这样的代码：

#content {
    float: left;
    width: 500px;
    padding: 10px 15px;
    margin-left: 20px; }

改为如下代码 :

#content {
    float: left;
    width: 500px;
    padding: 10px 15px;
    margin-left: 20px;
    display:inline;
}

2- 克服盒模型hack

- 如果你想给任一div指定宽度，不要指定padding或margin。只要另建一个内部(嵌套)的没有宽度的div并设定其padding和margin来替代。所以，不要这样做：

#main-div{
width: 150px;
border: 5px;
padding: 20px;
}

这样做:

#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}

3-IE无视min-height属性

- min-height属性在firefox下表现很好但是IE却无视了它，IE的height就像FF的min-height.注意：IE7没有这个bug。

/* 对主流浏览器 */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* 对IE浏览器 */
/*\*/
* html .container {
height: 8em;
}
/**/

4-?Min-Width for IE

-一个IE的min-width缺陷的修正。

块级元素居中

5-块级元素居中

- 有很多种方法可以使块级元素居中；选择哪种方法取决于你的百分比大小设置或使用更绝对的数值。

整个页面内容居中：

body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}

6-使用CSS垂直对齐

- 如果你想知道怎么才能正确的实现垂直对齐，只需要简单的为你的文本指定和容器等高的line-height。

#wrapper {
	width:530px;
	height:25px;
	background:url(container.gif) no-repeat left top;
	padding:0px 10px;
}
#wrapper p {
	line-height:25px;
}

栏目问题

7-?你的CSS栏目被搞乱的最大原因

-一个容易理解的就如何解决普遍的CSS栏目的问题的有用的图解和代码片断的文章.

8-?扩大的盒子Bug

- 当您尝试创建一个两列浮动的布局， IE浏览器将创建一个“浮动下降” ，这是由于在一个固定宽度的浮动DIV内存在超出宽度的内容，这些内容必须融入布局中的一个特定位置。这片文章详述了几种可能的替代方法。

CSS 定位

9-?理解CSS定位Part 1

-一系列很有趣的文章，这些文章不仅包括定位，还包括包括定义布局的属性，比如display和float ，和对CSS3 布局模型的一个预览。第一部分将会介绍定位和display属性。Part1,?Part2,?Part3 将会带给你对定位的更深的理解.

10-?relative和absolute有什么不同?

- 对于刚开始使用CSS的人来说，无论相对行为还是绝对定位都是非常令人沮丧的。这个问题的答案将会让你的迷惑变的清晰些。

#redSquare
{
position: relative;
bottom: 40px;
right: 40px;
}

显示这样:

11-HangTab(固定标签)

- 在浏览器边缘创建一个固定的标签(即使内容居中)。查看Panic’s website for their software Coda.

#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}

CSS 浮动概念

12-?CSS 浮动原理：你应该知道的事情

-?SmashingMagazine 浏览几十个相关文章，并选择了在用float开发基于CSS的布局时你应该牢记的最重要的东西。

<div> <!-- float container -->
<div style="float:left; width:30%;"><p>Some content</p></div>
<p>Text not inside the float</p>
<div style="clear:both;"></div>
</div>

13-?Floatutorial: CSS float的简单教程

- Floatutorial带你查看浮动元素的基本原理，例如图片，下拉菜单，下一个和返回按钮，相册，内部列表和多列布局。

14-?清除浮动- 正确的方法

- 清除浮动可以说是CSS开发中的一个最令人沮丧的方面，最佳方法之一是在您的网站上使用EasyClearing .

/* EasyClearing http://www.positioniseverything.net/easyclearing.html */
#container:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#container
{display: inline-block;}

/* Hides from IE-mac \*/
* html #container
{height: 1%;}

#container
{display: block;}
/* End hide from IE-mac */

更简单的圆角实现

15-?迈克询问CSS圆角建议

- “最简单的方法是使用一个大的gif图片，然后我将给我的盒子编码”

<div>
  <p>beautifully-encapsulated paragraph</p>
  <div></div>
</div>

“并给它添加背景”

.roundBox {
  background:transparent url(roundBox.gif) no-repeat top left;
  width:340px;
  padding:20px;
}
.roundBox .boxBottom {
  background:white url(roundBox.gif) no-repeat bottom left;
  font-size:1px;
  line-height:1px;
  height:14px;
  margin:0 -20px -20px -20px;
}

16-3 个简单的步骤实现圆角

- Alen Grakalic研究了通过三个步骤来编写一个固定宽度的圆角布局. 他也创建了一个demo .

CSS表单问题

17-?创建伟大的网页表单的技巧

- Cris Coyer和我们分享了浮动标签，:focus伪类，使用建议等技巧。他同样建立了又好又简单的联系表单, 他首先将它发布在这里.

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
}

18-?简洁而纯粹的CSS表单设计

- 对于的CSS爱好者来说，本教程表述了一个如何设计纯粹的CSS表单而不使用HTML表格的建议。你可以在这里抓取代码.

19-用javascript自动填充文本输入框

- 有时候，我们需要向用户解释他们理应填写文本输入框。当没有标签可以显示，一个通用的解决方案是，把一些占位符文本放在文本框中，并让它当标签来用。本教程介绍了一种很好的解决办法，并启用JavaScript ，label 元素是隐藏的，而且input 元素的title 属性值被复制到value 属性. 如果已禁用JavaScript ，标签显示在被留空的文字输入框的上面。一个简单的演示，您可以在这里看到演示.

值得检验的css技巧

20- 跨浏览器的用背景图的水平线

- 你或许想使用一个定制的图片来创建一个跨浏览器的水平线作为内容的分隔。

div.hr {
background: #fff url(myhrimg.gif) no-repeat scroll center;
height: 10px
}
div.hr hr {
display: none
}

<div><hr /></div>

本文翻译自：http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
转载请注明来源，谢谢

Related Posts / 相关文章

• 【译】10个惊人的CSS hack和技术 (10 astonishing CSS hacks and techniques)
• 关于一些浏览器的的Hack
• CSS中的RGBa色彩
• HTML5新功能演示
• [转]CSS文字排版终极指南

Google 的使命是 Web，在 Google 眼中，未来的一切应用都将 Web 化，一直以来，Google 为 Web 开发与设计者推出了大量免费工具，让他们更好地创建，维护，改善他们的 Web 站点，这些工具包含了开发，分析，维护，修补等等用途，本文将介绍15款这样的工具。

1. Google Chrome Developer Tools

这是 Google Chrome 中类似 Firefox Firebug 以及 Web Developer Toolbar 的一个扩展，用于调试你的网页，包含一个 DOM 探测器，一个 JavaScript 调试台，可以设置执行断点和跟踪，一个类似 YSlow 的执行分析器。
2. Webmaster Tools

一个对网站拥有者来说非常有用的程序，可以帮助你从各个角度改善自己的站点。可以发现站点中的恶意程序，发现搜索引擎爬虫遇到的错误，可以发现你的 HTML 代码中需要改进的部分。还可以帮你发现你的站点中最热门的网页，并发现你站点中的错误链接。
3. Google Web Toolkit

Google Web Tootlkit （GWT）是一个 Web 开发基础框架，为开发者提供了一些基础类库，GWT 同 Google 的其它产品，如 AdWords，FeedBurner，Google Ajax 类库等紧密集成，这里有一个 Google Docs 教程。
4. Google Code Search

帮助开发者搜索代码，支持正则表达式搜索，或在一个高级搜索界面中，很直观地搜索那些可能会让你事半功倍的公共代码。
5. Page Speed

Google 现在已经将网站加载速度算到搜索排名算法中，Page Speed 可以帮助你分析你的网站性能，基于 Google Web 性能最佳实践。
6. Browser Size

该工具帮你分析，你的网页在不同浏览器，不同浏览尺寸下的显示状况，非常适合看看自己的网页在不滚动的情况下，在各种浏览尺寸下显示到哪里。
7. Google Ajax Libraries API

Google Ajax Libraries API 包含多种流行的 JavaScript 库（目前有10种），并可以从 Google 高性能的 CDN 网络中加载，既节省了你的服务器带宽，同时，由于用户可能已经在别的网站加载过这个库，因此可以显著加快这些库的加载速度。
8. Google Website Optimizer

接着这个工具，你可以对自己的网站进行 A/B 测试，并对网站进行优化。
9. Sites

顾名思义，Google Sites 可以帮你创建一个托管的网站，可以将包括 YouTube，幻灯，Gmail 日历，Google Gear 小程序，Google Docs 一类的应用集成其中。如果将站点设置为不公开，你可以将这个工具用于个人文档工具。
10. Speed Tracer

以可视化方式，帮你分析你的 Web 程序中各种元素的加载或运行速度与实践，这里有一些关于这个工具的用例。
11. Project Hosting

这是 Google Code 项目的一部分，可以帮你托管你的开源项目，Web 开发与设计者还可以在这里找到大量现成的项目以供借鉴或套用。
12. Google App Engine

这是一个可用来托管自己的 Web 程序的地方，甚至可以使用自己的域名。这里有一个教程，讲解如何使用 Google App Engine 来创建一个留言本。Google App Engine 中已经托管了大量的 Web 程序。
13. Google Chart Tools

Google Chart Tools 可以帮助你将数据转化为图表，并嵌入自己的网页，这些图表还拥有交互功能，可以钻入，或通过鼠标盘旋获取详细信息，还可以实现动画图表。
14. Closure Tools

Closure Tools 是 Google Labs 的一个开发套件，包含3个工具，闭包编译器（一个 JavaScript 优化器），闭包函数库（用于 Ajax 程序开发）以及一个用于动态生成 HTML 的闭包模板。
15. Google Analytics

经典的 Google 流量分析统计工具。

来源：Six Revisions - The Top 15 Google Products for People Who Build Websites

Related Posts / 相关文章

• 揭开iPhone版Google，Gmail，Google Reader神秘面纱的方法

所谓离线，指的是用户能够在没有网络的环境下也可以进行工作，并且当网络环境恢复后，之前的操作能够自动地同步到服务器上。目前，离线应用可以分为两种，一种是桌面应用，其中以 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 / 其他文章

• 关于CVS和SVN
• PHP5: __autoload 自动加载对象
• [转]Zend Framework 1.8.1 Start
• What’s new for Meeplace 2.8
• Galleriffic-jQuery相片展示插件

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

我们有时候希望回车键敲在文本框（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 / 其他文章

• php格式化数字：位数不足前面加0补足
• IE6元素float的hack
• PHP 中 magic_quotes_gpc 和 magic_quotes_runtime 的区别，作用和用法
• 注册漏嘴网
• 我的电脑情缘（流水帐）

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控件大全（新增、修改、删除、选中、清空、判断存在等）

Firefox版本

该插件基于Firebug，所以安装前请确保已经安装Firebug。

一些主要特性；

• 即时编辑——即改即现，把Firefox打造成超强网页编辑器；
• 与Fiddler一起使用，快速调试线上网页，HTML代码快速生成；
• 刷新CSS，DOM不刷新；
• 禁用单个CSS样式；
• CSS Sprites位置快速设定；
• 保持Session不过期；
• 导出任意节点为PNG图片；

现在就安装（从火狐官方下载1.6版）

下载1.7版本低安装 via ued.alipay.com

推荐查看作者的博客，里面有几篇介绍该插件的文章。你也可以查看Alipay的UED的介绍。

IE版

非常不错的是，该插件同时也提供了一个IE版本，安装很方便就是下载文件：http://nihaoku.cn/Linr/LinrIEGallery.reg 下载下来后运行reg文件，右键菜单就会出现“点亮网页”选项，重启IE内核的浏览器，然后右键选择“点亮网页”即可使用。

推荐查看IE版本的官方介绍。

另外作者在博客中透露Chrome版本也在开发中，很快就会面世，让我们一起期待吧。

查看点亮网页+Fiddler的视频演示
查看LinrLightWeb(Firefox Add-on)功能浏览
下载观看点亮网页操作CSS Sprite的动画

Related Posts / 相关文章

• CSS半透明度设置归纳总结[Firefox,IE,Chrome,Safari]
• 关于一些浏览器的的Hack
• 几款IE的调试工具
• 为网页开发者准备的13个Google Chrome浏览器扩展
• 20个Web设计师必要的Firefox插件

Font属性

CSS提供了font属性，它允许我们在我们的页面中调整文字。这是一系列的关于语法和如何使用CSS调整文字的概述。

Font-size

使用font-size可以修改你的文字的大小。

1
2
3

font-size: 1.2em;
font-size: 12px;
font-size: 10pt;

预览

1. 文字大小为1.2em.
2. 文字大小为12px.
3. 文字大小为10pt.

PS:关于font-size，推荐一下码头写的《http://www.css88.com/archives/821》

Font-weight

该属性用来改变你的文字的粗细(比如bold, bolder)

1
2
3
4

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;

预览

1. font-weight设置为normal
2. font-weight设置为bold
3. font-weight设置为bolder
4. font-weight设置为lighter

font-weight属性还可以使用100,200,300,400,500,600,700,800,900等数字值，数字越大，文字越粗。400等效于normal，700等效于bold。

Text-transform

text-transform属性允许你应用uppercase(大写), lowercase(小写), 以及capitalize(首字母大写)等效果到你的文字。当然，该属性不能用于中文。

1
2
3
4

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: inherit;

预览

1. Capitalizes the first letter in every word
2. Allows your html to be lower case the converts it all to uppercase characters
3. ALLOWS YOUR HTML TO BE UPPERCASE THEN CONVERTS IT TO LOWERCASE, THIS WAS TYPED IN ALLCAPS
4. inherits the text-transform property from its parent element

Text-decoration

text-transform属性允许你使用一些文字修饰，比如下划线(underline)、上划线(overline)、删除线(line-through)以及文字闪动(blink)。

1
2
3
4
5

text-decoration: normal;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;

预览

1. text-decoration设置为normal
2. text-decoration设置为underline
3. text-decoration设置为overline
4. text-decoration设置为line-through
5. text-decoration设置为blink (只有Firefox 和Opera 支持)

Font-Variant

font-variant属性允许你制作小型大写字母效果，也就是将小写字母变成大写并减小字体型号

1
2
3

font-variant: normal;
font-variant: small-caps;
font-variant: inherit;

预览

1. Font Variant 设置为 normal
2. Font Variant 设置为 small-caps
3. Font variant 设置为 inherit

Letter-Spacing 和 word-spacing

这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白，而word-spacing添加每个单词之间的空白。请注意，word-spacing对中文无效。

1
2
3

letter-spacing: normal;
letter-spacing: 2px;
letter-spacing: inherit;

预览

1. Letter spacing 设置为 normal
2. Letter spacing 设置为 2px
3. Letter spacing设置为 inherit

font缩写

上面的font属性可以缩写，这样可以大大的提高你的css的效率。

1

font:font-style font-variant font-weight font-size[/line-height] font-family

请注意上面的缩写的书写顺序。另外，如果这里不设置line-height，元素的line-height将会被设置为默认的1，而不会从父级元素或body元素继承。使用缩写的时候，font-size和font-family是必须的，其它几项可根据情况不写。

制作有吸引力的段落

对于更有吸引力的段落排版，可以采用Robert Bringhurst的方法，它约定：用你的文字大小乘以30就可以得到段落的宽度。

比如如果你的文字大小是12px，用30乘以它，也就是360px，这样每行大约可以呈现65个英文字符。

不正确的段落大小：

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

正确的段落大小

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Line-height示例

行高用来限定每行文字之间的空白大小。一个经验之谈就是让行高比你的字体大6-7px。

比如，如果你的文字大小是12px，加上6px就是你的行高，也就是18px。

不正确的Line-Height

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

正确的Line-Height

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

PS:关于line-height的设置，推荐一下码头写的《line-height的继承问题》

清晰的强调文字

下划线应该只用于文字链接，而斜体是一个更清晰的可选方案.

不正确的例子

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

正确的例子

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

first-letter与first-line

顾名思义，first-letter就是第一个字母，first-line是第一行文字，它们是少有的被所有主流浏览器支持的CSS 2.1 伪元素，你可以为它们定义任意样式。

示例代码

1
2
3

#demo5{ width:400px;}
#demo5:first-letter{ font-size:32px;color:green}
#demo5:first-line{color:red;}

前瞻 – CSS3

已经有一部分很棒的CSS3特性可以用到你的设计中了。当然这些中的一部分新属性还不能用于IE，但是你或许了解这对IE来说是常事儿，所以你不妨试试。

@Font-face

@font-face允许你上次一个字体文件到你的网站服务器并将其引入到你的外部CSS文件中，然后就可以将它应用到你的网站的任何文字上。

这是处理文字的最大的功能，但是随之而来的是它的负面效果。由于版权问题，只有少数的字体“被允许”使用。这些字体也就是CSS3安全就在这里里面提到的。当然，对于中文字体来说，除了版权问题，还有网速的问题，一般中文字体动辄几MB的大小，字体文件下载到浏览器就要几分钟，这对于用户来说是不划算的。

使用@font-face

在这个例子中我在我的网站的根目录下放了一个font文件夹，然后将需要用到的字体放入该文件夹。你首先需要声明@font-face 属性以导入你的字体文件，然后使用该字体名称来控制其它元素的字体。

1
2
3
4
5
6
7

/* 声明字体 */
@font-face {
src:(font/diavlo.otf)
}
/* 将改字体应用到一个元素 */
h1 {font-family: diavlo, Arial;
}

PS:关于页面的嵌入字体，推荐阅读《如何在网页设计中使用个性化字体》

Text-Shadow

text-shadow属性赶走了用Photoshop为某些元素制作下拉阴影的需求，并给你提供动态的阴影控制。当然，该属性IE并不支持。

示例标题

1
2
3
4
5
6

p {
font-size: 2em;
font-weight: bold;
color: #777;
text-shadow: 1px 1px 1px #222;
}

示例标题2

1

p {text-shadow: 2px 2px 2px #222;}

示例标题3

1

p {text-shadow: 1px 1px 5px #FFF;}

PS：呃，其实前端观察的文章标题和章节的二级标题都用了text-shadow，而且还是用了更漂亮的RGBa颜色。关于CSS阴影，强烈推荐阅读《CSS阴影详解》

挑战

本文中提到的这些技术都只是一个入门指南。试着采用并实现你喜欢的技术到你的设计中。排版可能是一个网站中最重要的部分，请不要无视它。

PS:本文在原文的基础上，补充了少量内容，比如first-letter和first-line部分——神飞

关于原作者

Shane Jeffers是Three Styles的创办者和作者。他对设计趋势和教程有独特的喜好。你可以通过这个联系页面和他联系到他或者在twitter上关注他 @ThreeStyles

译自：The Ultimate Guide to CSS Typography
中文：CSS文字排版终极指南

Related Posts / 相关文章

• CSS中的RGBa色彩
• HTML5新功能演示
• 用CSS修正一切：20多个常见Bug及其修正方法
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript
• 研究腾讯Qzone圆角头像CSS有感

下面是是从前端复制过来的Zen Coding的资源链接

1. zen coding前些天升级到了0.6版本，新增了几项小功能，这里不再赘述，感兴趣的同学可以更新自己用的相应的插件；
2. zen coding官方有个速查手册(PDF)，很全面，严重推荐；
3. zen coding刚刚发布了 notepad++插件；
4. 这里有个非官方的VIM插件：http://github.com/mattn/zencoding-vim (多谢 @kejunz 的分享)
5. 使用UltraEdit的同学可以看一下 @ytzong写的《在UlrtraEdit中配置Zen Coding》教程；
6. 使用EditPlus的同学可以看一下这个《zencoding(HTML) for EditPlus v1.0》
7. zen coding的dreamweaver插件安装教程http://www.qianduan.net/zen-coding-for-dreamweaver-plug-in-tutorial.html:

Related Posts / 相关文章

• HTML5新功能演示
• 【好书PDF】：Building iPhone Apps with HTML, CSS, and JavaScript
• 揭秘HTML5和CSS3
• 转牛X无敌！！！Zen Coding: 一种快速编写HTML/CSS代码的方法
• 【转】使用 Dojo 的 Ajax 应用开发进阶教程 : 富含语义的 HTML

点击属性值直接修改就可以及时预览。toggle rule on和toggle rule off按钮可以启用或禁用某个属性。

事实上，现在支持这些CSS3属性的浏览器大都没有完全的支持W3C标准属性，而是采用自己的私有属性，这显然增加了开发的复杂度，也给将来的维护带来一些不确定性。不过貌似chrome dev版开始支持原生的border-radius了。

点击进入：http://css3please.com/

Related Posts / 相关文章

• 关于几种文本替换技术－CSS3, sIFR, Typeface.js, cufon
• 揭秘HTML5和CSS3
• 来用实用的CSS3来制作你的酷炫按钮吧
• CSS 3 – 前途一片光明

出版商: 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

介绍几个IE下的调试工具，需穿墙下载。
Companion.JS 这是一个IE下的JS调试工具，就像Firebug

http://www.my-debugbar.com/wiki/CompanionJS/Installing

DebugBar 这是IE的一个工具条，可以显示DOM，HTTP请求等

http://www.debugbar.com/

IETester 多窗口，多版本的IE

http://www.my-debugbar.com/wiki/IETester/HomePage

还是那一句：I hate IE !!!

Related Posts / 相关文章

• Xdebug for php 一个实用的PHP调试扩展
• “点亮网页”：一个实用的Firefox和IE插件
• CSS在Internet Explorer 6, 7 和8中的差别
• CSS半透明度设置归纳总结[Firefox,IE,Chrome,Safari]
• 关于一些浏览器的的Hack

注意：如果你在下载Chrome扩展时遇到问题，请打开C:Windows\System32\drivers\etc下的host文件，在其中添加一行：74.125.47.139 clients2.google.com 即可。

下 面就是13个你会觉得有用的Chrome浏览器扩展。

拾色器

拾色器可以让你获取任何颜色的Hex和RGB值！你也可以调整 颜色的色调，饱和度和颜色平衡。

Firebug精简版

Firebug精简版是针对开发的一款工具，它可以让你编辑，调试和监视网页页面的CSS，HTML，以及JavaScript内容。

域名注册查看器

这款 扩展可以查看某个域名是否可以购买。如果你可以直接通过工具条查到信息，那你还有必要另外登录专门的页面去查看吗？

Aviary 截屏扩展

Aviary 截屏扩展可以让你对任何页面进行截图，并通过Aviary.com的网页应用直接在浏览器中对图片进行编辑。另外，它也提供便利方式帮助你访问 Aviary 的网站和上面的工具

Lorem Ipsum测试文本生成器

Lorem Ipsum测试文本生成器不费吹灰之力就可以生成设计模型所需要的测试文本内容。

IE标签页

它会使用IE浏览器在Chrome的标签页中显示对应的页面。一些网站只能使用IE浏览器来访 问，有了这款扩展，你可以在Chrome中直接查看这些网站。对于那些想测试IE渲软引擎或是登录的网站需要使用ActiveX插件，或是想使用浏览器查 看本地文件的人来说，这款扩展会非常适合。

MeasureIt!

MeasureIt! 可以让你画出一个尺子，然后测量网页页面中任一元素的高度和宽度。

PlainClothes

这款扩展会对页面进行样式渲软，设想一下：文本是黑色的，背景是白色的，未点击链接是蓝色的，访问过的链接 是紫色的，所有的链接都有下划线。或者你把这一切改成你想要的颜色。所有的文本都以你选择的默认字体来显示（这跟通过 “选项” > “高级选项” > “更改字体和语言设置”进行修改的效果是一样的）。修改后的效果会自动应用到所有页面。

滴管

滴管和颜色拾取扩展可以让你从页面或是从高级颜色拾取面板来选取颜色。

速度追踪器

速度追踪扩展可以帮助你识别并修正网页应用的性能问题。它会对从浏览器内部获得底层数据进行可以 可视化处理，并在你网页应用程序运行的过程中进行分析。速度追踪扩展是一款Chrome浏览器扩展，可以在扩展目前支持的所有平台上运行（window和 Linux）。

Pendule

它对Chrome内 置的开发者工具进行扩充。

分辨率测试

问辨率测试扩展可以改变浏览器的尺寸，方便开发者在不同的屏幕分辨率下预览网站的实际效果。它包含一个常用分辨率的列 表，另外你也可以输入你自己需要的分辨率。

Snippy

Snippy可以让你让你抓取页面中的部分内容，然后保存下来， 供将来只用，它可以抓取丰富的内容，并保留格式。所以你用它来抓取段落。图片，链接等诸多格式的内容。

来源： webdesignledger | 作者：Henry Jones | 译者：neodreamer

Related Posts / 相关文章

• “点亮网页”：一个实用的Firefox和IE插件
• CSS半透明度设置归纳总结[Firefox,IE,Chrome,Safari]
• jQuery Rater Star Plugin投票打星星插件
• Jcrop-jQuery图片裁剪插件
• 30个Wordpress统计插件

显然这两个词还是一回事情，但要比UE迟的多。最早我在2005年底从Yahoo那边了解的，大概2006年听到同行普遍提起，同年9月份“淘宝UED”团队博客建立之后，才被大家熟知。但中国互联网公司最早成立部门研究“用户体验”的不是淘宝，而是百度，当时就叫“用户体验部”，后来才被同化的UED。大概在2005年已经有30人左右成型的团队（用户体验部总监郭宇，于2004年11月加入百度）。

首先UED这个词来自海外，但在海外除Yahoo很少有公司提起。如前文所述，老外并不习惯叫UE，所以理论上描述“用户体验设计”的缩写不应该是UED，而是UXD。确实也有UXD的说法，但只偶尔在某些海外网站上见到，同行心目中的认知程度不高。

再仔细推敲，其实不难发现，UED这个词有误。因为“用户体验设计”的说法本身有问题，UE并不能通过Design完全解决，通常Design涉及的只是UE比较表层的Experience需求。事实上，海外公司普遍都叫“UX团队”，也没有“UED团队”的说法。

而UED来到中国后，反而成为主流论调，得到广大公司的认可。可见与UE类似，UED也具有很浓的本地化色彩。在进入用户体验执行层面之后，很多同行/公司的第一反应，是要有这样的一个人，或者有这样的一个团队。因此才有了“UE工程师、UE设计师”和“UED部门”类似的称谓。

早期UED部门设立的职能职位主要有用户研究、交互设计、视觉设计，慢慢后来加入前端开发、界面设计等，某些甚至把产品经理也划入其内。具体叫法五花八门、千奇百怪。有个重要差异值得探讨，关于“工程师、设计师”的区别，根据理论推敲，既然UE是个非理性话题，不似Usability那样有逻辑可以遵循，有标准可以执行，所以我认为偏重“感性”的用户体验应该更靠近“设计”。

当然，以现在的成熟观点来看，不管叫“UE设计师”还是“UE工程师”都是不合适的，因为本身用户体验设计就不应该是一个人或一个部门的工作，而良好用户体验是产品的全方位目标。从执行层面看，用“概念”来命名职位（如可用性工程师），明确职能（如产品部门、用户体验设计部门并存），都不利于团队协作，容易造成责权不分，具体我在2008年6月所写 用户体验的误解 中大概清晰了执行思路。

http://mashable.com/2009/01/09/user-experience-design/

User experience isn’t just the responsibility of a department or a person, That compartmentalist view of UX is evidence that it is not part of the organizational culture and hints to teams not having a common goal or vision for the experience they should deliver collectively.

有趣的现象，几乎国内所有公司组建的“用户体验设计团队”都叫UED，并且已经形成固定用语，比如淘宝UED。只腾讯有个用户研究与体验设计中心(Customer Research & User Experience Design Center)，简称叫CDC。

2008年之后，应该说业内UED发展达到高峰，互联网一线公司基本都组建了自己的UED团队。除淘宝外，阿里系公司先后还有阿里巴巴UED、阿里妈妈UED、阿里软件UED、支付宝UED、中国雅虎UED、口碑UED。业内其他还有百度UED、搜狐UED、网易UED、携程UED、金蝶友商网UED等等，都在互联网上有网站（绝大多数就是个blog）宣传和公关。大有成为互联网公司标准配置的趋势，从业者也以能进入这样的“专业团队”为荣。

我更倾向于腾讯CDC这样以专业研究机构名义的命名，如此更利于用户体验“理念”的推广，而不会造成部门之间的“隔绝”。事实也证明，成立“用户体验设计”部门走业务流程，自下而上推动产品质量提升的效果并不明显。容易给其他同事造成“做用户体验是那帮人的事”的错觉。

以大家喜闻乐见的Google为例子，2005年7月Google在中国设立研发中心，也相继设置了用户体验部门。与当时的百度一样，不叫UED，而且执行体系沿袭Google风格，基于产品而不是部门（注意此区别），一般由PM+Developer+Designer组合的小团队共同向产品负责，有时会有Researcher介入。产品组同事各有所长，展开平级协作，由整个团队来推动用户体验设计。

归根结底，体制决定一切。如今类似小团队跨部门的协作方式已被国内互联网公司积极学习，并且取得了良好效果。在执行框架内，如果UED脱离产品进行盲目细分，堕落成为用户研究+交互设计+视觉设计+前端开发，我认为将很不利于产品的创新、迭代、改进。

原文：UED,UXD在中国

Related Posts / 相关文章

• 2009年淘宝UED团队招聘前端工程师

这次后台增加的功能中，有一个是能够多选/全选项目，这个已经是历史遗留问题了，在我所有开发的项目中都是用这套自己开发的后台系统，改一改就成。这次布莱恩吧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

1、HTML语法：<iframe name=”myFrame” src=”child.html”></iframe>

2、父窗口调用子窗口：myFrame.window.functionName();

3、子窗品调用父窗口：parent.functionName();

简单地说,也就是在子窗口中调用的变量或函数前加个parent. 就行

4、父窗口页面源码：

5、子窗口页面：

二、iframe 父窗口和子窗口相互的调用方法

1、IE中使用方法：

父窗口调用子窗口：iframe_ID.iframe_document_object.object_attribute = attribute_value
例子：onClick=”iframe_text.myH1.innerText=’http://www.pint.com’;”
子窗口调用父窗口：parent.parent_document_object.object_attribute = attribute_value
例子：onclick=”parent.myH1.innerText=’http://www.pint.com’;”

2、Firefox中使用方法：

上面在IE下没有问题，但在firefox下不正常。在firefox下，应该是如下调用方法：

父窗口调用子窗口：window.frames["iframe_ID"].document.getElementById(“iframe_document_object”­).object_attribute = attribute_value 
例： window.frames["iframe_text"].document.getElementById(“myH1″).innerHTML= “http://hi.wonsoft.cn“;
子窗口调用父窗口：parent.document.getElementById(“parent_document_object”).object_attribute = attribute_value 
例： parent.document.getElementById(“myH1″).innerHTML = “http://wonsoft.cn“;

3、完整的例子
test.htm

 frame_test.htm

test.htm里面firefox下访问iframe 必须用name，不能用id，所以要改为name=”iframe_test” 。(http://chenling1018.blog.163.com/blog/static/1480254200811891041694/)

三、在c#中如何动态改变iframe的src值，动态指向一个网页

1)如果是javascript脚本  
  给iframe加一个ID如<iframe   id=frmList……  
  在脚本写  
  frmList.document.location=strNewUrl   

2)如果是后台程序  
  给iframe加一个ID，再加上runat=server   如<iframe   id=frmList   runat=server   ……    
  在程序里写  
  frmList.Attributes.Add(“src”,strNewUrl);

Other Posts / 其他文章

• 研究腾讯Qzone圆角头像CSS有感
• JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度
• LazyLoad – jQuery延迟载入插件
• 中文字体的选择
• CentOS 安装 Apache 后其他机器无法访问的解决方法