金年会评分插件：优化用户互动体验

快速开始

集成金年会评分插件，您需要：

• jQuery 1.6.0 及以上版本。
• 核心文件：jquery.rateit.min.js, rateit.css, 以及评分图标资源。
• 将 rateit.css 引入页面头部。
• 在页面底部引入 jquery.rateit.js 脚本。

配置选项解析

核心功能展示

• 1a) 基本用法

              <div class="rateit">
              </div>
              

• 1a) 基本用法（内联元素）

              <span class="rateit">
              </span>
              

• 2a) 渐进增强（使用 HTML5 range 输入类型）

              <input type="range" min="0" max="7" value="0" step="0.5" id="backing2">
              <div class="rateit" data-rateit-backingfld="#backing2"></div>
              

  切换背景字段可见性

• 2b) 渐进增强（使用 select）

  差 好 很棒 优秀

              <select id="backing2b">
                  <option value="0">Bad</option>
                  <option value="1">OK</option>
                  <option value="2">Great</option>
                  <option value="3">Excellent</option>
              </select>
              <div class="rateit" data-rateit-backingfld="#backing2b"></div>
              

• 3) 只读和预设值

                  <div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
              

• 4) 更多设置

              <input type="range" value="4" step="0.25" id="backing4">
              <div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false"  data-rateit-ispreset="true"
                  data-rateit-min="0" data-rateit-max="10">
              </div>
  
              

• 5) JavaScript 交互

              <div class="rateit" id="rateit5" data-rateit-min="2">
              </div>
              <div>
                  <span id="value5"></span>
                  <span id="hover5"></span>
              </div>
  
              <script type="text/javascript">
                  $("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); });
                  $("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); });
                  $("#rateit5").bind('over', function (event, value) { $('#hover5').text('Hovering over: ' + value); });
              </script>            
              

• 6) JavaScript 调用

              <input type="hidden" id="backing6">
              <div id="rateit6">
              </div>
  
              <script type="text/javascript">
                  $(function () { $('#rateit6').rateit({ max: 20, step: 2, backingfld: '#backing6' }); });
              </script>
              

• 7a) 样式

  您可以通过两种方式更改插件的样式。

  • 您可以更改 star.gif 和 delete.gif 图片（以及可能在 JavaScript 文件中的默认 starwidth 和 starheight 值）。这将更改所有位置的样式。
  • 您可以通过添加一个包含几条规则的样式表来更改单个项目。
  这里我选择了第二种选项。

  内联代码

              <div class="rateit bigstars" data-rateit-starwidth="32" data-rateit-starheight="32"></div>
              

  样式表

              div.bigstars div.rateit-range
              {
                  background: url(star-white32.webp);
                  height: 32px;
              }
  
              div.bigstars div.rateit-hover
              {
                  background: url(star-gold32.webp);
              }
  
              div.bigstars div.rateit-selected
              {
                  background: url(star-red32.webp);
              }
  
              div.bigstars div.rateit-reset
              {
                  background: url(star-black32.webp);
                  width: 32px;
                  height: 32px;
              }
  
              div.bigstars div.rateit-reset:hover
              {
                  background: url(star-white32.webp);
              }
              

• 7b) 更多样式

  这里我们使用一张大图（实际上是 3 张），尺寸不同。不太好看， 但我希望它能传达信息。

  内联代码

  <div class="rateit antenna" data-rateit-starwidth="11" data-rateit-starheight="25"></div>            
              

  样式表

  div.antenna div.rateit-range
  {
      background: url(antenna-black.webp) no-repeat;
      height: 25px;
  }
  
  div.antenna div.rateit-hover
  {
      background: url(antenna-yellow.webp) no-repeat;
  }
  
  div.antenna div.rateit-selected
  {
      background: url(antenna-red.webp) no-repeat;
  }            
              

• 8) RTL 支持

  现在我们处于 RTL 模式。无需进行任何更改即可使其正常工作。

• 9) 设置和获取值

  所有属性也可以即时设置。这里有几个例子：

  获取值 设置值
  获取最大值 设置最大值
  获取最小值 设置最小值
  获取步长 设置步长
  获取只读值 切换只读
  获取预设值 切换预设
  重置

  	            <div class="rateit" id="rateit9">
                  </div>
                  <div>
                      <button onclick="alert($('#rateit9').rateit('value'))">Get value</button>
                      <button onclick="$('#rateit9').rateit('value', prompt('Input numerical value'))">Set value</button>
                  </div>
                  <div>
                      <button onclick="alert($('#rateit9').rateit('max'))">Get max value</button>
                      <button onclick="$('#rateit9').rateit('max', prompt('Input numerical value'))">Set max value</button>
                  </div>
                  <div>
                      <button onclick="alert($('#rateit9').rateit('step'))">Get step size</button>
                      <button onclick="$('#rateit9').rateit('step', prompt('Input numerical value'))">Set step size</button>
                  </div>
                  <div>
                      <button onclick="alert($('#rateit9').rateit('readonly'))">Get readonly value</button>
                      <button onclick="$('#rateit9').rateit('readonly',!$('#rateit9').rateit('readonly'))">Toggle readonly</button>
                  </div>   
                  <div>
                      <button onclick="alert($('#rateit9').rateit('ispreset'))">Get ispreset value</button>
                      <button onclick="$('#rateit9').rateit('ispreset',!$('#rateit9').rateit('ispreset'))">Toggle ispreset</button>
                  </div>   
                  <div>
                      <button onclick="$('#rateit9').rateit('reset')">Reset</button>
                  </div>                           
              

• 10) 工具提示示例

  使用工具提示很简单。只需绑定到 hover 事件，然后执行您的操作。这里显示的是 基本的工具提示，但当然您可以使用任何您想要的工具提示。

  基本数字

              <div class="rateit" id="rateit10">
              </div>
  
              <script type="text/javascript">
                  $("#rateit10").bind('over', function (event,value) { $(this).attr('title', value); });
              </script>       
              

  自定义文本

              <div class="rateit" id="rateit10b" data-rateit-step="1">
              </div>
  
              <script type="text/javascript">
                  var tooltipvalues = ['bad', 'poor', 'ok', 'good', 'super'];
                  $("#rateit10b").bind('over', function (event, value) { $(this).attr('title', tooltipvalues[value-1]); });
              </script>
              

• 11) AJAX 示例

  大多数情况下，RateIt 将通过 Ajax 使用。有不同的实现方式 （带/不带背景字段，使用 data-* 属性等）

  服务器响应：

  • 产品 X (id: 312)

    RateIt：

  • 产品 Y (id: 423)

    RateIt：

  • 产品 Z (id: 653)

    RateIt：

  客户端

             <div id="products">
                <div style="float:right; width:350px; border:1px solid #ccc; padding:1em;">
                  <strong>Server response:</strong>
                  <ul id="response">
                  
                  </ul>
                  </div>
                  <ul>
                      <li><h4>Product X (id: 312)</h4>
                      RateIt: <div data-productid="312" class="rateit"></div>
                      </li>
                      <li><h4>Product Y (id: 423)</h4>
                      RateIt: <div data-productid="423" class="rateit"></div></li>
                      <li><h4>Product Z (id: 653)</h4>
                      RateIt: <div data-productid="653" class="rateit"></div>
                      </li>
                  </ul>
                
              </div>
  
              <script type ="text/javascript">
                  //we bind only to the rateit controls within the products div
                  $('#products .rateit').bind('rated reset', function (e) {
                      var ri = $(this);
  
                      //if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to  null .
                      var value = ri.rateit('value');
                      var productID = ri.data('productid'); // if the product id was in some hidden field: ri.closest('li').find('input[name="productid"]').val()
  
                      //maybe we want to disable voting?
                      ri.rateit('readonly', true);
  
                      $.ajax({
                          url: 'rateit.aspx', //your server side script
                          data: { id: productID, value: value }, //our data
                          type: 'POST',
                          success: function (data) {
                              $('#response').append('<li>' + data + '</li>');
  
                          },
                          error: function (jxhr, msg, err) {
                              $('#response').append('<li style="color:red">' + msg + '</li>');
                          }
                      });
                  });
              </script>
  
               

  服务器 (ASPX) 超简化

  <%@ Page Language="C#" %>
  <%
      //Get value
      float value = float.Parse(Request.Form["value"]);
      int productID = int.Parse(Request.Form["id"]);
  
      Response.Write(string.Format("You voted {0} on product: {1}.<br/>Time on server: {2}", value, productID, DateTime.Now.ToString()));
  
  %>
  
  
  
               

• 12) 调整大小

  有时我们希望调整评分控件的大小（可能基于屏幕尺寸）。
  这很简单，就像
  a) 向 rateit 控件添加一个类，该类将更改背景图像。
  b) 修改 starwidth 和 starheigth 属性。
  
  备用样式取自示例 7a) 样式.

  选择一个尺寸： 正常大

            <div class="rateit" id="rateit12"></div>
            <p>Pick a size: 
              <select id="size_12">
                  <option data-class="" data-size="16" selected>normal</option>
                  <option data-class="bigstars" data-size="32">big</option>
              </select>
            </p>
  
            <script type="text/javascript">
              $('#size_12').change(function () {
                var option = $(this.options[this.selectedIndex]);
                $('#rateit12').removeClass('bigstars') //remove old class
                              .addClass(option.data('class'))  //add new class
                              .rateit('starwidth', option.data('size')) //change width
                              .rateit('starheight', option.data('size')); //change height
  
              });
          </script>