jQuery 또는 기타를 통해 아이콘을 사용하여 그래픽 선택 목록 구현

Question

HTML 양식을 구현 중입니다. 필드 (날씨)의 경우 사용자는 옵션 (맑은 날, 흐린 날, 비오는 날 등) 중 하나를 선택해야합니다.

기본적으로 시리즈를 제공하는 <select> 또는 <radio>을 찾고 있습니다. 사용자가 선택할 이미지 (제공 할 이미지)를 선택합니다. 선택하지 않은 항목을 나타내는 각 이미지의 흐리게/회색으로 표시된 버전을 만듭니다.

내가 아주 내가 원하는 것을 jQuery를 등급이 제공하는 컨트롤,하지만 아무것도의 부하 발견했습니다 (구글로 할 수 있으므로 정말 그것이라고 모르는 아마 때문에입니다.)

아, 사용자가 자바 스크립트를 사용하도록 설정하지 않은 경우 표준 <select> 또는 <radio> 옵션을 제공하려면 제대로 저하되어야합니다.

Answer 1

매우 쉽게 롤 수 있습니다. 과 같이 마크 업으로 시작합니다 활성화 자바 스크립트, 사용자가 위의를 얻을 것이다

<fieldset> 
    <input type="radio" name="weather" value="sunny" /> 
    <input type="radio" name="weather" value="cloudy" /> 
    <input type="radio" name="weather" value="rainy" /> 
    <input type="radio" name="weather" value="class-3-kill-storm" /> 
</fieldset> 

없이 (사람들이 클릭하고 있었는지 알고, 그래서 당신은 아마 레이블 요소를 추가 할 것). 그들 모두를 통해 다음 루프는 당신이 당신의 아이콘에 대한 필요가있을 <a> 요소를 생성 : IE 제대로 :hover CSS의 pseudoclass을 존중하기 때문에 내가 <a>을 사용하고

$('input[name=weather]').each(function() { 
    var radio = $(this); 
    radio.css({display: 'none'}); 

    var icon = $('<a class="icon ' + this.value + '"></a>'); 
    icon.click(function(e) { 
     // stop default link click behaviour 
     e.preventDefault(); 

     // unmark any previously selected image and mark clicked selected 
     icon.siblings('.icon').removeClass('selected'); 
     icon.addClass('selected'); 

     // set associated radio button's value 
     radio.attr('checked', 'true'); 
    }); 
    $(this).parent().append(icon); 
}); 

이유입니다. 또한 그 메모에서 CSS 스프린트를 사용하므로 그레이 버전과 풀 컬러 이미지를 40px 높이의 이미지로 결합 할 수 있습니다. 당신은 버전이 배경 색상 in action here를 사용하여 볼 수 있습니다

a.icon { 
    float: left; 

    /* width and height of your weather icons */ 
    width: 20px; 
    height: 20px; 

    background-repeat: no-repeat; 
    background-position: 0 0; 
} 

a.selected, 
a:hover.icon { 
    background-position: 0 -20px; 
} 

.sunny{ 
    background-image: url(sunny.png); 
} 

.rainy { 
    background-image: url(rainy.png); 
} 

/* remaining weather styles */ 

:

<a>의 CSS처럼 보일 것입니다.