jQuery를 사용한 별 등급 제어

키 테이크 아웃

이 기사는 jQuery를 사용하여 대화식 별 등급 위젯을 구축하는 방법에 대한 자세한 안내서를 제공합니다. 여기에는 별 아이콘으로 대체되는 라디오 버튼 그룹을 만드는 것이 포함되며, 사용자는 등급을 제공하기 위해 상호 작용할 수 있습니다. 스타 등급 시스템은 키보드 액세스 가능하도록 설계되었으며 반 스타 등급을 허용합니다. 이것은 CSS 스프라이트 이미지를 사용하고 배경 위치 특성을 조작하여 별의 다른 상태를 표시함으로써 달성됩니다. 등급 시스템은 스케일을 5 개 대신 4 개의별로 제한하여 사용자 참여와 사려 깊은 등급 선택을 장려하여 중간 옵션을 제거하도록 설계되었습니다. 또한 더 큰 정밀도에 대한 반 스타 등급을 허용합니다 시스템은 jQuery를 사용하여 별을 호버링 및 클릭하는 것을 포함하여 사용자 상호 작용을 처리합니다. 별이 클릭되면 해당 라디오 버튼 값이 업데이트되고 별과 앞의 모든 별이 강조 표시됩니다. 이 시스템은 또한 잠재적 인 문제를 관리하기위한 오류 처리를 구현합니다.

새로 발표 된 책인 에는 많은 훌륭한 사용 가능한 솔루션이 포함되어 있으며, 진보 할 때 기본적이고 고급의 jQuery 개념을 가르쳐줍니다. 맛보기로 Craig Sharkie가 jQuery를 사용하여 강력하고 정교한 별 등급 위젯을 구축하는 방법을 보여주는 발췌문이 있습니다. 키보드 액세스 가능하고 반 성급 등급을 허용합니다.

전에 jQuery를 사용한 적이 없다면 무료 샘플 PDF를 잡고 2 장에서 소개를 통해 속도를 높이십시오.이 기사에서 취한 7 장에서는 다운로드에 포함되어 있으므로이 자습서를 읽을 수 있습니다. 여기.

스타 등급 제어

고객은 사용자 참여를 높이고 사용자가 중요하다고 느끼도록 돕기를 원합니다. 우리는 이것에 대해 조금 생각했고, 그에게 별 등급 아이디어를 던졌습니다. 결국 사람들은 골드 스타의 할당을 통해 자신의 감정을 표현하는 것 이상을 좋아하지 않습니다. 우리의 반짝이는 새로운 컨트롤은 그림 1, "별 등급 제어"와 같이 나타날 것입니다. 브라우저가 그룹에서 단일 선택을 시행하므로 완벽합니다. 올바른 버튼 수를 추가하여 사용자가 선택할 수있는 범위를 선택할 수 있습니다.

<div >  <label><input  name="rating" type="radio" value="1"/>1 Star</label>  <label><input  name="rating" type="radio" value="2"/>2 Stars</label>  <label><input  name="rating" type="radio" value="3"/>3 Stars</label>  <label><input  name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

물론 어려운 부분은 이러한 라디오 버튼을 스타 컨트롤로 교체하는 것입니다. CSS만으로 HTML 컨트롤을 스타일링하는 데 어려움을 겪을 수 있지만 컨트롤을 데이터를 저장하는 기본 모델과 별이있는 반짝이는 모형으로 컨트롤을 분할하면 훨씬 쉽고 유연합니다. 이 경우 모델은 원래 HTML 라디오 버튼 그룹입니다. 우리의 공격 계획은 라디오 버튼을 숨기고 jQuery를 통해 추가 한 링크 목록을 별처럼 보이게하는 것입니다. 링크와 상호 작용하면 선택한 라디오 버튼이 전환됩니다. JavaScript가없는 사용자는 단순히 라디오 버튼 자체를 볼 수 있습니다. 우리는 괜찮습니다.

별의 경우, 우리는 CSS 스프라이트에 의존합니다. 이 방법으로 우리의 컨트롤은 단일 이미지 (그림 2, "Star CSS Sprite Image"에 표시)에만 의존 할 것입니다. ( "Star CSS Sprite Image") HTTP 요청을 저장하고 그래픽 디자이너가 편집하기가 더 쉬워집니다. 그림 2. Star CSS Sprite 이미지

CSS는 CSS Sprits를 대표 할 것입니다. 다른 이미지 상태를 이동하려면 배경 위치 속성을 업데이트하면됩니다. 예제 2 장. 왜? 사용자 심리학! 사람에게 중간 도로를 제공하면 가져갈 것입니다. 중간이 없어서 사용자가 자신의 선택에 대해 조금 더 생각하게 만듭니다. 우리는 더 나은 결과를 얻을 수 있으며, 사용자에게 최상의 콘텐츠 (그들에 의해 선택된대로)를 더 잘 발표 할 수있을 것입니다!

4 개는 제한된 규모입니다. 그래서 우리는 반 스타 등급을 허용하고자합니다. 이것은 착시를 통해 구현됩니다. 아마도 우리의 스타 이미지가 반으로 잘린 것을 알았을 것입니다. 우리의 HTML에는 8 개의 라디오 버튼이 포함되어 있으며 각각의 절반은 별의 가치가 있습니다. 8 개의 라디오 버튼을 4 개의별로 변환하기위한 코드에는 두 부분이 있습니다. 먼저 CreatesTars 기능은 라디오 버튼이있는 컨테이너를 가져 와서 별 링크로 바꿉니다. 그런 다음 각 스타에는 사용자가 컨트롤과 상호 작용할 수 있도록 적절한 이벤트 핸들러 (Addhandlers 메소드)가 보충됩니다. 우리의 별명 대상의 골격은 다음과 같습니다. 예제 3. 챕터_07/11_star_ratings/script.js (Excerpt) 우리가 통과하는 선택기와 일치하는 각 컨테이너를 통해 반복되고 무선 버전을위한 프록시로 작용하는 링크 목록을 생성합니다. 이 링크는 우리가 스타처럼 보이도록 스타일입니다. 또한 원래 형태의 요소를 숨길 것이므로 사용자는 우리의 사랑스러운 별 만 볼 수 있습니다 : 예제 4. 챕터 _07/11_star_ratings/script.js (Excerpt) >

<div >  <label><input  name="rating" type="radio" value="1"/>1 Star</label>  <label><input  name="rating" type="radio" value="2"/>2 Stars</label>  <label><input  name="rating" type="radio" value="3"/>3 Stars</label>  <label><input  name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

우리는 새로운 링크 (div 요소) 용 컨테이너를 만들기 시작합니다. 대체중인 각 라디오 버튼에 대한 새로운 링크 하나를 만들 것입니다. 라디오 선택기 필터를 사용하여 모든 라디오 버튼을 선택한 후 각 항목의 등급을 가져 와서 하이퍼 링크 요소를 만듭니다. 참고 : addclass 조치의 경우 모듈러스

가있는 조건부 할당은 수학을 기준으로 조건부 운영자와 조건부 이름을 지정합니다. 이 책의 앞부분에서했듯이 모듈러스 (%) 연산자를 사용하여 색인이 균일한지 또는 홀수인지를 결정합니다. 인덱스가 홀수이면 정격 오른쪽 클래스를 추가합니다. 이것은 링크를 별의 오른쪽처럼 보이게 만듭니다.

링크가 준비되면 Addhandlers 메소드에 전달합니다. 이것은 작동하는 데 필요한 이벤트를 첨부하는 곳입니다. 그런 다음 목록 컨테이너에 추가됩니다. 컨테이너에 있으면 현재 라디오 버튼이 선택되었는지 확인합니다 (확인 된 양식 필터를 사용합니다). 확인되면 등급 클래스를이 하프 스타와 그 이전의 모든 하프 스타에 추가하려고합니다. 첨부 된 등급 클래스와의 링크에는 Gold Star 이미지가 할당됩니다 (사용자는 현재 등급을 볼 수 있습니다).

금을 돌리는 데 필요한 모든 요소를 ​​선택하려면, 우리는 몇 가지 새로운 JQuery 행동의 도움을받을 것입니다. revelall 동작은 현재 선택 전에

모든 형제를 선택합니다 (이전 형제 자매 만 선택하는 이전 동작과 달리). 이 예를 들어, 우리는 이전 형제 자매

및 에 클래스를 추가하려고합니다. 그렇게하기 위해, 우리는 현재 선택에 원래 선택을 포함하는 자체 조치를 적용합니다. 이제 우리는 골드가 될 모든 링크를 가지고 있으므로 클래스를 추가 할 수 있습니다.

팁 : 기타 트래버스 방법 jQuery는 다음 컨테이너와 함께 이후에 발생하는 모든 요소의 형제 자매를 가져 오는 다음 방법을 제공한다고 추측했을 것입니다. JQuery 1.4는 또한 두 가지 새로운 동반자 방법 인 Deventil과 Nextuntil을 도입했습니다. 이것들은 선택기와 함께 호출되며, 선택기와 일치하는 요소에 부딪 칠 때까지 요소의 형제 자매 (사용 중 또는 뒤로)를 스캔합니다. 예를 들어 $ ( 'h2 : first'). Nextuntil ( 'H2'); 동일한 컨테이너 요소에서 페이지의 첫 번째 h2와 다음 H2 사이에 앉아있는 모든 요소를 ​​제공합니다. 두 번째 매개 변수를 전염시 또는 NextUntil로 전달하면 반환 된 요소를 필터링하기 위해 선택기로 사용됩니다. 예를 들어, 우리가 NextTuntil ( 'h2', 'div')을 썼다면 현재 선택과 다음 h2 사이의 div 요소 만 반환합니다.이 모든 노력을 기울인 후 이제 컨트롤에 새 링크 목록을 추가하고 원래 버튼을 제거 할 수 있습니다. 이제 사용자는 별과 만 상호 작용합니다 : 예제 5. 챕터_07/11_star_ratings/script.js (Excerpt)

컨트롤은 지금 구체화되는 것처럼 보이지만 아직 아무것도하지 않습니다. 이벤트 처리기를 첨부하고 동작을 추가해야합니다. 우리는 세 가지 행사에 관심이 있습니다. 사용자가 별을 가로 지르면 CSS 스프라이트를 업데이트하여 호버 상태를 보여 주려고합니다. 그들이 떠날 때, 우리는 CSS 스프라이트를 원래 상태로 되돌리고 싶습니다. 그리고 그들이 클릭 할 때, 우리는 선택 골드를 만들고 싶습니다 :

예제 6. 챕터_07/11_star_ratings/script.js (발췌)

호버 기능은 가장 쉬운 일입니다. 설정. 호버링 할 때, 우리는 기지를 덮고 모든 링크에서 등급 오버 클래스를 제거합니다. 클릭을 위해 지금은

<div >  <label><input  name="rating" type="radio" value="1"/>1 Star</label>  <label><input  name="rating" type="radio" value="2"/>2 Stars</label>  <label><input  name="rating" type="radio" value="3"/>3 Stars</label>  <label><input  name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

예 7. 챕터 _07/11_star_ratings/script.js (Excerpt)

클릭 이벤트 처리의 중요한 부분은 기본 무선 버튼 모델을 업데이트하는 것입니다. 라디오 필터와 속성 선택기를 사용하여 올바른 라디오 버튼을 선택하여이를 수행합니다.이 값은 현재 링크의 텍스트와 일치하는 라디오 버튼을 검색합니다.

모델이 업데이트 된 상태에서 CSS 스프라이트와 함께 엉망으로 돌아갈 수 있습니다. 먼저, 현재 가지고있는 모든 링크에서 등급 클래스를 지우고 사용자가 선택한 링크에 모든 링크에 추가하십시오. 마지막 터치는 링크의 기본 동작을 취소하는 것입니다. 따라서 별을 클릭하면 위치 변경을 해소하지는 않습니다. 이 예제가 포함 된 무료 샘플 PDF와 150 페이지 분량의 더 훌륭한 학습 자료를 포함해야합니다. 이미 판매된다면 Sitepoint에서 바로 책을 구입할 수 있습니다.

.stars div a {  background: transparent url(sprite_rate.png) 0 0 no-repeat;  display: inline-block;  height: 23px;  width: 12px;  text-indent: -999em;  overflow: hidden;}.stars a.rating-right {  background-position: 0 -23px;  padding-right: 6px;}.stars a.rating-over { background-position: 0 -46px; }.stars a.rating-over.rating-right { background-position: 0 -69px; }.stars a.rating { background-position: 0 -92px; }.stars a.rating.rating-right { background-position: 0 -115px; }

jQuery 별 등급에 대한 자주 묻는 질문 (FAQ) 별 등급의 모양을 사용자 정의 할 수 있습니까?
CSS를 수정하여 별 등급의 모양을 사용자 정의하면 달성 할 수 있습니다. 별의 색상, 크기 및 간격을 변경할 수 있습니다. 예를 들어 색상을 변경하려면 CSS에서 '색상'속성을 사용할 수 있습니다. 크기를 변경하려면 '글꼴 크기'속성을 조정할 수 있습니다. 이러한 변경 사항을 적용하려면 CSS의 특정 별 등급의 특정 클래스를 타겟팅해야합니다.

jQuery 별 등급에서 하프 스타 등급을 사용할 수 있습니까? 예, jQuery Star 등급에서 하프 스타 등급을 사용할 수 있습니다. 별 등급을 초기화 할 때 '하프'옵션을 true로 설정하여이를 달성 할 수 있습니다. 이를 통해보다 정확한 등급이 허용되어 사용자가 반별로 평가할 수있는 기능을 제공합니다.

사용자의 등급을 저장하려면 어떻게해야합니까?

사용자의 등급을 저장하려면 AJAX를 사용하여 등급 값을 서버 측 스크립트로 보낼 수 있습니다. 이 스크립트는 등급을 데이터베이스에 저장할 수 있습니다. 페이지가로드되면 스크립트에 저장된 등급을 검색하고 표시 할 수 있습니다.

평균 등급을 표시하려면 어떻게해야합니까?

평균 등급을 표시하는 것은 모든 저장된 등급의 평균을 계산 한 다음 별 등급의 값을이 평균으로 설정하여 수행 할 수 있습니다. 이것은 데이터베이스에서 모든 등급을 검색하고 평균을 계산 한 다음이 평균을 클라이언트 측 스크립트로 다시 보낼 수있는 서버 측 스크립트를 사용하여 수행 할 수 있습니다.

별 등급을 비활성화 할 수 있습니까?

예, 별 등급을 비활성화 할 수 있습니다. 이것은 등급을 표시하려고하지만 사용자가 등급을 변경하려는 경우 유용 할 수 있습니다. 별 등급을 비활성화하려면 별 등급을 초기화 할 때 'Readonly'옵션을 true로 설정할 수 있습니다.

다른 스타 아이콘을 어떻게 사용할 수 있습니까?

스타 등급을 초기화 할 때 'Staroff'및 'Staron'옵션을 변경하여 다른 스타 아이콘을 사용할 수 있습니다. 이 옵션은 사용하려는 아이콘의 이름을 허용합니다. 아이콘은 프로젝트에 포함 된 글꼴 아이콘 세트의 일부 여야합니다.

jQuery가없는 jQuery Star 등급을 사용할 수 있습니까?

jQuery Star 등급은 jQuery 플러그인이므로 작동하려면 jQuery가 필요합니다. jQuery없이 별 등급을 사용하려면 Pure JavaScript Star Rating 라이브러리와 같은 다른 솔루션을 찾아야합니다.

별 등급을 어떻게 재설정 할 수 있습니까?

값을 0으로 설정하여 별 등급을 재설정 할 수 있습니다. 이것은 별 등급 인스턴스의 '등급'방법을 사용하여 수행 할 수 있습니다. 예를 들어, 별 등급 인스턴스가 '등급'이라는 변수에 저장된 경우 'Rating.rating (0)'으로 재설정 할 수 있습니다.

양식에서 jQuery 별 등급을 사용할 수 있습니까?

예, jQuery Star 등급을 양식에서 사용할 수 있습니다. 별 등급은 양식의 숨겨진 입력 필드에 연결될 수 있습니다. 사용자가 양식을 제출하면 별 등급의 값이 양식 데이터에 포함됩니다.

jQuery Star 등급의 오류를 어떻게 처리 할 수 ​​있습니까?

jQuery Star 등급의 오류 처리는 '오류'이벤트를 사용하여 수행 할 수 있습니다. 이 이벤트는 유효하지 않은 값이 설정된 시점과 같이 별 등급에 오류가있을 때 트리거됩니다. 이 이벤트를 듣고 응용 프로그램에 적합한 방식으로 오류를 처리 할 수 ​​있습니다.

위 내용은 jQuery를 사용한 별 등급 제어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!