복붙노트

[JQUERY] jQuery를하고 CSS를 사용하여 성급 디스플레이에 숫자를 돌려

JQUERY

jQuery를하고 CSS를 사용하여 성급 디스플레이에 숫자를 돌려

해결법

  1. 1.여기에 하나 개의 아주 작고 간단한 이미지 하나 개 자동으로 생성 스팬 요소를 사용하여 당신을위한 솔루션입니다 :

    여기에 하나 개의 아주 작고 간단한 이미지 하나 개 자동으로 생성 스팬 요소를 사용하여 당신을위한 솔루션입니다 :

    span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

    참고 : 위의 이미지에 링크하여하지 마십시오! 자신의 서버에 파일을 복사하고 거기에서 사용합니다.

    $.fn.stars = function() {
    return $(this).each(function() {
        // Get the value
        var val = parseFloat($(this).html());
        // Make sure that the value is in 0 - 5 range, multiply to get width
        var size = Math.max(0, (Math.min(5, val))) * 16;
        // Create stars holder
        var $span = $('<span />').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

    당신은 절반 또는 분기 별 크기에 별을 제한하는 VAR 크기 행하기 전에 이러한 행 중 하나를 추가하려면 :

    val = Math.round(val * 4) / 4; /* To round to nearest quarter */
val = Math.round(val * 2) / 2; /* To round to nearest half */

    <span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>

    $(function() {
    $('span.stars').stars();
});

    이것은 아마도 귀하의 요구에 맞게됩니다. 이 방법 당신은 그것을 float를주고, 어떤 3 분기 또는 이것 저것 스타 폭을 계산하지 않아도 그것은 당신에게 당신의 별을 줄 것이다.

    별 제시된 방법에 대한 작은 설명 순서에있을 수 있습니다.

    스크립트는 두 블록 레벨 스팬 요소를 생성한다. 스팬 모두 초기에는 더 80 픽셀 * 16px의 크기와 배경 이미지 stars.png를 얻을. 스팬이 중첩되어이 같은 스팬의 외모의 구조 있도록 :

    <span class="stars">
    <span></span>
</span>

    외부 범위는 0 -16px의 배경 위치를 가져옵니다. 즉, 외부 범위의 회색 별을 볼 수 있습니다. 외부 스팬 16px 반복-X의 높이가, 그것은 5 회색 별을 보여줍니다.

    반면에, 내측 스팬은 노란색 별 표시하게 0 0의 배경 위치를 갖는다.

    이 코스 두 개의 별도 imagefiles와 작업, star_yellow.png 및 star_gray.png의 것. 별이 고정 된 높이를 가지고, 우리는 쉽게 하나 개의 이미지로 결합 할 수 있습니다. 이것은 CSS 스프라이트 기술을 사용합니다.

    스팬이 중첩으로 이제, 그들은 자동으로 서로에 걸쳐 오버레이된다. 두 경간의 폭이 80 픽셀 인 경우 기본 경우, 노란색 별은 완전히 회색 별을 모호하게.

    우리가 내부 범위의 폭을 조정할 때, 노란색 별의 폭은 회색 별을 드러내는 감소.

    접근성이 많다는, 그것은 내부 범위 내에서 부동 소수점 수를 떠나 텍스트 들여 쓰기로 숨길 현명했을 것이다 : -9999px, CSS 가진 사람들이 적어도 대신 별의 부동 소수점 숫자를 볼 것이다 꺼져 그래서.

    희망이 어떤 의미를 만들어 그.

    이제 더 작고 더 열심히 이해하기! 또한 하나의 라이너로 아래로 압착 수 있습니다 :

    $.fn.stars = function() {
    return $(this).each(function() {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    });
}

  2. 2.당신은 최신 브라우저를 지원해야하는 경우, 당신은 멀리 얻을 수 있습니다 :

    당신은 최신 브라우저를 지원해야하는 경우, 당신은 멀리 얻을 수 있습니다 :

    당신은 클래스, 예를 들어,에 수를 변환해야 클래스 = '별 점수-50'.

    먼저 "렌더링"의 데모는 마크 업 :

    본체 {폰트 사이즈 : 18px; } .stars 컨테이너 { 위치 : 상대; 표시 : 인라인 블록; 색상 : 투명; } .stars 컨테이너 : 전에 { 위치 : 절대; 최고 : 0; 왼쪽 : 0; 내용 : '★★★★★'; 색상 : lightgray; } .stars 컨테이너 : 후 { 위치 : 절대; 최고 : 0; 왼쪽 : 0; 내용 : '★★★★★'; 색상 : 금; 오버 플로우 : 숨겨진; } .stars-0 {폭 후 0 %; } .stars-10 {폭 후 10 %; } .stars-20 {폭 후 20 %; } .stars-30 {폭 후 30 %; } .stars-40 {폭 후 40 %; } .stars-50 {후의 폭 : 50 %; } .stars-60 {후의 폭 : 60 %; } .stars-70 {폭 후 : 70 %; } .stars-80 {후의 폭 : 80 %; } .stars-90 {후의 폭 : 90 %; } .stars-100 : 후 {폭 : 100; } 블록 레벨 요소 내에서 :

    <스팬 클래스 = "별 컨테이너 별-0"> ★★★★★
    <스팬 클래스 = "별 컨테이너 별-10"> ★★★★★
    <스팬 클래스 = "별 컨테이너 별-20"> ★★★★★
    <스팬 클래스 = "별 컨테이너 별-30"> ★★★★★
    <스팬 클래스 = "별 컨테이너 별-40"> ★★★★★
    <스팬 클래스 = "별 컨테이너 별-50"> ★★★★★
    <스팬 클래스 = "별 컨테이너 별-60"> ★★★★★
    <스팬 클래스 = "별 컨테이너 별-70"> ★★★★★
    <스팬 클래스 = "별 컨테이너 별-80"> ★★★★★
    <스팬 클래스 = "별 컨테이너 별-90"> ★★★★★
    <스팬 클래스 = "별 컨테이너 별-100"> ★★★★★

    아니면 문장을 사용합니다. <스팬 클래스 = "별 컨테이너 스타-70"> ★★★★★ (? 멋진, 허)

    코드를 조금이라도를 사용하여 다음 데모 :

    () {(기능 $ 기능 addScore (점수, $ domElement) { $ ( "<스팬 클래스 = '별 컨테이너'>") .addClass ( "stars-"+ score.toString ()) 는 .text ( "★★★★★") .appendTo ($ domElement); } addScore (70, $ ( "#기구")); }); 본체 {폰트 사이즈 : 18px; } .stars 컨테이너 { 위치 : 상대; 표시 : 인라인 블록; 색상 : 투명; } .stars 컨테이너 : 전에 { 위치 : 절대; 최고 : 0; 왼쪽 : 0; 내용 : '★★★★★'; 색상 : lightgray; } .stars 컨테이너 : 후 { 위치 : 절대; 최고 : 0; 왼쪽 : 0; 내용 : '★★★★★'; 색상 : 금; 오버 플로우 : 숨겨진; } .stars-0 {폭 후 0 %; } .stars-10 {폭 후 10 %; } .stars-20 {폭 후 20 %; } .stars-30 {폭 후 30 %; } .stars-40 {폭 후 40 %; } .stars-50 {후의 폭 : 50 %; } .stars-60 {후의 폭 : 60 %; } .stars-70 {폭 후 : 70 %; } .stars-80 {후의 폭 : 80 %; } .stars-90 {후의 폭 : 90 %; } .stars-100 : 후 {폭 : 100; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 생성 :

    이 솔루션의 가장 큰 단점은 다음과 같습니다 :

    이 쉽게 불통 될 수 위의 솔루션 해결하려면. (우리는 그 일부가 필요하므로 JS) 비트가 DOM 실제 소자가 필요 후 : 전.

    후자는 독자들에게 운동으로 남아 있습니다.

  3. 3.이 JQuery와 도우미 기능 / 파일을보십시오

    이 JQuery와 도우미 기능 / 파일을보십시오

    jquery.Rating.js

    //ES5
$.fn.stars = function() {
    return $(this).each(function() {
        var rating = $(this).data("rating");
        var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fas fa-star"></i>');
        var halfStar = ((rating%1) !== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
        var noStar = new Array(Math.floor($(this).data("numStars") + 1 - rating)).join('<i class="far fa-star"></i>');
        $(this).html(fullStar + halfStar + noStar);
    });
}

//ES6
$.fn.stars = function() {
    return $(this).each(function() {
        const rating = $(this).data("rating");
        const numStars = $(this).data("numStars");
        const fullStar = '<i class="fas fa-star"></i>'.repeat(Math.floor(rating));
        const halfStar = (rating%1!== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
        const noStar = '<i class="far fa-star"></i>'.repeat(Math.floor(numStars-rating));
        $(this).html(`${fullStar}${halfStar}${noStar}`);
    });
}

    index.html을

       <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Star Rating</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="js/jquery.Rating.js"></script>
        <script>
            $(function(){
                $('.stars').stars();
            });
        </script>
    </head>
    <body>

        <span class="stars" data-rating="3.5" data-num-stars="5" ></span>

    </body>
    </html>

  4. 4.왜 당신의 DOM에 이미지 (4 곱한 평가의 잘 리거나 rouded 값에 따라 단지 주입 후 별의 5 개 개의 개별 이미지 (분기-전체, 반 전체, 3/4 전체와 전체, 비어)가 )이 분기 전체 numner를 얻으려면?

    왜 당신의 DOM에 이미지 (4 곱한 평가의 잘 리거나 rouded 값에 따라 단지 주입 후 별의 5 개 개의 개별 이미지 (분기-전체, 반 전체, 3/4 전체와 전체, 비어)가 )이 분기 전체 numner를 얻으려면?

    예를 들어, 4.8618164 4를 곱한 둥근 네와 3 분기 별 것 19이다.

    (당신은 나 같은 게으른 인 경우) 또는 단지 (1/4 단위 별 5 개를 0 별) (21)로부터 선택된 하나 개의 이미지를 가지고 상기 값을 기준으로 하나의 이미지를 선택합니다. 그 다음은 (오히려 다섯 개 가지 이미지를 변경하는 것보다)는 DOM에서 이미지 변화에 따라 하나의 계산이다.

  5. 5.나는 클라이언트 측이 지연 렌더링 피하기 위해 완전히 JS없는가는 끝났다. 그것을 달성하기 위해, 나는 이런 식으로 HTML을 생성합니다 :

    나는 클라이언트 측이 지연 렌더링 피하기 위해 완전히 JS없는가는 끝났다. 그것을 달성하기 위해, 나는 이런 식으로 HTML을 생성합니다 :

    <span class="stars" title="{value as decimal}">
    <span style="width={value/5*100}%;"/>
</span>

    접근성 도움말을, 난 title 속성의 원시 평가 등급을 추가 할 수 있습니다.

  6. 6.프로토 타입없이 jQuery를 사용하여,에 JS 코드를 업데이트

    프로토 타입없이 jQuery를 사용하여,에 JS 코드를 업데이트

    $( ".stars" ).each(function() { 
    // Get the value
    var val = $(this).data("rating");
    // Make sure that the value is in 0 - 5 range, multiply to get width
    var size = Math.max(0, (Math.min(5, val))) * 16;
    // Create stars holder
    var $span = $('<span />').width(size);
    // Replace the numerical value with stars
    $(this).html($span);
});

    또한 스팬의 데이터 평가의 이름으로 데이터 속성을 추가했다.

    <span class="stars" data-rating="4" ></span>

  7. 7.데모

    데모

    당신은이 개 이미지와 함께 할 수 있습니다. 1 빈 별, 1 가득한 별.

    오버레이는 다른 하나의 상단에 이미지를 채웠다. 및 변환 등급 비율에 번호와는 fillter 이미지의 너비로 사용합니다.

    .containerdiv {
  border: 0;
  float: left;
  position: relative;
  width: 300px;
} 
.cornerimage {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
 } 
 img{
   max-width: 300px;
 }

  8. 8.여기에 불구하고, 단 0.5의 정확성에 제한 JSX 및 글꼴 최고를 사용하여 내 걸릴이야 :

    여기에 불구하고, 단 0.5의 정확성에 제한 JSX 및 글꼴 최고를 사용하여 내 걸릴이야 :

           <span>
          {Array(Math.floor(rating)).fill(<i className="fa fa-star"></i>)}
          {(rating) - Math.floor(rating)==0 ? ('') : (<i className="fa fa-star-half"></i>)}
       </span>

    첫 번째 행은 전체 별을이고 두 번째 행 (있는 경우) 반 스타입니다

    9. from https://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 removeClass 와일드 카드  (0) 2020.10.20
[JQUERY] 어떻게 jQuery를 사용하여 iframe이 상위 페이지에 액세스?  (0) 2020.10.20
[JQUERY] 어떻게 jQuery를 사용하여 특정 항목으로 이동합니다?  (0) 2020.10.20
[JQUERY] 콜백에 더 많은 파라미터를 전달 JQUERY  (0) 2020.10.20
[JQUERY] JQuery와 양식에 방지 페이지로드는 없음 표시 버튼으로 제출  (0) 2020.10.20
,

티스토리툴바