2010»八月»雅虎的用户界面博客（YUIBlog）

YUI的剧院-道格拉斯克罗克福德：“克罗克福德的JavaScript -场景6：Loopage”（52分钟）

2010年8月30日，由埃里克·米拉利亚在下午03:47 | 8评论 | 锐剧院

Douglas Crockford的最新的“分期付款对JavaScript克罗克福德 “系列讲座，他在其中涵盖的事件循环中的作用和服务器端JavaScript的重要性，现在是视频。 Flash视频嵌入，或可以下载的高清视频（480P〜370MB）。从第一个五年讲座的视频是JavaScript网页上提供克罗克福德。

其他最近的锐剧院视频：

尼古拉斯Zakas和维克多Tsaran：雅虎网页无障碍 -尼古拉斯Zakas，雅虎网页的主要开发商，和维克多Tsaran的，雅虎的高级无障碍经理，讨论的策略和方法，使大多数访问的网站之一世界完全访问。谈话发生在2010年6月BayJax Meetup网站雅虎的地方。
丹尼斯Lembree：JavaScript访问丹尼斯- Lembree，无障碍专家和创作者AccessibleTwitter讨论JS启用站点访问的挑战。谈话发生在2010年6月BayJax Meetup网站雅虎的地方。
瑞安达尔：介绍到NodeJS -瑞安达尔的NodeJS的创造者，介绍了有关性能的改进和新的建筑项目和会谈。谈话发生在2010年5月BayJax Meetup网站雅虎的地方。
以利亚因苏亚：jsdom：DOM的CommonJS的实现 -以利亚因苏亚介绍了2010年5月BayJax Meetup网站雅虎在服务器端执行的JavaScript DOM。
尼古拉斯Zakas，斯托扬STEFANOV，罗斯Harmes，朱利安勒孔特，马特·斯威尼：高性能的JavaScript - O'Reilly的高性能JavaScript的讨论先进的JavaScript和DOM脚本在2010年4月BayJax Meetup网站雅虎优化五大贡献者。

订阅锐戏剧：

共享和扩展：书签del.icio.us Digg它！ | reddit！

推出将雪人：锐简单的测试界面

里德·伯克，2010年8月25日下午03:16 | 发展 | 16评论

测试JavaScript是Web开发的一个重要，但往往被忽视的部分。原因之一是因为网络的发展，意味着针对多个浏览器。锐目前分为11个不同的环境，享受我们最大的支持水平。此外，我们也像移动设备上新兴的X级环境测试锐。当你有这么多不同的环境，支持，这是诱人的，只挑重要的一对夫妇与当地发展和最好的希望。

在YUI的，我们使用硒和 Hudson运行YUI的测试各种浏览器为基础的单元测试和系统配置为我们的持续集成策略的一部分经营。这是伟大的赶上其余一个复杂的软件栈结合你的工作所产生的问题。它是有代价的：像这些CI工具是复杂的设置和维护。在任何情况下，他们不帮你，而你正在开发的代码和测试，然后再提交。

今天，我很高兴能释放0.1.0 雪人，一个实验性的命令行工具，旨在让跨浏览器测试之前你提交的代码行。

雪人会自动启动浏览器的JavaScript单元测试和报告的结果，无需离开你的终端。它的使用非常简单：只需运行yeti test.html test.html YUI的测试，基于测试的结果。您可以通过一次测试多个组件的多个HTML文件。

 $ yeti dom/tests/dom.html attribute/tests/attribute.html json/tests/json.html ✔ DOM Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 20 passed 0 failed ✔ Y.JSON (JavaScript implementation) from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 68 passed 0 failed ✔ Attribute Unit Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 106 passed 0 failed 194 tests passed! (3217ms)

实权的雪人，同时在多个浏览器上运行测试。虽然雪人可以打开您的电脑上测试一个由一，雪人允许你运行在任何浏览器上的任何测试设备，所有在同一时间。

如果不带参数运行的雪人，它会启动一个Web服务器，您可以访问http://localhost:8000 。然后，您可以指向从这一点上运行，URL和每个测试您的网络浏览器或设备，将访问测试页上的所有浏览器执行。

结合优秀localtunnel时，您和其他计算机之间的防火墙是痛苦少。如果你不与敏感信息的工作，这是一个简单的方法，使你的雪人互联网：

 $ localtunnel 8000 Port 8000 is now publicly accessible from http://example.localtunnel.com

然后，您可以访问该URL访问雪人，并开始运行测试：

这是蜂窝设备尤其有用：可以使用，而无需得到您的设备上为您的开发计算机网络运营商的互联网连接。

雪人的目的是使JavaScript的测试变得更容易，但它远远没有完成。（不要轻易采取0.1.0的版本号）。雪人假设你使用YUI的测试，只在Mac OS X测试，可能无法使用某些种类的测试场景。尽管有这些缺点，夜啼一直如此有用的内部，我们不想再等下去，分享它与锐界。

获取代码

雪人是在GitHub上，并根据提供YUI的BSD许可证。

安装

雪人完全是写在JavaScript和运行顶级NodeJS 。如果你已经是一个NodeJS和故宫用户的安装非常简单：

 $ npm install yeti@stable

如果你还没有安装的NodeJS和故宫，你在最近的Mac，你仍然可以安装了一个方便的安装雪人。

下载雪人0.1.0安装 2.7 MB
需要Mac OS X的10.6和了英特尔酷睿2处理器或更高

如果您的计算机安装的要求不符合，你仍然可以使用雪人，如果你能够安装故宫。更多的安装和使用说明可在雪人的README 。

欢迎您的参与

雪人是第一个项目，我们在推出锐实验室，伞类，在我们新的思路和举措将初具规模。正因为如此，雪人提供不支持我们的其他项目的同一水平。我们仍然鼓励你问的问题，并在反馈给雪人的论坛，并希望雪人使测试方便和乐趣。如果没有，请告诉我们，提交一个bug，或考虑到雪人。

快乐测试！

作者简介：里德·伯克（ @里德）是YUI团队的最新成员。 他爱恶劣的冰雪怪兽和JavaScript。

共享和扩展：书签del.icio.us Digg它！ | reddit！

开发一个访问星级部件

8月24日，二零一零年在由蒂埃里Koblentz上午9:00 | 辅助功能，发展 | 18评论

有急事？跳转到演示页。

许多电子商务网站，社交网络服务，网上社区，包括评级或评估功能。征求市民的意见，甚至已经成为一种商业模式，现在有致力于评级产品，服务，企业，更多的网站。

最常见的界面，用于显示票是“星级评等系统”，在其中一个点的特定号码（往往表示为星）分配给每个评审项目。我们发现许多网站上的这个模型，从亚马逊到喊叫。

图A星评级从亚马逊和 Yelp为例。

图A显示，这两个可视化界面类似，但什么使这两个解决方案， 有趣的是他们的标记基地。一个依靠<map> ，其他<img> 。

你也许会认为大多数评级系统将根据语义，并在许多用户代理“业务”被证明是一些标记 - 也就是说，评级系统将根据一套特定的HTML元素和属性，其中一个适用于行为通过JS和CSS样式。这将使意义，但它是远离真理。当谈到标记，作者尝试只是一切：

<a> ，
<img> ，
<span> ，
<li> ，
<map> ，
<div> ，
<input> ，
和更多...

微格式的情况下

呈现出一些基于图像的技术，以纪念评级之前，我觉得它是值得一提的一个基本的和简单的方法（从微格式），使用字符：

 <abbr class="rating" title="3 stars">***</abbr>

赞成: 它是直接和语义。; 标记是最小的。; 该方法不依赖于CSS。; 该方法不依赖图像上。; 有没有HTTP请求。
缺点: 这是不可能的代表一半值（即3.5分）; “工程”只用星号（“星级酒店”）。; 屏幕阅读器，默认情况下，不扩大缩写（在这种情况下，这可能不是一个大不了）。

注：我用“*”，而不是★（★），因为屏幕阅读器（至少JAWS和NVDA ）似乎忽略HTML实体。

标记来显示图像的评级

当它来显示图像，有很多选择。

每等级一个图像

使用一个单一的形象：

 <img src="4stars.png" alt="4 out of five">

一星级
两颗星
三星级
四星级
五颗星

赞成: 每一个形象评价是直接和语义。; 该方法不依赖于CSS。; 最小的标记。
缺点: 它创建的HTTP请求，因为有许多不同的图像。; 性能问题上，它可以是一个维护的噩梦，作为作家有更多的资产（创建，推到一个CDN，修改网站的颜色变化等）的图像处理。; 文本的选择是没有可能在Opera（至少在9.52版），作为替代文本将被忽略

一个形象单位

WHATWG的工作草案：

 <img alt="4 out of 5" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="no-star.png">

一星级
两颗星
三星级
四星级
五颗星

赞成: 使用img每两个等级的元素减少HTTP请求的数量。; 该方法不依赖于CSS。
缺点: 在Opera中，当图像被禁用， 替代文本是不可选的，（在小屏幕视图），文字与边界，这使得它不太清晰的呈现。

请注意，这是一个有争议的工作草案 。在我看来，这种方法是不能接受的，因为备用文本不准确，简明地描述图像。此外，如果这种方法的基础上，这些图像代表的内容，那么为什么没有离开他们中的一些alt文本？

上才算是Ajax ，例如，笔者使用替代文字，与每一个单一的形象 ，这使得很多的意义，如果他认为每一个内容 ：

 <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="-" src="star0.png"/> <img [snip] alt="-" src="star0.png"/>

在任何情况下，使用尽可能多的图像，有星与使用单一元素（ img或别的东西）具有促进表决机制的主要优势-用户选择的明星之一，投他的票。因此，我们应该牢记这一点......

一个精灵的背景图像

下列技术是一种由最初实施的战略，开发适应雅虎音乐：

标记

 <span class="rating r1 stars">1 of 5</span> <span class="rating r2 stars">2 of 5</span> <span class="rating r3 stars">3 of 5</span> <span class="rating r4 stars">4 of 5</span> <span class="rating r5 stars">5 of 5</span>

的CSS

 .stars { background: transparent url(img/sprite.png) no-repeat; } .rating { font-size: 0; height: 19px; overflow: hidden; vertical-align: middle; width: 96px; display: block; } .r1 { background-position: -385px 0; } .r2 { background-position: -288px 0; } .r3 { background-position: -192px 0; } .r4 { background-position: -96px 0; }

一星级: 1 5
两颗星: 2 5
三星级: 3 5
四星级: 4 5
五颗星: 5

赞成: 这种方法需要一个HTTP请求，因为它依赖一个单一的精灵形象。; 最小的“脚印”。
缺点: 图像关闭内容没有透露。; 没有显示页面时，打印（打印样式可以照顾这个问题）。; 在Opera中，高对比度的样式，使所有的星星消失;也是如此，在高对比度模式优化。; 文本的选择是可能的，但不是很明显（通过突出）。

标记中的一个精灵

这种方法的基础上的提示方法，使用精灵的形象，作为一个<img>元素，而不是一个背景图像：

标记

 <span title="1 of 5" class="rating r1"><img width="0" height="1" src="sprite.gif" alt=""/>1 out of 5</span> <span title="2 of 5" class="rating r2"><img width="0" height="1" src="sprite.gif" alt=""/>2 out of 5</span> <span title="3 of 5" class="rating r3"><img width="0" height="1" src="sprite.gif" alt=""/>3 out of 5</span> <span title="4 of 5" class="rating r4"><img width="0" height="1" src="sprite.gif" alt=""/>4 out of 5</span> <span title="5 of 5" class="rating r5"><img width="0" height="1" src="sprite.gif" alt=""/>5 out of 5</span>

的CSS

 .rating { position: relative; height: 1.6em; width: 8.1em; overflow: hidden; vertical-align: middle; display: block; } .rating img { position: absolute; width: 40.5em; height: 1.55em; top: 0; border: 1px solid #fff; } .r1 img { right: 0; } .r2 img { left: -24.4em; } .r3 img { left: -16.2em; } .r4 img { left: -8.1em; }

一星级: 1超过了5
两颗星: 2超过了5
三星级: 3 5
四星级: 4 5
五颗星: 5 5

赞成: 这种方法需要一个HTTP请求。; 这种技术是上述四种方法只有一个，揭示内容时，Firefox用户选择“隐藏图片”或“使图像无形”（从开发者的工具栏）。; 当图像不可用时出现一个红色的“X”，因为它是唯一的最高评级（即5 5），而不是在每一个的情况下与其他解决方案，依靠img元素。
缺点: 显示的图像是关于CSS的依赖。

值得注意的是，不像其他的图片替换技术，此方法允许：

图像缩放文字大小设置而异。
要打印的图像。
替代文字可以很容易地选择突出（火狐）的整体形象出现。
图像不会消失在高对比度的设置/样式。
在Opera的替代文字选择（当图像被禁用）。
无国界的替代文字在Opera的小屏幕视图。

投票的标记

与原生机制开始

要投票，我们需要一个低级别的表决机制，允许简单的用户选择和提交。对于这一点，我们可以依靠使用标签和控制表单：

标记

 <fieldset> <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5">1/5</label> <label><input type="radio" name="movie" value="2_5">2/5</label> <label><input type="radio" name="movie" value="3_5">3/5</label> <label><input type="radio" name="movie" value="4_5">4/5</label> <label><input type="radio" name="movie" value="5_5">5/5</label> </fieldset>

导致

增加休息和空白

为更好的可读性，我们添加了<br>和空白。

标记

 <fieldset> 
 <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

导致

引进sprite图像标记

此解决方案，我们使用的是比小精灵在上面的例子之一。现在是两个单星（“上”和“关闭”）组成。

我们把img标签内的元素。我们假设他们将不支持CSS有没有价值，因此我们“隐藏”，他们通过其设置的具体尺寸width和height属性。请注意，使用这两个属性0会显示在某些UA小号的破碎的形象。

 <form ...> <fieldset> <legend>Rating</legend> <label class="one" title="1 out of 5"><input name="LandOf" value="1" checked="checked" type="radio"> 1/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="two" title="2 out of 5"><input name="LandOf" value="2" type="radio"> 2/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="three" title="3 out of 5"><input name="LandOf" value="3" type="radio"> 3/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="four" title="4 out of 5"><input name="LandOf" value="4" type="radio"> 4/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="five" title="5 out of 5"><input name="LandOf" value="5" type="radio"> 5/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> </fieldset> </form>

请注意，与上面的标记，我们可以期望（在大多数浏览器）领域选择通过标签选择。

考虑无障碍

不幸的是，是，此标记创建屏幕阅读器，至少在两个问题： JAWS“声和NVDA （看到这些错误的测试用例）。问题是关系到使用的title属性和替代文本为空字符串。

不要混淆屏幕阅读器用户的解决方法是使用“明星”作为替代文字（ alt ），并使用JavaScript插入title上悬停。

更好的标记

 <fieldset> 
 <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

导致

样式

通过CSS图像尺寸

我们使用em ，使图像的增长或缩小字体大小。

标记

不变

的CSS

 img { width:2.8em; height:1.4em; }

导致

正如你已经可以看到，在图像上点击选择相应的单选按钮。没有脚本隐式标签生成这种行为（IE除外）的需要。

从流中删除图像

样式label position:relative和与图像position:absolute top / left值是足够的，隐藏和标签内的文本input 。

标记

不变

的CSS

 标签{ 
   位置：亲属;
 } 
图{
  宽度：2.8em;
  身高：1.4em;
   位置：绝对; 
   顶：0; 
   左：0; 
 }

导致

显示每一个标签的明星

我们风格的标签，所以它的尺寸匹配一颗星的高度和宽度。

标记

不变

的CSS

 label { position:relative;  身高：1.4em;
 宽度：1.4em;
 溢出：隐藏;
 显示：块; 
 }
图{
  宽度：2.8em;
  身高：1.4em;
  位置：绝对;
  顶：0;
  左：0;
 }

导致

横向显示的星

我们消除了br和浮动标签。

标记

不变

的CSS

  BR {
 显示：无;
 } 
标签{
  位置：亲属;
  身高：1.4em;
  宽度：1.4em;
  溢出：隐藏;
   显示：块; 
   浮动：左; 
 }
图{
  宽度：2.8em;
  身高：1.4em;
  位置：绝对;
  顶：0;
  左：0;
 }

导致

显示sprite图像上的评级

设置“5 3的”评级，我们申请的最后两个标签的同一类。这个类将转移标签内的形象地位。

标记

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label  类=“no_star”   > <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="4_5"> 4 / 5 </标签>参考
 <标签  类=“no_star”   > <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="5_5"> 5 / 5 </标签>
 </的fieldset>

的CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0; }   。no_star IMG {
 左：-1.4em;
 }

导致

不单独依靠图像来显示信息

重要的是要提供替代星显示图像的情况下不可。这是因为标签和单选按钮的样式是在彼此顶部。一个简单的解决方法是将input和文字关屏（即使用text-indent:-999em ）和背景颜色的标签。

标记

没有变化

的CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;  背景：水鸭;
 保证金右：1px的;
 的text-indent：-999em; 
 }
图{
  宽度：2.8em;
  身高：1.4em;
  位置：绝对;
  顶：0;
  左：0;
 }
  。no_star {
 背景：＃CCC;
 } 
 。no_star IMG {
  左：-1.4em;
 }

注意：

text-indent还修复了安起图像的跳跃每次控件获得焦点。
右边距，以确保背景颜色创建正方形和矩形（它会发生共享相同的背景颜色的相邻标签）。

导致

画龙点睛

我们用伪类:hover创造一些过渡效果，
我们隐藏的fieldset边境，
我们隐藏的传说，
我们的风格的光标。

标记

不变

的CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; background:teal; margin-right:1px; text-indent:-999em; } input { position:absolute; left:-999em; top:.5em; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0;  光标：指针; 
 }
 。no_star {
  背景：＃CCC;
 }
 。no_star IMG {
  左：-1.4em;
 }
 标签：悬停{
 透明度：0.5;
 过滤器：α（不透明度= 50）;
 }
的fieldset {
 边界：0;
 }
传说{
 的text-indent：-999em;
 }

注： label:hover是由IE6和Opera中通过图像的背景颜色出血忽略。在演示页，而不是使用opacity ，我使用一个不同的精灵，显示四个州。

导致

未经允许用户交互显示收视率

我们可以通过添加disabled和checked在适当的属性input领域的收视率“只读” 。

标记

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"  禁用   > 1/5 </标签> <br>
   <label>的<img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <INPUT TYPE =“无线电”名称=“电影”值=“2_5”  禁用   > 2/5 </标签> <br>
   <label>的<img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <INPUT TYPE =“无线电”名称=“电影”值=“3_5”检查=“  检查   “> 3/5 </标签> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <INPUT TYPE =“无线电”名称=“电影”的价值=“4_5”  禁用   > 4/5 </标签> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <INPUT TYPE =“无线电”名称=“电影”的价值=“5_5”  禁用   > 5/5 </标签>
 </的fieldset>

的CSS

使用规则:hover已被删除

H4>结果

给予更多的思考过程

在这一点上，它是可能的，以投票不支持脚本，但有远见的用户没有对他们的选择的线索。因此，我们使用JavaScript来：

反馈给用户，关于他的选择，
键盘用户的视觉线索，而他们通过单选按钮导航。

同时，我们考虑使用脚本插入title属性，将创建“提示”，当用户悬停在标签/分的优势。

由于缺乏反馈就没有JavaScript的选择，我们的风格标签和表单控制才会有脚本支持。做，所以我们使用JavaScript的html元素设置上的一个标志，然后我们创建包含该钩子上的后裔选择为基础的规则。如果缺少标志，这条规则不适用的元素都不会风格。

这是演示页，最终产品。看到这个解决方案的行为如何根据不同的设置，你可能想用您最喜爱的开发工具，以增加文字大小，打破图像路径，禁用JavaScript，把CSS关闭，更多...

收官

“可接受”的解决方案要求，以确定用户需求，用户代理的特殊性，用户代理设置多 - 这意味着广泛的测试。

在这个过程中，用户的反馈是至关重要的，因为按照最佳做法并不总是一件肯定的事。例如，前面提到的，没有设置标签内的图像alt属性的值似乎是安全的事情，但事实证明，它创建的问题至少有两个屏幕阅读（见测试案例）。

此外，辅助设备的用户的反馈，可以忽略一些验证错误消息-作为一个Firefox的辅助工具栏报告（根据以http://bestpractices.cita.uiuc.edu/html/nav/form/ ）。

这里的目标是解决一切，虽然。能够投票没有指点设备是我的工作重点之一，但提高的解决方案时，图像将被禁用在Opera的外观和感觉，是不是我认为重要的东西。

这个“征途”最有趣的部分是在不同条件下使许多用户访问的解决方案，解决问题，如：

图像关闭
JavaScript的关闭，
CSS的关闭，
结合上述。

它也不错，要知道，这种技术依赖img元素，而不是背景图片，这使得明星：

根据用户的设置调整自己，
显示在高对比度模式，
默认印（不同的背景图像）。

所有这一切都在不牺牲性能的情况下，作为该解决方案依赖于这个单一的sprite：

晚发现

最近，我发现亚马逊已经在投票页面建立的系统。为他们提供不同的解决方案，取决于脚本支持，这是很有趣的。如果有脚本支持，他们使用图像<map>有趣的方法，如果没有脚本的支持，他们使用单选按钮 。在这两种情况下，解决的办法是使用键盘的用户访问，这有助于最大限度地获得一个特点，就是一个核心亚马逊平台的区别。

请注意，他们不使用JavaScript与图像取代单选按钮<map> ;相反，他们使用noscript表格标记中包含单选按钮元素。

“开箱”的解决方案

Dreamweaver的^®: 敏捷评分小窗口
锐: 锐星评价脚本; 锐星评价脚本
JQuery的: 半星级插件; jQuery的Ajax的评估者; 简单的星级评定系统; PHP，MySQL和jQuery的5星级评级制度
WordPress的: 广东星WordPress的评价体系; GD星级; 星级的评论
闪光: 5星级系统组件
混杂。: 应该如何星级; 星夜部件2

特别感谢

维克多Tsaran和托德的宝贵意见Kloots特别感谢。

共享和扩展：书签del.icio.us Digg它！ | reddit！

宣布YUI的3.1.2：所有YUI 3.1.x/3.2.0pr1用户的关键安全更新

8月19日下午12:35由Eric米拉利亚| 开发 | 评论关闭

YUI团队锐3.1.2发布。 这是YUI的3.1.x和3.2.0pr1所有用户的重要安全更新 。如果你正在主持锐3.1.X或3.2.0pr1您的网站上，或者如果您使用锐3.1.x/3.2.0pr1 IO的跨域功能，你会受到影响。

作为后备浏览器不支持原生的XDR的XDR YUI的IO工具实现一个Flash运输。在我们实施锐版本3.1.X和3.2.0pr1的的闪存后备错误允许的io.swf文件向不安全操作是否从雅虎CDN或从您自己的服务器担任。针对此问题的补救措施是双重的：

如果您已经部署了完整的YUI 3.1.x/3.2.0pr1建立目录到您的服务器，取代build/io/io.swf在与受影响的版本包括锐3.1.2版本build/io/io.swf 。 这样做，您是否正在使用IO实用程序或它的耐药特征。
如果您使用的是IO的XDR功能，升级到了3.1.2版本的io-swf解决安全问题。主机版本3.1.2 io.swf自己的服务器上（此文件不能安全运行从CDN，它不包括加3.1.2）。如果你已经绘制io.swf http://yui.yahooapis.com ，从您对该域名crossdomain.xml文件。

有关此问题的更多细节，可以发现在IO实用程序的文档。

共享和扩展：书签del.icio.us Digg它！ | reddit！

锐2的DataTable提供光滑的内联编辑。当disableBtns列配置，编辑简单的值，如字符串或数字感觉就像Excel中。然而，经验不能作为一个桌面应用程序的响应，因为每一个变化，通常需要一个XHR调用服务器来存储（或拒绝）新的价值。如果用户需要改变许多显示的值，它可以是一个缓慢而令人沮丧的经历。为了解决这个问题，我开发QuickEditDataTable。这延伸的DataTable添加快速编辑模式，允许所有可编辑的值要改变一个批量操作：

（点击玩这个例子的截图。）

概观

进入快速编辑模式，调用startQuickEdit() 退出快速编辑模式，调用cancelQuickEdit()

这是您的，改变cancelQuickEdit()调用之前保存的责任。为了简化这一任务，QuickEditDataTable提供getQuickEditChanges() 这将返回一个对象数组，每行一个。每个对象都包含在该行已变更，关闭id列的键入值。例如，如果表中有4列（标题，作者，年份，数量），用户只更改一行的数量为20，那么该行的对象将是{quantity:20} 其他值将被忽略。

，QuickEditDataTable可以轻松地扩展YAHOO.widget.ScrollingDataTable如果你需要的功能。如果您需要，只需一个源文件的副本，并改变基类。

组态

快速编辑模式的状态，在编辑列的单元格的格式化交换出去，产生特殊的格式化input ， textarea ，或select元素替换。只有列quickEdit配置将编辑。配置选项是：

copyDown

If true, the top cell in the column will have a button to copy the value down to the rest of the rows.

formatter

The cell formatter which will render an appropriate form field: <input type=”text”>, <textarea>, or <select>. By default, the cell formatter YAHOO.widget.QuickEditDataTable.textQuickEditFormatter is used for all cells to produce input elements. To get a textarea element, configure a column to use YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter instead. You can also write a custom quick edit formatter — see below.

validation

Validation configuration for every field in the column.

css

CSS classes encoding basic validation rules:

yiv-required: Value must not be empty.
yiv-length:[x,y]: String must be at least x characters and at most y characters. At least one of x and y must be specified.
yiv-integer:[x,y]: The integer value must be at least x and at most y . x and y are both optional.
yiv-decimal:[x,y]: The decimal value must be at least x and at most y . Exponents are not allowed. x and y are both optional.

fn

A function that will be called with the DataTable as its scope and the cell's form element as the argument. Return true if the value is valid. Otherwise, call this.displayQuickEditMessage(...) to display an error and then return false.

msg

A map of types to messages that will be displayed when a basic or regex validation rule fails. The valid types are: required , min_length , max_length , integer , decimal , and regex . There is no default for type regex , so you must specify a message if you configure a regex validation. The default error messages for the other types are stored in YAHOO.widget.QuickEditDataTable.Strings and can be overridden and/or localized.

regex

Regular expression that the value must satisfy in order to be considered valid.

Sometimes, a non-editable column must be rendered differently during Quick Edit mode. The best example is a column containing a link, since navigating away from the page while in Quick Edit mode can be disastrous. To remove the link during Quick Edit, configure qeFormatter for the column to be YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter . For email addresses, use YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter . You can also write you own custom, read-only formatter. Simply follow the normal rules for constructing a DataTable cell formatter.

Custom Quick Edit Formatters

To write a custom cell formatter for QuickEdit mode, you must structure the function as follows:

function myQuickEditFormatter(el, oRecord, oColumn, oData) {
  var markup =
    '<input type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/>' +
    YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
    el.innerHTML = lang.substitute(markup, {
      key: oColumn.key,
      yiv: oColumn.quickEdit.validation ? (oColumn.quickEdit.validation.css || '') : ''
     }）;
    el.firstChild.value = extractMyEditableValue(oData);
    YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply(this, arguments);
 };

You can use textarea or select instead of input , but you can only create a single field.

extractMyEditableValue() does not have to be a separate function nor must it be limited to using only oData . The work should normally be done inline in the formatter function, but the name of the sample function makes the point clear.

About the author: John Lindal ( @jafl5272 on Twitter) is one of the lead engineers constructing the foundation on which Yahoo! APT是建成。 此前，他曾在雅虎出版商网络。

共享和扩展：书签del.icio.us Digg它！ | reddit！

Using YUI 2 on the DuckDuckGo Search Engine

August 19, 2010 at 5:41 am by Gabriel Weinberg | In YUI Implementations | 2 Comments

DuckDuckGo is a search engine that uses YUI extensively. Here's what it uses in particular:

ImageLoader . Matt Mlinac's YUI 2 ImageLoader was the first thing I implemented and what originally hooked me on YUI for this project. DuckDuckGo has favicons next to results and often has “Zero-click Info” above results that usually includes an image . I didn't want these images to compete with the results when loading, as getting results as fast as possible is the ultimate goal.
The ImageLoader Utility handles this well by loading the images after the page load. DDG also auto-loads the next page of results when you scroll down. Sometimes the favicons icons are therefore hidden, and with ImageLoader their load is delayed (sometimes indefinitely) until necessary. To accomplish this, there is a different image group per (internal) page, each with its own custom trigger.
```
 div.event=new YAHOO.util.CustomEvent('it');
    var ig1=new YAHOO.util.ImageLoader.group(div,'click');
    ig1.addCustomTrigger(div.event);
    div.ig = ig1;
```
Cookie . DuckDuckGo has a lot of settings , which are stored via cookies and alternately via URL params . When cookies are used, I use Nicholas Zakas's YUI 2 Cookie Utility to easily get and set the values.
```
 YAHOO.util.Cookie.set(cookie, value, { expires: new Date("January 12, 2025") });
  x=ki||YAHOO.util.Cookie.get("i"); 
```
StyleSheet . Some DDG settings change the look and feel of the site. These changes are actually accomplished after page load via Luke Smith's YUI 2 StyleSheet Utility . Some of these changes are straightforward and I can just use the setStyle Dom function .
```
 YAHOO.util.Dom.setStyle('b2','display','block'); 
```
Others require actual class changes, which I use the utility to do.
```
 YAHOO.util.StyleSheet('DDG').set('.ci', {display: "block"}).
            set('.cid', {display: "block"}).
            set('.ci2', {display: "block"}).
            enable(); 
```
Dom . I also use some functions in Matt Sweeney's base YUI 2 Dom component . I referenced setStyle above, and I also use the related getStyle , addClass and removeClass functions. In addition, I find the getViewportHeight , getViewportWidth , getX and getY functions to be incredibly useful to make things work cross-browser, and now on mobile screens as well.
KeyListener . DDG has a bunch of keyboard shortcuts that let you navigate results without the mouse. I use the YUI 2 KeyListener component to enable these shortcuts.
```
 kl14 = new YAHOO.util.KeyListener(document, { keys:[70] }, { fn:not } );kl14.enable(); 
```
AutoComplete . I'm currently working on adding search suggestions to the search engine, and will be using Jenny Donnelly's YUI 2 AutoComplete component for the front-end. I understand that AutoComplete is getting introduced in YUI 3 soon. Everything else I use has already been introduced in YUI 3, though I still use YUI 2. However, I will be exploring the migration to YUI 3 soon.

About the author: Gabriel Weinberg is the founder of the DuckDuckGo search engine, based out of Valley Forge, PA. Gabriel has been a startup founder for over ten years, and his last company was sold in 2006. Gabriel holds degrees from MIT in Physics and the Technology and Policy Program.

共享和扩展：书签del.icio.us Digg它！ | reddit！

Implementing YUI on the Assembla.com Agile Planner

August 18, 2010 at 6:35 am by Joachim Larsen | In YUI Implementations | Comments Off

Fast and fun – that was the user requirement for the new Assembla.com Agile Planner – an AJAX interface for adding development tasks, building story/feature outlines, and scheduling them into releases. We were lucky to have YUI 3 to make it fast and fun to implement as well.

I had used YUI 2 for a number of prior projects and I had been impressed by the engineering of the UI components and the underlying library infrastructure. I wanted to learn more about YUI 3, with its compact syntax and deeper focus on DOM manipulation and CSS3-style selectors. This project, with a low dependence on 'prebuilt widgets,' was a perfect opportunity to get my feet wet with YUI 3. The facilities for 'large app' implementation via custom modules and integration with YUI loader made it a natural choice.

The Agile Planner supports a number of drag and drop user interactions with multiple interaction groups and context based behaviors. At the same time, it handles a complex set of interactions with the server, including merging in new data from the server, and propagating changes to the server.

We improved on the existing Planner which was based on Rails handlers and Prototype.js. YUI's sandbox philosophy and strong OOP facilities made coexisting with Prototype.js a breeze.

We used a large number of YUI components, including:

Async-Queue to offer a responsive experience on a page that can involve 1000+ simultaneous tickets
Drag and Drop with interaction groups.
IO as a connection manager to queue and massage server interaction.
Event-delegate to allow simply hydrating html templates and forgetting about them.
Event-key for keyboard interaction and navigation.
Collection for giving us a consistent implementation experience across browsers.
Cookie for easy short-term UI persistence.
Profiler to find the biggest speed gains
YUI Doc to leave information for the rest of the team

Working with YUI 3 on an app like this has been fun, and I am looking forward to hearing what our users will urge us to do next!

About the author: Joachim Larsen is a frontend engineer with Assembla.com.

共享和扩展：书签del.icio.us Digg它！ | reddit！

支持WordPress的关于雅虎虚拟主机。

其他最近的锐剧院视频：

订阅锐戏剧：

获取代码

安装

欢迎您的参与

微格式的情况下

标记来显示图像的评级

每等级一个图像

一个形象单位

一个精灵的背景图像

标记

的CSS

标记中的一个精灵

标记

的CSS

投票的标记

与原生机制开始

标记

导致

增加休息和空白

标记

导致

引进sprite图像标记

考虑无障碍

更好的标记

导致

样式

通过CSS图像尺寸

标记

的CSS

导致

从流中删除图像

标记

的CSS

导致

显示每一个标签的明星

标记

的CSS

导致

横向显示的星

标记

的CSS

导致

显示sprite图像上的评级

标记

的CSS

导致

不单独依靠图像来显示信息

标记

的CSS

导致

画龙点睛

标记

的CSS

导致

未经允许用户交互显示收视率

标记

的CSS

给予更多的思考过程

收官

晚发现

“开箱”的解决方案

特别感谢

概观

组态

Custom Quick Edit Formatters

YUI库在Twitter

翻译

辛迪加

最近的帖子

YUI库

档案：

网志串连

评论政策

成为一个Yahoo!

元：