야후 사용자 인터페이스 블로그 (YUIBlog)

이용 등급 평가의 위젯을 개발

년 | 9 시에 2010년 8월 24일 티에리 Koblentz하여 오전 접근성 , 개발 | 18 코멘트

서둘러에서? 로 이동 데모 페이지 .

많은 전자 상거래 사이트, 소셜 네트워킹 서비스, 온라인 커뮤니티 등급이나 평가 기능을 포함합니다. 사람들의 의견을 모집하는 것은 심지어 비즈니스 모델이되었다, 평가 제품, 서비스, 기업 등 전용 사이트가 지금은 없습니다.

투표를 표시하는 데 사용되는 가장 일반적인 인터페이스는 포인트의 특정 번호는 (종종 별빛으로 표현) 각 검토자가 항목에 할당되는 "별 등급 시스템"입니다. 우리는 아마존에서 옐프로 많은 사이트에이 모델을 찾으십시오.

마찬가지로 그림 들이 마크업 기반 쇼를 두 시각적 인터페이스는 비슷합니다,하지만 만약이 두 솔루션은 재미있는 것입니다. 하나에 의존 <map> 에서 다른 <img> .

당신은 대부분의 평가 시스템은 다양한 사용자 에이전트에 걸쳐 의미와 "경영"이라고 입증 일부 마크업을 기반으로됩니다 생각할 수도 있겠지만 - 그 평가 시스템이 하나가 동작을 적용하는 HTML 요소와 속성의 특정 집합에 기초하고있을 수도있다는 것입니다 JS와 CSS를 통한 스타일. 말도 것이지만, 그것은 깨어날 것입니다. 그것이 마크업 측면에서 본다면 저자 막 모든 것을 시도하십시오

• <a> ,
• <img> ,
• <span> ,
• <li> ,
• <map> ,
• <div> ,
• <input> ,
• 등 ...

마이크로 포맷의 경우

등급을 표시하는 몇 가지 이미지 기반 기법을 제시하기 전에, 난 그것이 기본적이고 간단 접근법 (에서 언급할 가치가있다 생각하는 마이크로 포맷 문자를 사용합니다) :

 <abbr class="rating" title="3 stars">***</abbr> 

프로

그것은 간단하고 의미입니다.

이윤은 최소이다.

방법은 CSS에 의존하지 않습니다.

방법은 이미지에 의존하지 않습니다.

어떤 HTTP 요청은 없습니다.

단점

그것은 반 값 (예 : 3.5 별들을)를 대표하는 것은 불가능

그것은 오직 별표 ( "별 등급")와 "작동".

스크린 리더는 기본적으로 약자를 (이 경우에는 큰 문제가 아닐 수도 있음) 확장되지 않습니다.

참고 : 스크린 독자가 (적어도 때문에 오히려 ★ (★)보다 "*"를 사용 JAWS 및 NVDA ) HTML 엔티티를 무시하는 것 같습니다.

이윤은 이미지 기반의 등급을 표시하는 방법

그것이 이미지를 표시되면, 저자는 많은 옵션이 있습니다.

등급마다 하나의 이미지

단일 이미지를 사용 :

 <img src="4stars.png" alt="4 out of five"> 

한 별

두명의 스타

별세

네 별빛

별 다섯개

프로

등급마다 하나의 이미지를 사용하면 간단하고 의미입니다.

방법은 CSS에 의존하지 않습니다.

최소 마크업.

단점

여러 이미지가있는대로 많은 HTTP 요청을 만듭니다.

저자는 더 많은 자산을 처리하는 (만드는 CDN을 강요하는 때, 사이트 색상 변경 등 수정 이미지)을 가지고로서 성능 문제 우선, 그것은 유지 보수 악몽이 될 수 있습니다.

대체 텍스트가 무시되기 때문에 텍스트를 선택하면 오페라 (적어도 버전 9.52에서)으로 불가능

단위 당 하나의 이미지

whatwg의에서 작업 초안 :

 <img alt="4 out of 5" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="no-star.png"> 

한 별

두명의 스타

별세

네 별빛

별 다섯개

프로

이 사용 img 등급 당 요소 것은 HTTP 요청의 수를 감소.

방법은 CSS에 의존하지 않습니다.

단점

오페라에서는 이미지가 비활성화된 경우, 대체 텍스트가 선택되지이며, (작은 화면보기에서) 해당 텍스트는 덜 판독하게 테두리로 렌더링됩니다.

이것은 논란의 작업 초안에서 가져 않습니다. 대체 텍스트를 정확하고 간결하여 이미지를 표현하지 못하기 때문에 제 생각에는,이 방법은 허용되지 않습니다. 이 방법에 근거하여 해당 이미지 내용을 표현하는 경우 그리고,, 그때는 왜없이 그 중 일부를 떠나 alt 텍스트?

에서 Ajaxian 예를 들어, 저자가 그 각각의 콘텐츠는 것을 고려한다면 이해 되네요마다 하나의 이미지로 대체 텍스트를 사용하고 있습니다 :

 <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="-" src="star0.png"/> <img [snip] alt="-" src="star0.png"/> 

어떤 경우에는 하나의 요소를 (사용하는 대 별이가 많은 이미지로 사용 img 아니면 다른 문제)이 투표 메커니즘을 촉진의 주요 장점이 있습니다 - 사용자가 자신의 투표를 위해 스타 중 하나를 선택 어디. 그래서 우리가 염두에 두어야합니다 ...

배경 이미지에 대한 요정

다음과 같은 기술의 개발자에 의해 원래 구현 전략의 적응은 야후! 음악 :

마크업

 <span class="rating r1 stars">1 of 5</span> <span class="rating r2 stars">2 of 5</span> <span class="rating r3 stars">3 of 5</span> <span class="rating r4 stars">4 of 5</span> <span class="rating r5 stars">5 of 5</span> 

CSS

 .stars { background: transparent url(img/sprite.png) no-repeat; } .rating { font-size: 0; height: 19px; overflow: hidden; vertical-align: middle; width: 96px; display: block; } .r1 { background-position: -385px 0; } .r2 { background-position: -288px 0; } .r3 { background-position: -192px 0; } .r4 { background-position: -96px 0; } 

한 별

5 단계 중 1

두명의 스타

5 단계 중 2

별세

5 단계 중 3

네 별빛

5 단계 중 4

별 다섯개

5 개 중 5

프로

이 방법은 하나의 스프 라이트 이미지에 의존로 단일 HTTP 요청이 필요합니다.

최소 "걸어서 인쇄".

단점

콘텐츠는 이미지를 드러낸 채 공개되지 않습니다.

아무것도 페이지 (인쇄 스타일 시트가이 문제 돌볼 수) 인쇄할 때 표시됩니다 없다.

오페라에서 높은 콘트라스트 스타일 시트는 모든 별들이을 사라지게하는, 동일에 해당하는 고대비 모드 최적화 .

텍스트 선택이 가능하지만 (강조 경유) 분명 아니에요.

마크업의 요정

이러한 접근 방식은 기반으로하는 팁 메소드 사용 요정 이미지 로 <img> 요소보다는 배경 이미지 :

마크업

 <span title="1 of 5" class="rating r1"><img width="0" height="1" src="sprite.gif" alt=""/>1 out of 5</span> <span title="2 of 5" class="rating r2"><img width="0" height="1" src="sprite.gif" alt=""/>2 out of 5</span> <span title="3 of 5" class="rating r3"><img width="0" height="1" src="sprite.gif" alt=""/>3 out of 5</span> <span title="4 of 5" class="rating r4"><img width="0" height="1" src="sprite.gif" alt=""/>4 out of 5</span> <span title="5 of 5" class="rating r5"><img width="0" height="1" src="sprite.gif" alt=""/>5 out of 5</span> 

CSS

 .rating { position: relative; height: 1.6em; width: 8.1em; overflow: hidden; vertical-align: middle; display: block; } .rating img { position: absolute; width: 40.5em; height: 1.55em; top: 0; border: 1px solid #fff; } .r1 img { right: 0; } .r2 img { left: -24.4em; } .r3 img { left: -16.2em; } .r4 img { left: -8.1em; } 

한 별

5 10 분

두명의 스타

5 밖으로이

별세

5 밖으로 3

네 별빛

4 5 밖으로

별 다섯개

5 5

프로

이 방법은 단일 HTTP 요청이 필요합니다.

이 기술은 파이어 폭스 사용자는 "이미지 숨기기"또는 "이미지가 보이지 만들기를"(개발자의 도구 모음에서)를 선택하면 내용을 밝히지 위의 4 가지 방법 중 하나입니다.

그것에 의존하는 다른 솔루션과 사건으로 이미지를 사용할 때는 빨간색 "X"는 각각의 대신 최고 등급 (5 예 5)에서만 나타나는 img 요소.

단점

이미지 디스플레이는 CSS에 의존합니다.

그것은 다른 이미지 대체 기법과는 달리이 방법 있도록 협조할 것입니다 :

• 이미지는 텍스트 크기 설정에 따라 확장할 수 있습니다.
• 이미지를 인쇄할 수 있습니다.
• 전체 이미지 (파이어 폭스) 강조 표시되는 대체 텍스트가 쉽게 선택할 수 있습니다.
• 이미지 고대비 설정 / 스타일 시트에서 사라지지합니다.
• 오페라의 대체 텍스트 선택 (이미지를 비활성화하는 경우).
• Opera의 작은 화면보기의 국경 대체 텍스트입니다.

투표를하기위한 마크업

기본 메커니즘으로 시작

투표를하기 위해, 우리는 간단한 사용자 선택과 제출을 허용 낮은 수준의 투표 메커니즘이 필요합니다. 이를 위해, 우리는 라벨과 컨트롤과 양식을 사용에 의존하고 있습니다 :

마크업

 <fieldset> <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5">1/5</label> <label><input type="radio" name="movie" value="2_5">2/5</label> <label><input type="radio" name="movie" value="3_5">3/5</label> <label><input type="radio" name="movie" value="4_5">4/5</label> <label><input type="radio" name="movie" value="5_5">5/5</label> </fieldset> 

결과

평가

5분의 1 5분의 2 5분의 3 5분의 4 5분의 5

추가 휴식과 공백

더 읽기 쉬움에 대해서는 추가 <br> 와 공백을.

마크업

 <fieldset> 
 <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset> 

결과

평가

5분의 1
5분의 2
5분의 3
5분의 4
5분의 5

마크업에 스프 라이트 이미지를 소개합니다

이 솔루션의 경우 우리는 위의 예제에서보다 작은 스프 라이트를 사용하고 있습니다. 그것은 현재로 구성되어 2 개의 싱글 별이 ( "ON"과 "OFF").

우리는 배치 img 레이블 내부 요소를. 우린 그들이 우리가 그들을 통해 구체적인 규격을 설정하여 그들을 "숨기기"따라서, CSS 지원없이 아무런 가치가 없습니다 가정 width 및 height 속성. 를 사용합니다 0 모두 속성으로 일부 UA-s에 깨진 이미지를 보여줄 것이다.

 <form ...> <fieldset> <legend>Rating</legend> <label class="one" title="1 out of 5"><input name="LandOf" value="1" checked="checked" type="radio"> 1/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="two" title="2 out of 5"><input name="LandOf" value="2" type="radio"> 2/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="three" title="3 out of 5"><input name="LandOf" value="3" type="radio"> 3/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="four" title="4 out of 5"><input name="LandOf" value="4" type="radio"> 4/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="five" title="5 out of 5"><input name="LandOf" value="5" type="radio"> 5/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> </fieldset> </form> 

위의 마크업과 함께, 우리는 (대부분의 브라우저에서) 라벨 선택을 통해 필드 선택을 기대할 수 있습니다.

접근성을 고려

:이기 때문에 불행하게도,이 마크업은 적어도 두 개의 스크린 리더에 문제를 만들고 JAWS 및 NVDA (보고 테스트 케이스 이러한 버그를.) 문제의 사용과 관련되어 title 속성 및 대체 텍스트에 대한 빈 문자열입니다.

스크린 리더 사용자를 혼동하지 않는 해결 방법은 대체 텍스트 (로 "별이"를 사용하는 것입니다 alt )를 삽입하는 자바 스크립트를 사용하여 title mouseover에.

더 나은 마크업

 <fieldset> 
 <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset> 

결과

평가

5분의 1
5분의 2
5분의 3
5분의 4
5분의 5

스타일링

CSS를 통해 이미지 크기가 주어진다

우리가 사용하는 em 이미지 글꼴 크기에 따라 성장 또는 축소하도록.

마크업

변하지 않은

CSS

 img { width:2.8em; height:1.4em; } 

결과

평가

5분의 1
5분의 2
5분의 3
5분의 4
5분의 5

당신이 이미 볼 수 있듯이, 이미지를 클릭하면 해당 라디오 버튼을 선택합니다. 암시적 라벨이 문제를 (IE에서 제외) 생산으로 스크립팅 필요는 없습니다.

흐름에서 이미지 제거

스타일링 label 과 position:relative 하고있는 이미지 position:absolute 으로 top / left 값 것은 숨길 정도로 충분 input 라벨 내부와 텍스트를.

마크업

변하지 않은

CSS

  레이블 { 
    위치 : 상대적;
 } 
 IMG {
   폭 : 2.8em;
   높이 : 1.4em;
    위치 : 절대; 
    상단 : 0; 
    왼쪽 : 0; 
 } 

결과

평가

5분의 1
5분의 2
5분의 3
5분의 4
5분의 5

레이블 당 하나의 별표를 표시

우리는 스타일 라벨의 크기는 단일 스타의 높이와 너비와 일치하도록합니다.

마크업

변하지 않은

CSS

 label { position:relative;   높이 : 1.4em;
  폭 : 1.4em;
  오버플로우 : 숨겨진;
  디스플레이 : 블록; 
 }
 IMG {
   폭 : 2.8em;
   높이 : 1.4em;
   위치 : 절대;
   상단 : 0;
   왼쪽 : 0;
 } 

결과

평가

5분의 1
5분의 2
5분의 3
5분의 4
5분의 5

수평 별을 표시

우리는 제거 br 을 우리는 레이블을 떠.

마크업

변하지 않은

CSS

  BR {
  디스플레이 : 없음;
 } 
 레이블 {
   위치 : 상대적;
   높이 : 1.4em;
   폭 : 1.4em;
   오버플로우 : 숨겨진;
    디스플레이 : 블록; 
    플로트 : 왼쪽; 
 }
 IMG {
   폭 : 2.8em;
   높이 : 1.4em;
   위치 : 절대;
   상단 : 0;
   왼쪽 : 0;
 } 

결과

평가

5분의 1
5분의 2
5분의 3
5분의 4
5분의 5

등급에 따라 요정 이미지를 표시하기

평가 "5 단계 중 3 아웃"을 설정하려면, 우리는 마지막 두 레이블에 동일한 클래스를 적용합니다. 이 클래스는 라벨 내부 이미지의 위치를​​ 이동합니다.

마크업

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label   클래스 = "no_star"   > <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="4_5"> 4 / 5 </ 라벨> <BR>
 <라벨   클래스 = "no_star"   > <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="5_5"> 5 / 5 </ 레이블>
 </ fieldset> 

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0; }   . no_star IMG {
  왼쪽 :-1.4em;
 } 

결과

평가

5분의 1
5분의 2
5분의 3
5분의 4
5분의 5

정보를 표시 혼자 이미지에 의존하지

그것은 이미지가 사용할 수없는 경우에 별이의 표시에 대한 대안을 제공하는 것이 중요합니다. 라벨 및 라디오 버튼이 서로 맨 먼저 스타일을하고 있기 때문입니다. 간단한 해결책은 이동하는 것입니다 input 과 텍스트 오프 스크린 (즉, 사용 text-indent:-999em 하고있는 레이블에 배경 색상을 적용).

마크업

변화 없음

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;   배경 : 물오리;
  마진 오른쪽 : 1px;
  텍스트 들여쓰기 : - 999em; 
 }
 IMG {
   폭 : 2.8em;
   높이 : 1.4em;
   위치 : 절대;
   상단 : 0;
   왼쪽 : 0;
 }
  . no_star {
  배경 : # CCC;
 } 
 . no_star IMG {
   왼쪽 :-1.4em;
 } 

참고 :

• text-indent 도 위쪽은 이미지의 컨트롤이 포커스를받을 때마다 점프 수정합니다.
• 오른쪽 여백은 배경색이 사각형이 아닌 직사각형을 (같은 배경색을 공유하는 인접 레이블 일어날하는) 만들 수 있는지 확인하는 것입니다.

결과

평가

5분의 1
5분의 2
5분의 3
5분의 4
5분의 5

터치 마감

• 우리는 의사 - 클래스를 사용 :hover 일부 롤오버 효과를 생성하기 위해서,
• 우리는 fieldset 테두리를 숨길,
• 우리는 범례를 숨기려면
• 우리는 스타일 커서를.

마크업

변하지 않은

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; background:teal; margin-right:1px; text-indent:-999em; } input { position:absolute; left:-999em; top:.5em; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0;   커서 : 포인터; 
 }
 . no_star {
   배경 : # CCC;
 }
 . no_star IMG {
   왼쪽 :-1.4em;
 }
  레이블 : 가져가 {
  불투명도 : 0.5;
  필터 : 알파 (불투명도 = 50);
 }
 fieldset {
  국경 : 0;
 }
 전설 {
  텍스트 들여쓰기 : - 999em;
 } 

참고 : label:hover 영상을 통해 배경 컬러가 흘러요 IE6에서와 오페라에서 무시됩니다. 에서 데모 페이지 대신 사용하는 opacity , 제가 사용하고 다른 요정 네 상태를 보여줍니다.

결과

평가

5분의 1
5분의 2
5분의 3
5분의 4
5분의 5

사용자 상호 작용을 허용하지 않고 등급 표시

우리는 추가하여 등급이 "읽기 전용"할 수 disabled 하고 checked 적절한에 속성을 input 필드.

마크업

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"   비활성화   > 5분의 1 </ 레이블> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <입력 유형 = "라디오"이름 = "영화"값 = "2_5"   비활성화   > 5분의 2 </ 레이블> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <입력 유형 = "라디오"이름 = "영화"값 = "3_5"선택 = "   체크   "> 5분의 3 </ 레이블> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <입력 유형 = "라디오"이름 = "movie"라는 가치 = "4_5"   비활성화   > 5분의 4 </ 레이블> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <입력 유형 = "라디오"이름 = "movie"라는 가치 = "5_5"   비활성화   > 5분의 5 </ 레이블>
 </ fieldset> 

CSS

사용 규칙 :hover 삭제되었습니다

H4> 결과

평가

5분의 1
5분의 2
5분의 3
5분의 4
5분의 5

프로세스에 더 많은 생각을주는

이때는 스크립트를 지원하지 않고 투표를하는 것이 가능하지만, 시력 사용자는 자신의 선택에 대해 모릅니다. 그래서 우리는 JavaScript를 사용하십시오

• 그의 선택과 관련하여 사용자에게 피드백을 제공
• 그들이 라디오 단추를 탐색하는 동안 키보드 사용자에게 시각적인 실마리를 제공합니다.

동시에, 우리는 삽입 스크립트를 사용을 활용 title 사용자가 라벨 / 별을 위로 마우스를 가져가면 때 "툴팁"를 생성합니다 특성을.

스크립트가 지원이있을 경우에만 있기 때문에 자바 스크립트없이는 피드백에 관한 선택의 부족, 우리 스타일의 라벨 및 양식 제어합니다. 우리에 플래그를 설정하는 자바 스크립트를 사용할 수 있도록하려면 html 요소 그리고 우리는 그 고리를 포함하는 자손의 선택자을 기반으로 규칙을 만듭니다. 플래그가없는 경우, 그 규칙은 적용되지 않으며 요소 스타일되지 않습니다.

이것은 데모 페이지 , 최종 제품. 이 솔루션은 다양한 설정에 따라 동작하는 방법을 확인하려면, 당신은 CSS를 해제 JavaScript를 사용 중지, 이미지 경로를 깰, 텍스트 크기를 증가 좋아하는 개발자 도구를 사용하려면, 그리고 더 있습니다 ...

싸다

"허용"해결책을 세우는 것은 사용자의 요구, 사용자 에이전트 '특성, 사용자 에이전트'설정 및 자세한 내용을 파악해야합니다 - 이것은 광범위한 테스트를 의미합니다.

모범 사례를 따르는 것이 항상 확실한되지 않기 때문에이 과정에서 사용자의 피드백이 필수적입니다. 예를 들어, 등에 대한 값을 설정도, 앞서 언급한 alt 라벨 내에서 이미지의 속성은 하는게 안전하게 될 것 같다,하지만 그것이 최소한 두 screenreaders (참조 문제를 만드는 것이 밝혀졌 테스트 케이스를 ).

또한, 보조 장치 '사용자의 의견은 어떤 검증 오류 메시지를 무시하도록 허용 - 하나로서 그 파이어 폭스의 접근성 툴바 보고서 (에 따라 http://bestpractices.cita.uiuc.edu/html/nav/form/ ).

여기서 목표는하지만, 모든 문제를 해결하는 데 아니었어요. 포인팅 장치없이 투표를 할 수있는 것은 나의 우선순위 중 하나지만, 이미지가 비활성화되어 오페라의 솔루션의 모양과 느낌을 개선하는 것은 정말 필수적인 고려 일이 아니다.

이 "여행"의 가장 흥미로운 부분은 같은 문제에 대응, 다양한 상황에서 여러 사용자가 액세스할 솔루션을 만드는 것이었다 :

• 이미지 해제,
• 자바 스크립트 오프,
• CSS 끄기,
• 상기의 조합.

그것은이 기술에 의존하는 것을 알고도 좋은 img 오히려 별이가 있습니다 배경 이미지보다 요소 :

• , 사용자의 설정에 따라 자신의 크기를 조정
• 고대비 모드로 표시,
• 기본적으로 인쇄 (배경 이미지와는 달리).

이 솔루션이 하나의 스프 라이트에 의존로이 모든 성능을 희생하지 않고 온다 :

늦은 찾기

저는 최근에 아마존이 자사의 투표 페이지에 구축한 시스템을 발견했다. 그들은 스크립트 지원에 따라 서로 다른 솔루션을 제공로서 그것은 매우 흥미롭습니다. 스크립트가 지원이있다면, 그들은 이미지를 사용 <map> 그들이 라디오 단추를 사용하여 어떤 스크립트가 지원이없는 경우, (흥미있는 접근을). 두 경우 솔루션은 키보드 사용자가 액세스할이며, 이것은 아마존의 플랫폼을위한 차별 핵심은 기능에 대한 액세스를 극대화하는 데 도움이됩니다.

그들은 이미지와 라디오 버튼을 대체하는 자바 스크립트를 사용하지 않습니다 <map> , 대신에, 그들이 사용하는 noscript 테이블 마크업이 라디오 버튼을 포함하는 요소.

"밖으로 상자의"솔루션

드림위버 ^®

활발한 등급 위젯

YUI

YUI를위한 등급 스크립트

YUI와 등급 스크립트

JQuery

하프 등급 플러그인

측정자 jQuery 아약스

단순 등급 제도

PHP, MySQL과 jQuery의 5 성급 평가 시스템

워드 프레스

워드 프레스를위한 GD 등급 시스템

GD 등급 평가

리뷰에 대한 등급

플래시

5 성급 평가 시스템 구성 요소

기타.

별 등급은 어떻게해야

별이 빛나는 위젯 2

특별 감사

빅터 Tsaran과 소중한 피드백을위한 토드 Kloots에 대한 특별 감사합니다.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!