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

问题描述

我有一个用单选按钮呈现的表单，如下所示:

你的头发有多长?
<input type="radio" name="71" value="98">短<input type="radio" name="71" value="99">中<input type="radio" name="71" value="100">Long

大约有 15 个这样的问题，我希望使用 JQuery 用滑块呈现整个表单(Jquery UI 似乎是最有可能的候选者).

我找到了一些将选择框转换为滑块的插件(例如 selectToUISlider) 但没有用于单选按钮.

我确信可以使用标准 UI Slider 以某种方式滚动我自己的，但我真的不知道从哪里开始.有没有人已经制作了插件来实现这一目标?

解决方案

这是一个选项的基本结构，我不确定您的问题有何不同(它们都有 3 个选项吗?)所以样式会有所不同，只是试图演示这个概念.

我不确定每个问题的内容，所以我把你的内容放在一个 <div class="question"> 中，然后给输入标签(降级好一点对于非 JS 用户)，整体如下:

<h2>你的头发有多长?</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>

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

$(".question").each(function() {var radios = $(this).find(":radio").hide();$("<div></div>").slider({分钟:parseInt(radios.first().val(), 10),最大值:parseInt(radios.last().val(), 10),幻灯片:功能(事件，用户界面){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屋！