2

我正在实现一个 HTML 表单。对于其中一个字段（天气），用户必须从一组选项（晴天、阴天、下雨等）中选择一个。

所以基本上我正在寻找一个很好的替代品，<select>或者<radio>提供一系列图像（我将提供）供用户选择。我将为每个代表未选中项目的图像创建暗色/灰色版本。

我发现了大量提供此功能的 jQuery 评级控件，但没有什么能完全满足我的要求（可能是因为我真的不知道它叫什么，因此无法谷歌搜索。）

哦，如果用户没有启用 JavaScript，它应该很好地降级以提供标准<select>或<radio>选项。

4

1 回答 1

3

你可以很容易地自己滚动。从这样的标记开始：

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

我使用 an 的原因<a>是 IE 会正确地尊重:hoverCSS 伪类。另外，我正在使用 CSS spriting，因此您可以将灰色和全彩色图像组合成一个 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 */

您可以在此处查看使用背景颜色的版本。

于 2010-08-23T16:15:02.127 回答