开云体育 평점 플러그인: 경기 참여도를 높이세요

준비물

开云体育 평점 플러그인 사용을 위해 다음이 필요합니다:

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

전화:+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 예제

제품 X (id: 312)

제품 Y (id: 423)

제품 Z (id: 653)

클라이언트

서버 (ASPX) 매우 단순화됨

12) 크기 조정