Реализация графического списка выбора с помощью значков через jQuery или другие

Question

Я реализую форму HTML. Для одного из полей (погода) пользователь должен выбрать один из вариантов (солнечный, облачный, дождливый и т. Д.)

Итак, в основном я ищу хорошую замену для <select> или <radio>, которая обеспечивает серию изображений (которые я предоставлю) для выбора пользователем. Я создам dulled/greyed версии каждого изображения, представляющие невыбранные элементы.

Я нашел кучу Jquery рейтингового управления, которые обеспечивают это, но ничего такого, что вполне делает то, что я хочу (вероятно, потому что я не знаю, что это называется, и, следовательно, не может нагуглить.)

О, и если у пользователя нет встроенного JavaScript, он должен ухудшиться, чтобы обеспечить стандартные параметры <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> 

Без Javascript включен, пользователи получат выше (вы, вероятно, хотите, чтобы добавить некоторые элементы маркировки, чтобы люди знали, что они кликают;). Далее цикл через все из них и создать <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); 
}); 

Причина я использую <a> потому, что IE будет правильно соблюдать :hover CSS pseudoclass. Также в этой заметке я использую CSS-написание, чтобы сочетать ваши серые и полноцветные изображения с одним высоким разрешением 40 пикселей с серой версией вверху.

CSS-код для <a> будет выглядеть примерно так:

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

Вы можете увидеть версию с помощью цвета фона in action here.