多多28 评分插件：点亮您的互动体验！

快速上手指南

使用多多28评分插件，您需要：

jQuery 1.6.0 或更新版本。
jquery.rateit.min.js, rateit.css, delete.gif, star.gif - 下载多多28评分插件
在页面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-* 屬性等）

伺服器回應：

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

多多28科技有限公司为用户提供稳定、有趣、可持续的综合娱乐互动平台。电话：+86 176 3047 6191邮箱：[email protected]

多多28 评分插件：点亮您的互动体验！

快速上手指南

更多进阶设置

趣味互动演示

1a) 基本用法

1a) 基本用法（內嵌元素）

2a) 進階增強（使用 HTML5 range 輸入類型）

2b) 進階增強（使用 select）

3) 唯讀與預設值

4) 更多設定

5) JavaScript 互動

6) JavaScript 呼叫

7a) 風格設定

內嵌程式碼

樣式表

7b) 更多風格設定

內嵌程式碼

樣式表

8) RTL 支援

9) 設定與取得值

10) 工具提示範例

基本數字

自訂文字

11) AJAX 範例

產品 X (id: 312)

產品 Y (id: 423)

產品 Z (id: 653)

客戶端

伺服器 (ASPX) 極簡化

12) 調整大小