雅虎用戶界面博客（YUIBlog）

在銳3圖庫：彼得Peterson的評級控件

我希望把我的腳濕定稿部件基礎設施 3.1.0銳介紹，我一直覺得最好的辦法就是寫一些代碼。 我想要的東西簡單，而我發現，在一個CSS評分實施我發現科莫多介質 。 由此產生的小部件是YUI3評級控件 （ 演示 ）。 大容量的工作的部件是由CSS處理，並很好地描述在科莫多媒體的文章。 唯一的麻煩與該部件，曾經是一個等級被選中時，到底發生了什麼，除非重新載入頁面，當失去焦點的部件，它失去了它的評級。 這是銳 3圖庫評級部件的用武之地

我的目標的項目有：

• 該代碼應為小部件正好觸及的基本知識如何創建一個銳 3部件
• widget的頁面將逐步提高
• 用戶的互動與小部件很容易捕獲
• 添加一個按鈕，清晰的評價中不存在原設計
• 該小部件應便於人們使用屏幕閱讀器
• 使實例化和互動，與死簡單的部件作為盡可能少的代碼。

這是很容易的評級部件添加到您的網頁使用銳裝載機：

銳（{
    畫廊：'畫廊 2010.04.14 - 19 - 47'
 }）。使用（'畫廊收視率'，'事件'，函數（Y）{
     / /程序邏輯 ...
 }）;

您還需要形象資產和CSS文件位於位於GitHub上或從您自己的副本的畫廊。

只需添加在源節點包含當前星級（任意數在0 - 5）或為空。

 <span id="myWidget"> 2.5 </跨度>

然後，您可以實例化的部件用下面的代碼在您的沙箱：

風險 myRating =新華評級（{srcNode：“＃MyWidget的”}）;
 myRating.render（）;

我認為，重要的是使這個小工具易於定制，所以我加了一些配置構造。 inline當設置為true，將顯示帶有文本的評級內嵌在頁面上（默認為false）。 skin可以設置為“小“，以縮小體積小部件（例如： ）

就其本身而言，收視率不小部件更多的互動成立的評級為用戶。 有一點需要更多的工作要做實際使用的價值。 我要走了，截至實施者考慮;是否添加回調到事件時會觸發評級變化，或提供一個插件來處理它的部件自動。 為了幫助您開始，每當評級改變ratingChange事件。 這是很容易設置一個事件監聽器來捕獲ratingChange事件所有的部件在頁面上。 在這個例子中，我記錄評分小窗口srcNode的ID，以前的評級，評級和新部件的任何網頁上的評價時，評價的變化：

 Y.on（“收視率：ratingChange”功能（E）{
  風險識別碼 = e.target.get（“contentBox”）。得到（“身份證”）;
   Y.log（編號 +“新值：”+ e.newVal +“是：”+ e.prevVal）;
 }）;  

該項目未來的想法：

• 逐步提高表單元素
• 請明確評級按鈕可選
• 使等級範圍配置
• 更多皮膚，並能結合的CSS精靈
• 國際

查找談話： bloglines | Technorati的

共享和擴展： 書籤和書籤 | Digg它！ | reddit！