MK體育評分插件：專業化您的用戶體驗

必要條件

使用MK體育評分插件，您需要：

• jQuery 1.6.0 或更高版本。
• jquery.rateit.min.js, rateit.css, delete.gif, star.gif - 下載RateIt
• 在頁面head中引入rateit.css樣式表。
• 在</body>標籤之前引入jquery.rateit.js腳本。

配置選項

功能演示

• 1a) 基本用法

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

• 1a) 基本用法 (內嵌元素)

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

• 2a) 進階增強 (使用 HTML5 範圍輸入類型)

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

  切換背景欄位可見度

• 2b) 進階增強 (使用選取器)

  差 好 很棒 極佳

              <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) 設定與取得值

  所有屬性也可以即時設定。以下是一些範例：

  取得值 設定值
  取得最大值 設定最大值
  取得最小值 設定最小值
  取得步長 設定步長
  取得唯讀值 切換唯讀
  取得 ispreset 值 切換 ispreset
  重設

  	            <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>