계산을 통해 별 형태로 평가합니다. 별점을 나누는 방법

이 기사에서는 사이트 기사에 별점을 추가하는 방법을 살펴보겠습니다.

FiveStarRating 추가 기능을 사용하여 CMS MODX Revolution 시스템에 이 기능을 추가할 수 있습니다.

FiveStarRating 추가 기능

FiveStarRating은 별을 사용하여 리소스의 프런트 엔드 평가를 수행할 수 있는 MODX Revolution 시스템에 요소를 추가하는 추가 기능입니다.

FiveStarRating 추가 기능 설치

FiveStarRating 추가 기능은 modx.com 저장소에 있습니다.

"패키지 관리" 페이지에서 MODX Revolution 시스템에 설치할 수 있습니다.

FiveStarRating 추가 기능 사용

별표 평가 시스템을 리소스에 연결하려면 리소스의 템플릿이나 콘텐츠에서 SimpleRating 코드 조각을 호출하면 됩니다.

[[!간단한 평가]]

SimpleRating 스니펫 매개변수:

&id - 등급을 표시하려는 리소스의 ID입니다(기본적으로 현재).
&tpl - HTML 별점 마크업을 포함하는 청크(기본값 tplSimpleRating).

리소스 ID를 나타내는 SimpleRating 스니펫을 호출하는 예:

[[!간단한 평가? &id = `3` ]]

청크 이름을 나타내는 SimpleRating 스니펫을 호출하는 예:

[[!간단한 평가? &tpl = `tplSimpleRating1` ]]

SimpleRating 스니펫은 다음을 수행합니다.

프런트 엔드에 필요한 스타일과 스크립트를 등록합니다.
현재 또는 지정된 리소스의 평가를 받아 페이지에 표시합니다.
사용자가 이미 이 리소스를 평가했는지 여부에 따라 평가를 활성화할지 여부를 설정합니다.

평가는 ajax를 통해 전송됩니다. Ajax 요청은 서버에서 action.php 파일에 의해 처리됩니다. 이 파일은 특정 사용자가 리소스를 평가할 가능성을 확인하고 등급을 설정(데이터베이스에 필요한 정보 기록)하고 결과를 반환합니다. action.php에서 결과를 받은 후 JavaScript 스크립트는 이를 페이지에 표시합니다.

등급 부정 행위에 대한 보호는 LocalStorage 및 IP 주소를 통해 수행됩니다.

필요한 경우 IP 주소 보호를 비활성화할 수 있습니다. 이는 시스템 매개변수 simpleating_ip를 "No"로 설정하여 수행됩니다.

가장 높은 평가를 받은 리소스 표시

결론적으로 가장 높은 등급의 리소스 10개를 페이지에 표시하는 방법을 살펴보겠습니다. 이 작업을 수행하기 위해 pdoTools 패키지의 pdoResources 조각을 사용합니다.

[[!pdo리소스? &loadModels=`simpleating` &parents=`0` &innerJoin=`( "SimpleRating": ( "class":"SimpleRating", "on": "modResource.id = SimpleRating.resource" ) )` &sortby = `("SimpleRating. rating_value":"DESC")` &select=`( "modResource":"id,pagetitle", "SimpleRating":" rating_value" )` &tpl=`@INLINE

[[+ID]]. [[+페이지 제목]] - [[+등급_값]]

` ]]

웹에서 무언가를 평가하기 위한 표준 기능이 있으며, 이는 많은 사이트에서 찾을 수 있습니다. 일반적으로 이는 기술적으로 여러 가지 방법으로 수행됩니다.

1. 각각 하나 또는 다른 등급에 해당하는 무선 유형의 입력 요소 세트

2. 불필요하고 의미 없는 HTML 마크업 + 자바스크립트가 많습니다.

최근에 프로젝트를 준비하면서 비슷한 작업에 직면해야 했습니다. 조금 생각한 후 몇 가지 이유로 첫 번째 옵션을 선택했습니다.

– 입력 기반 기능은 이미 cms에 구현되어 있으므로 프로그래머가 스크립트에 대한 "목발"을 생각해내도록 강요하는 것보다 이를 고수하는 것이 좋습니다.

– 나는 게으르고 때로는 주어진 상황에서 요구 사항을 충족할 JavaScript 플러그인을 인터넷 전체에서 검색하는 것보다 CSS를 생각해내는 것이 더 쉽습니다.

– 나는 이미 유사한 메커니즘의 구현을 한 번 본 적이 있으며 그것이 가능하다고 확신했습니다.

CSS 별점

따라서 CSS를 사용하여 라디오 입력을 스타일링하는 메커니즘은 새로운 것이 아니며 물론 제가 발명한 것도 아닙니다. 그런데 왠지 "CSS 등급"을 검색했을 때 나에게 맞는 기성 솔루션을 찾을 수 없었습니다. 그래서 나는 내 자신을 썼다.

1. 별(태양, 새끼 고양이, 올빼미 등 가장 좋아하는 것) 형태의 이미지(가급적이면 스프라이트)가 필요합니다.

2. 마크업을 결정해 봅시다. (아래 마크업은 예제에서 완전히 작성되었습니다. 여기서는 주요 아이디어를 설명하겠습니다.) 우리는 래핑 요소가 있고 과 를 번갈아 가며 사용합니다. 또한, 그들은 뒤로 번갈아 가며 나타납니다(클릭할 때 선택한 모든 별의 스타일을 지정할 수 있도록 매우 중요하며 호버 효과에도 필요합니다. 예 참조). 입력은 위에서부터 투명하므로 별 레이블만 표시됩니다.

3. 하나 또는 다른 입력을 선택하면 마크업 아래의 모든 스타일이 변경됩니다(CSS 선택기 ~ 사용). 실제로 양식에서는 일반적으로 선택되는 라디오버튼과 마찬가지로 체크가 됩니다.

흥미로운 주제인 JQuery 별점에 대한 다음 강의에 오신 것을 환영합니다. 제 생각에는 이것이 이 스크립트를 더 정확하게 설명하는 이름입니다. 그럼 먼저 등급이 필요한 이유와 사이트에서의 사용 의미부터 시작하겠습니다. 글쎄요, 첫째, 이것은 좋든 나쁘든 관심을 불러일으키는 자료에 대한 반응의 사회적 지위입니다. 둘째, 이것은 평가이며, 이 주제가 전혀 흥미로운지 아닌지에 대한 간단한 설문조사라고 가정해 보겠습니다. 셋째, 우리 사이트에서와 같이 주제의 복잡성 수준입니다. 여기서는 이미 초보자를 위한 복잡성에서 진행하고 있지만 숙련된 개발자를 위한 복잡성이 아니라 이러한 자료가 단순히 흥미롭지 않을 수 있으므로 염두에 두십시오. 그리고 원칙적으로는 흥미롭지 않습니다. 예외적으로 완성된 스크립트를 얻으세요. 따라서 개인적으로 등급은 관심을 불러 일으킨 자료에 대한 평가입니다. 예를 들어, 당신이 휴대폰이나 다른 물건을 구입하는데 관심이 있고, 온라인 상점에 가서 평점을 바탕으로 그 인기를 평가할 수 있는데, 여기에 제품 인기의 사회적 지위가 있습니다.

이제 일반적인 스크립트와 내 아이디어에 대해 이야기하겠습니다. 본질적으로 저는 대본을 두 부분으로 나누기로 결정했습니다. 많은 사람들이 첫 번째 부분과 두 번째 부분 모두에 관심을 가질 것이라고 생각하지만 두 부분을 합치지 않고 두 개의 다른 기사로 공개했습니다. 첫째, 두 부분이 함께 매우 중요한 것으로 판명될 것이기 때문에 둘째, 두 번째 부분에 대한 귀하의 의견이나 조언 또는 질문을 보고 싶습니다. 셋째, 두 번째 부분에서는 확실히 사용될 것입니다. 제이쿼리. 일반적으로 첫 번째 부분에서는 얻을 수 있는 사이트에 대한 이야기를 만들고 싶습니다. 제이쿼리이 스크립트의 플러그인과 두 번째 부분에서는 재부팅하지 않고 데이터베이스의 별표를 클릭할 때 등급을 입력합니다. 그러니 2부에 관심이 있으신 분들의 좋아요와 댓글을 기대하겠습니다.

자, 시작해 보겠습니다. 먼저, 반드시 이 플러그인의 공식 홈페이지를 방문하여 다운로드하셔야 합니다. 또한 플러그인 자체를 설정하고 스크립트의 정상적인 작동을 위해 플러그인을 최적화하는 방법에 대한 문서를 주의 깊게 연구하십시오. 검토 후 파일을 받아야 합니다. jquery.raty.js, 가능하다면 jquery.raty.css, 필수이고 기본 이미지가 있는 경우 그 중 3개만 있습니다. 다시 한번 말씀드리지만, 이는 모두 기본적으로 표준에 따른 것입니다!

첫 번째 부분. js와 css 파일을 연결합니다. HTML. 이미지.

표준에 따라 스타일 파일을 포함합니다. 데모.css그리고 업무에 필요한 라이브러리 jquery.min.js, 플러그인 jquery.raty.js그리고 우리 스크립트 rate.js.

그런 다음 스크립트 루트에 기본적으로 제공되는 세 가지 그림을 추가합니다. 스타온.png- 전체 평가, 별-오프.png- 평가 없음, 별-반.png- 반 등급. 자신만의 사진이 있고 이를 사용하고 싶다면 제가 한 것처럼 만들 수 있습니다. 폴더를 만들었어요 img거기에 두 장의 사진을 업로드했습니다. rating_activ.png- 활성 스타, rating_passiv.png- 활동하지 않는 스타.

이제 다음으로 넘어 갑시다 HTML암호. 그리고 우리는 표준의 세 가지 예만 게시할 것이며 나머지는 모두 자료 출처에 표시된 공식 웹 사이트에서 찾을 수 있다는 점을 즉시 지적하고 싶습니다.

첫 번째 예.

별표를 클릭하면 해당 메소드에 의해 호출되는 창이 바로 나타납니다. 알리다(), 클릭한 별표와 선택한 등급을 확인할 수 있습니다.

두 번째 예.

별표를 클릭하면 평점도 계산됩니다. 시연을 위해 내 사진은 폴더에 별 모양으로 설치되었습니다. img.

세 번째 예.

클릭하면 모든 별표가 클릭한 등급에 저장되지만 데이터베이스가 아닌 클라이언트 부분에 저장된다는 점은 주목할 가치가 있습니다. 따라서 나는 본격적인 평가 저장 및 클릭수 계산을 개발할 수있는 두 번째 부분에 대해 논의하기로 결정했습니다. 즉, 전체 평점이 데이터베이스에 저장됩니다.

두 번째 부분. JQuery.

이제 우리는 살펴볼 수 있습니다 제이쿼리주제 별점에 관한 부분. 다시 한 번 표준인 세 가지 예만 고려하고 있다는 표현을 사용하겠습니다.

작동 방식, 내용, 방법 및 이유에 대해서는 이미 위에서 자세히 설명했으므로 명확하지 않은 세부 사항에 대해서만 설명하겠습니다.

$(document).ready(function())( $(".rate1").raty(( 클릭: function(score, evt) ( Alert("ID: " + this.id + "\nscore: " + 점수 ) ; ) )); $(".rate2").raty(( 숫자: 10, starOff: "img/ating_passiv.png", starOn: "img/ating_activ.png" )); $(".rate3") .rate(( 숫자: 4, 대상: ".name", 힌트: ["매우 나쁨", "나쁨", "괜찮아", "좋음", "매우 좋음"], )); ));

수업중 비율1, 매개변수를 사용하여 함수를 실행합니다. 점수그리고 evt. 첫 번째로 우리는 방법으로 얻습니다. 알리다()이름, 그리고 두 번째로 ID, 우리가 선택한 평가. 수업중 속도2, 표시되는 별의 수를 설정하거나 오히려 10개가 될 것이며 기본적으로 이미지를 적용할 수 있는 것이 아니라 자체적으로 이미지를 적용할 수 있습니다. 별표 꺼짐- 활성화되지 않은 별표이지만 스타온- 활동적인. 수업중 비율3, 표시되는 별 수를 설정하고 일반 표시에서 기본 별을 숨깁니다. 아주 나쁜, 총 상태 값을 5로 설정합니다.

세 번째 부분. 라이브러리 jquery.raty.js.

플러그인 자체에 대해 간략하게 살펴보겠습니다. 이 주제가 매우 흥미로워지거나 완전히 이해할 수 없는 경우 두 번째 부분 이후에 또는 플러그인에 대한 별도의 부분으로 별도로 자세히 분석할 것입니다. 글쎄, 솔직히 말해서 약간의 문서를 읽는 것만으로도 충분하며 모든 것이 즉시 명확해질 것입니다. 주의할 점은 기본 설정입니다.

취소: false, cancelClass: "raty-cancel", cancelHint: "이 평가를 취소하세요!", cancelOff: "cancel-off.png", cancelOn: "cancel-on.png", cancelPlace: "left", 클릭: 정의되지 않음 , half: false, halfShow: true, 힌트: ["나쁨", "나쁨", "일반", "좋음", "화려함"], iconRange: 정의되지 않음, mouseout: 정의되지 않음, mouseover: 정의되지 않음, noRatedMsg: "등급 없음 아직!", 숫자: 5, numberMax: 20, 경로: 정의되지 않음, 정밀도: false, readOnly: false, 라운드: (아래: 0.25, 전체: 0.6, 위로: 0.76), 점수: 정의되지 않음, 점수 이름: "점수", 단일: false, 공백: true, starHalf: "star-half.png", starOff: "star-off.png", starOn: "star-on.png", starType: "img", 대상: 정의되지 않음, targetFormat: "(점수)", targetKeep: false, targetScore: 정의되지 않음, targetText: "", targetType: "힌트"

보시다시피, 저는 이미 스크립트에서 이러한 설정 중 일부를 사용했습니다. 이에 주의하세요! 이해가 안되는 부분이 있으면 댓글로 적어주시면 됩니다. 관심을 가져주셔서 감사합니다. 개발 중인 모든 분들께 행운을 빕니다!

해커 여러분 안녕하세요!
어느 날 추운 겨울 저녁, 나는 전체 평점 별 대신 분수(4.5, 3.85 등)에 대한 부분 채우기를 사이트에 추가하기로 결정했습니다. 따라서 눈이 편하고 더 많은 정보를 얻을 수 있습니다. 어느 시설이 더 좋고 어느 시설이 더 나쁩니다. 그래서 우리 팀과 나는 앉아서 생각하고 추측했습니다.
우리가 길을 찾은 방법 우리는 주로 최고 시설과 3+ 등급을 보유하고 있기 때문에 별 전체가 인식을 크게 흐리게 합니다. 그러나 여기서 약간의 뉘앙스가 발생했습니다. 가장 일반적인 방법은 이미지를 다른 이미지 위에 오버레이하는 것입니다. 처음부터 마스크 이미지를 사용하여 모든 작업을 수행하려고 생각했지만 아쉽게도 디자인은 별이 서로 옆에 있을 수 있다는 것을 의미하지 않았고 채우기 블록의 너비와 크기를 제어하는 것이 그리 편리하지 않았습니다. 별의 크기.

여기에 Kinopoisk에는 10개의 별이 모두 있습니다. 하나의 그림은 서로 붙어 있습니다. 이렇게 하면 마음이 원하는 만큼 주황색을 칠하는 것이 매우 쉬워집니다.

.starbar .outer ( 배경: url(/images/starz.gif) 반복 없음; 너비: 219px; 높이: 30px; 위치: 절대; ) .starbar_w ( 디스플레이: 블록; 너비: 167.09px; 배경: url(/ Images/starz.gif) 0 -62px 반복 없음, 높이: 30px, 위치: 절대; ) 항상 돌아다닐 곳이 있습니다! 그럼에도 불구하고 우리는 완전히 BEM 방법론을 따르는 보편적이고 확장 가능한 옵션을 원했습니다. 또한 프로젝트에는 스프라이트가 하나도 없으며 모든 아이콘은 신중하게 글꼴로 조합된 자체 아이콘 세트를 사용하여 구현됩니다. 하지만 이에 대해서는 다른 기사에서 다루게 될 것 같습니다.)

전반적으로 우리는 실험을 생각해 냈습니다. 글꼴 아이콘을 다른 글꼴 아이콘 위에 놓는 것은 어떨까요? 그래서 우리는 해냈습니다.

각 별은 다음으로 구성된 별도의 개체로 만들어졌습니다. .stars__out컨테이너로서 그리고 .stars__in채우기로.

CSS는 다음과 같습니다.

Cfi.cfi--star ( /* ... */ ) /* 별표를 그리는 Font Awesome과 유사 */ .stars__out ( position:relative; margin-right: 5px; /* 별 사이에 들여쓰기 만들기 */ color: grey; z-index: 1; ) .stars__in ( /* 채우기를 기본 아이콘의 하위 항목으로 배치하고 맨 위에 던지자 */ position:absolute; z-index: 2; color: orange; /* 밝은 색상을 지정합니다 */ Font -size: 상속; /* 글꼴은 상위 항목의 크기입니다 */ /* 상위 항목을 기준으로 0을 기준으로 블록 보고 포인트를 제공합니다 */ display: block ; 위쪽: 0; 왼쪽: 0; 아래쪽: 0; /* 음, 가시성 영역을 제한하고 너비도 기본적으로 0으로 설정합니다 */ Overflow: Hidden; width: 0; )

모두. 다음으로, 100%(전체 별표)로 채워야 할 경우 CSS 속성을 지정하면 됩니다. 너비: 100%.
그러나 불완전한 별에 대해서는 또 다른 트릭을 사용했습니다. 우리는 너비를 설정하지 않았습니다. x*100%, 그리고 특별히 계산된 공식에 따른 값입니다.
그것은 모두 심리학에 관한 것입니다. 우리는 너비가 아닌 부피로 채워지는 비율을 시각적으로 인식하는 경향이 있으며, 왼쪽과 오른쪽의 별은 면적이 매우 작아 인식이 복잡하기 때문에 너비가 아닌 너비로 채우는 아이디어를 생각해 냈습니다. -선형적으로:

비선형 모델의 경우 정현파를 사용했습니다. 성장의 빠른 시작과 끝, 그리고 중간의 순조로운 성장을 완벽하게 표현하고 있습니다.
우리는 그것을 펼쳐서 아르신을 얻고 이를 양쪽 축의 프레임(0; 1)에 압축하여 별의 "심리적 충만도"를 계산하기 위한 훌륭하고 간단한 공식을 얻었습니다.

자바스크립트 코드:
var y = Math.asin(2 * x - 1) / Math.PI + 0.5;

결과적으로 이 원칙은 이전 브라우저에서 잘 작동하며 IE9에서는 아무 것도 작동하지 않습니다. 모두가 행복했습니다. 디자이너, 고객, 심지어 기사를 쓰게 된 나의 자아까지 말이죠.

별을 표시하기 위해 HTML의 별 기호에 대한 10진수 코드, 즉 ☆를 사용합니다.

HTML ☆☆☆☆☆

해당 별 위로 마우스를 가져가면 노란색 별을 "빈" 별 안으로 밀어넣어야 합니다. 쉬움: 속이 빈 별 위에 의사 요소를 사용하여 단단한 별을 배치하기만 하면 됩니다.

CSS .등급 > 범위:호버:이전( 내용: "\2605"; 위치: 절대; )

우리는 단단한 별을 절대적으로 위치시키고 따라서 우리의 별은 속이 빈 별을 덮을 것입니다.

그러나 지금까지 모든 것은 각 특정 별에 대해서만 작동합니다. 그리고 더 나은 사용자 경험을 위한 우리의 임무는 (마우스가 가리키는 별을 기준으로) 모든 별을 채우는 것입니다. 예를 들어, 사용자가 4번째 별 위로 마우스를 가져가면 별 4개를 표시해야 하며, 5번째 별이면 5개를 표시해야 합니다.

CSS를 통해 이전 인접 요소를 선택할 수 있는 방법은 없습니다. 그러나 를 통해 다음 하위 요소를 선택하는 방법이 있습니다.

문자 그대로 문자를 반대로 바꾸면(스니펫이 - 에 도움이 됩니다) 관련 연결기를 사용하여 마우스 오버 별표 앞에 표시되지만 HTML에서는 뒤에 표시되는 모든 별표를 선택할 수 있습니다.

CSS .등급( unicode-bidi: bidi-override; 방향: rtl; ) .등급 > 범위:hover:before, .등급 >

그래서 우리는 적은 코드를 사용하여 사용자 친화적인 별 등급 템플릿을 만들었습니다. 다음은 평가가 작동하는 전체 CSS 코드입니다.

CSS .등급( unicode-bidi: bidi-override; 방향: rtl; ) .등급 > 범위( 디스플레이: 인라인 블록; 위치: 상대; 너비: 1.1em; ) .등급 > 범위:hover:before, .등급 > 범위:hover ~ 범위:이전 ( 내용: "\2605"; 위치: 절대; ) 실제 사용법

아마도 자바스크립트의 참여 없이는 불가능할 것입니다. 사용자가 별을 클릭하면 Ajax 요청이 서버로 전송되고 위젯은 선택한 별 개수를 표시하는 클래스를 받습니다. 이러한 스타 시스템을 구현하기 위해 사이트의 모든 곳에서 사용되는 자바스크립트에 의존하는 것이 실제로 불가능합니까? 애플리케이션이 전적으로 자바스크립트에 의존하는 경우 이 옵션이 확실히 적합합니다. 그러나 귀하의 사이트가 자바스크립트 없이 작동해야 하는 경우 별점을 얻으려면 훨씬 더 많은 작업이 필요합니다. 라디오 버튼을 양식의 일부로 사용하고 자바스크립트를 사용하지 않는 Lea Verous의 예를 볼 수 있습니다.

다음 내용을 읽어보는 것이 도움이 될 수 있습니다.