我有一个用单选按钮呈现的表单,如下所示:
<h2>How long is your hair?</h2>
<input type="radio" name="71" value="98">Short
<input type="radio" name="71" value="99">Medium
<input type="radio" name="71" value="100">Long
大约有 15 个这样的问题,我希望使用 JQuery 用 slider 呈现整个表单(Jquery UI 似乎是最有可能的候选者)。
我找到了一些用于将选择框转换为 slider 的插件(例如 selectToUISlider ),但没有一个用于单选按钮。
我确信可以使用标准 UI slider 以某种方式推出我自己的 slider ,但我真的不知道从哪里开始。有没有人已经制作了插件来实现这一目标?
最佳答案
这是一个选项的基本结构,我不确定您的问题有何不同(它们都有 3 个选项吗?),因此样式会有所不同,只是试图演示这个概念。
我不确定每个问题都包含什么内容,所以我将您的内容放在 <div class="question">
中,然后给出输入标签(对于非 JS 用户来说性能会好一些),总体如下:
<div class="question">
<h2>How long is your hair?</h2>
<label><input type="radio" name="71" value="98">Short</label>
<label><input type="radio" name="71" value="99">Medium</label>
<label><input type="radio" name="71" value="100">Long</label>
</div>
然后用一些脚本将其转换为 slider ,如下所示:
$(".question").each(function() {
var radios = $(this).find(":radio").hide();
$("<div></div>").slider({
min: parseInt(radios.first().val(), 10),
max: parseInt(radios.last().val(), 10),
slide: function(event, ui) {
radios.filter("[value=" + ui.value + "]").click();
}
}).appendTo(this);
});
关于jquery - 使用 JQuery UI 将单选按钮转换为 slider 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3530652/