开云体育评分插件：赋能您的体育内容

快速启动指南

集成开云体育评分插件，您需要准备：

jQuery 1.6.0 或更新版本。
核心文件：jquery.rateit.min.js, rateit.css, 及评分图标文件。
在 HTML 文件的 `<head>` 部分引入 `rateit.css` 样式表。
在 `</body>` 标签结束前，引入 `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-* 屬性等)。

伺服器回應:

Product X (id: 312)
RateIt:
Product Y (id: 423)
RateIt:
Product 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>

电话：+86 138 5480 6520邮箱：[email protected]微信：cngmkaiyun_285广州市天河区天河北路629号

开云体育评分插件：赋能您的体育内容

快速启动指南

核心功能参数解析

多场景应用演示

1a) 基本用法

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

2a) 漸進式增強 (使用 HTML5 range 輸入類型)

2b) 漸進式增強 (使用 select)

3) 唯讀和預設值

4) 更多設定

5) JavaScript 互動

6) JavaScript 呼叫

7a) 風格設定

內嵌程式碼

樣式表

7b) 更多風格設定

內嵌程式碼

樣式表

8) RTL 支援

9) 設定和取得值

10) 工具提示範例

基本數字

自訂文字

11) AJAX 範例

Product X (id: 312)

Product Y (id: 423)

Product Z (id: 653)

用戶端

伺服器 (ASPX) 極簡化

12) 調整大小