使用JQuery UI将单选按钮转换为滑块元素 [英] Using JQuery UI to convert radio buttons into slider elements

问题描述

 < h2>你的头发有多长时间？ < / H2> 
< input type =radioname =71value =98> Short 
< input type =radioname =71value =99> Medium 
< input type =radioname =71value =100> Long 
  

大约有15个这样的问题，我希望用滑块呈现整个表单，使用JQuery（jQuery UI似乎是最有可能的候选人）。

我找到了一些插件来将选择框转换为滑块（例如 selectToUISlider ），但没有单选按钮。

我确定可以使用标准UI滑块以某种方式推出自己的产品，但我不知道从哪里开始。有没有人已经做到了这一点插件？

解决方案

以下是一个选项的基本结构，我不确定您的问题有何不同（它们全都有3个选项？ ），所以风格会有所不同，只是试图展示这个概念。

我不确定每个问题包含什么，所以我把你的内容放在一个< div class =question> ，然后给出输入标签（对于非JS用户来说性能会降低一点），就像这样：

 < div class =question> 
< h2>你的头发要多久？< / h2> 
< label>< input type =radioname =71value =98>短< / label> 
< label>< input type =radioname =71value =99>中< / label> 
< label>< input type =radioname =71value =100>长< / label> 
< / div> 
  

然后用一些脚本将其转换为滑块，如下所示：

  $（。question）。each（function（）{
 var radios = $（this）.find（：radio ）.hide（）; 
 $（< div>< / div> b $ b max：parseInt（radios.last（）.val（），10），
 slide：function（event，ui）{
 radios.filter（[value =+ ui.value +]）。click（）; 
} 
}）。appendTo（this）; 
}）; 
  

你可以在这里试试看

I have a form which is rendered with radio buttons like so:

<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 

There are about 15 questions like this, and I would like to have the whole form rendered with sliders, using JQuery (Jquery UI seems like the most likely candidate).

I have found a few plugins for converting select boxes to sliders (e.g. selectToUISlider) but none for radio buttons.

I'm sure it is possible to roll my own somehow using the standard UI Slider, but I don't really know where to start. Has anyone already made a plug in to achieve this?

解决方案

Here's the basic structure of one option, I'm not sure how your questions differ (do they all have 3 options?) so the styling would vary, just trying to demonstrate the concept.

I'm not sure what each question is contained in, so I put your content in a <div class="question">, then gave the inputs labels (degrades a bit better for non-JS users), like this overall:

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

Then a bit of script to transform it into a slider, like this:

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

这篇关于使用JQuery UI将单选按钮转换为滑块元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！