我正在实现一个 HTML 表单。对于其中一个字段(天气),用户必须从一组选项(晴天、多云、下雨等)中选择一个。
所以基本上我正在寻找一个很好的替代 <select>
或 <radio>
它提供了一系列图像(我将提供)供用户选择。我将为代表未选中项目的每个图像创建暗淡/灰色版本。
我找到了大量提供此功能的 jQuery 评级控件,但没有一个能完全满足我的要求(可能是因为我真的不知道它叫什么,因此无法用 Google 搜索它。)
哦,如果用户没有启用 JavaScript,它应该很好地降级以提供标准 <select>
或 <radio>
选项。
最佳答案
您可以很容易地自己推出。从这样的标记开始:
<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 spriting,因此您可以将灰色和全彩色图像组合成一个 40 像素高的图像,灰色版本位于顶部。
<a>
的 CSS看起来像:
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 .
关于javascript - 通过 jQuery 或其他使用图标实现图形选择列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3549106/