MK體育评分插件：尽显尊贵体验

核心功能亮点

集成MK體育评分插件，您将拥有：

jQuery 1.6.0 或更高版本。
jquery.rateit.min.js, rateit.css, delete.gif, star.gif - 下载MK體育评分插件
将rateit.css样式表引入页面head区域。
在页面</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) 設定和取得值

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

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

mk体育1科技有限公司电话：+86 159 8109 6461邮箱：[email protected]微信：mk1_866

MK體育评分插件：尽显尊贵体验

核心功能亮点

灵活配置，随心定制

尊享演示，一览无余

1a) 基本用法

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

2a) 漸進增強（使用 HTML5 範圍輸入類型）

2b) 漸進增強（使用下拉式選單）

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) 調整大小