代码之家 › 专栏 › 技术社区 › jsims281

使用jqueryui将单选按钮转换为滑块元素

radio-button user-interface jquery-ui forms jquery

jsims281 · 技术社区 · 14 年前

<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(jqueryui似乎是最有可能的候选者)用滑块呈现整个表单。

selectToUISlider )但单选按钮没有。

我确信我可以用标准的UI滑块来滚动自己的页面,但是我真的不知道从哪里开始。有人已经做了一个插件来实现这一点吗?

1 回复 | 直到 14 年前

Nick Craver 14 年前

这是一个选项的基本结构,我不知道你的问题有什么不同(他们都有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>

$(".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);
});

You can give it a try here