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日上午9時，2010由蒂埃里Koblentz上午| 輔助功能，發展 | 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日，2010在12:35下午由埃里克·米拉利亞| 開發 | 評論關閉

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() 這將返回一個對象數組，每行一個。 Each object contains only the values that were changed in that row, keyed off the column id's. For example, if the table has 4 columns (title, author, year, quantity), and the user only changed the quantity in one row to 20, then the object for that row would be {quantity:20} . The other values would be omitted.

QuickEditDataTable can easily extend YAHOO.widget.ScrollingDataTable if you need that functionality. If you need this, simply make a copy of the source file and change the base class.

組態

Quick Edit is a modal state in which the cell formatters for editable columns are swapped out and replaced with special formatters that generate input , textarea , or select elements. Only columns that have quickEdit configuration will be editable. The configuration options are:

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 is built. Previously, he worked on the Yahoo! Publisher Network.

共享和擴展：書籤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的關於雅虎 Web Hosting .

其他最近的銳劇院視頻：

訂閱銳戲劇：

獲取代碼

安裝

歡迎您的參與

微格式的情況下

標記來顯示圖像的評級

每等級一個圖像

一個形象單位

一個精靈的背景圖像

標記

的CSS

標記中的一個精靈

標記

的CSS

投票的標記

與原生機制開始

標記

導致

增加休息和空白

標記

導致

引進sprite圖像標記

考慮無障礙

更好的標記

導致

樣式

通過CSS圖像尺寸

標記

的CSS

導致

從流中刪除圖像

標記

的CSS

導致

顯示每一個標籤的明星

標記

的CSS

導致

橫向顯示的星

標記

的CSS

導致

顯示sprite圖像上的評級

標記

的CSS

導致

不單獨依靠圖像來顯示信息

標記

的CSS

導致

畫龍點睛

標記

的CSS

導致

未經允許用戶交互顯示收視率

標記

的CSS

給予更多的思考過程

收官

晚發現

“開箱”的解決方案

特別感謝

概觀

組態

Custom Quick Edit Formatters

YUI庫在Twitter

翻譯

Syndicate

最近的帖子

YUI Library

檔案：

網志串連

Comment Policy

成為一個Yahoo!

元：