jQuery와 CSS를 사용하여 숫자 평점을 별 평점으로 변환하는 방법은 무엇입니까?

숫자를 별표 평점으로 변환: jQuery와 CSS를 사용한 다목적 솔루션

사용자 인터페이스를 디자인할 때 별표를 사용하여 숫자 평점을 표시해야 하는 경우가 많습니다. jQuery 플러그인을 사용할 수 있음에도 불구하고 주어진 숫자를 기준으로 별점을 표시하도록 이러한 플러그인을 조정하는 것은 어려운 작업이 될 수 있습니다. 이 기사에서는 CSS, jQuery 및 사전 정의된 이미지의 조합을 사용하여 이 문제에 대한 강력한 솔루션을 탐색합니다.

CSS 정의

별표 평점 스타일을 지정하려면 다음 CSS 규칙을 따르세요. 채용됨:

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

이 CSS 블록에서 외부 범위(span.stars)는 개별 별표(span.stars 범위)에 대한 컨테이너 역할을 합니다. 두 요소 모두 블록 수준 요소로 설정되며 특정 오프셋과 반복 패턴을 갖춘 star.png의 배경 이미지가 제공됩니다.

이미지 요구 사항

이미지 파일인 star.png는 노란색(채워진) 별과 회색(빈) 별의 이미지를 모두 포함하는 스프라이트입니다. 이 이미지는 사용자 서버에 저장되어야 합니다. 제공된 이미지에 대한 핫링크는 권장되지 않습니다.

jQuery 구현

핵심 기능은 $.fn.stars라는 jQuery 플러그인을 사용하여 구현됩니다. 이 플러그인은 별 클래스가 있는 각 요소를 반복하고 숫자 콘텐츠를 별 등급 표시로 변환합니다. 계산에서는 주어진 숫자를 기준으로 노란색 별의 너비를 결정하여 비례 표현을 보장합니다.

$.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></span>').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

HTML 사용

이 플러그인을 활용하려면 클래스 별을 범위에 적용하기만 하면 됩니다. 숫자 평점이 포함되어 있습니다.

<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();
});

접근성 고려 사항

접근성을 보장하려면 범위 요소 내의 원래 숫자 값을 유지하되 텍스트 들여쓰기: -9999px를 사용하여 시각적으로 숨기는 것이 좋습니다. 이 접근 방식을 사용하면 CSS가 비활성화된 스크린 리더와 사용자가 기본 데이터에 액세스할 수 있습니다.

결론

이 솔루션은 jQuery 및 CSS를 사용하여 숫자 평점을 별표 평점으로 효율적으로 변환하므로 디스플레이를 위한 다용도 도구가 됩니다. 다양한 웹 애플리케이션의 평가 및 사용자 피드백.

위 내용은 jQuery와 CSS를 사용하여 숫자 평점을 별 평점으로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!