jQuery를 사용한 별 등급 제어

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

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>

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

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

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

팁 : 기타 트래버스 방법 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 스프라이트를 원래 상태로 되돌리고 싶습니다. 그리고 그들이 클릭 할 때, 우리는 선택 골드를 만들고 싶습니다 :

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

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