EONSPORTS 移动端评分组件：核心功能展示

核心功能概览

集成 EONSPORTS 评分组件，您需要：

jQuery 1.6.0 或更高版本。
下载 EONSPORTS 评分组件：jquery.rateit.min.js, rateit.css, delete.gif, star.gif
在页面 <head> 区域引入 rateit.css 样式表。
在 </body> 标签前引入 jquery.rateit.js 脚本。

配置参数详解

前往 EONSPORTS 评分组件官方页以查看文件。

组件交互演示

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>

沪ICP备202479606559号

天空体育2科技有限公司电话：+86 176 4127 7423邮箱：[email protected]微信：2_736北京市朝阳区建国路941号

📍 在百度地图查看位置

EONSPORTS 移动端评分组件：核心功能展示

核心功能概览

配置参数详解

组件交互演示

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