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

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

2 голосов
/ 23 августа 2010

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

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

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

Да, и если у пользователя не включен JavaScript, он должен неплохо ухудшиться, чтобы обеспечить стандартные опции <select> или <radio>.

1 Ответ

3 голосов
/ 23 августа 2010

Вы могли бы бросить свой собственный довольно легко. Начните с разметки так: 

<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. Также в этой заметке я использую CSS-спрайты, чтобы вы могли объединить свои серые и полноцветные изображения в одно изображение высотой 40px с серой версией вверху.

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

Вы можете увидеть версию, использующую цвета фона в действии здесь .

...