如何为我的调查问卷中的答案创建交互式进度滑块

时间：2015-12-10 19:00:10

标签： javascript jquery html css

＆＃13;
＆＃13; 
<div class="QuestionBody">   
<table role="presentation" class="ChoiceStructure" cellpadding="0" cellspacing="0" border="0"> 
  <tbody> <tr>   
    <td width="20%" class="LabelContatiner ">  
      <span class="LabelWrapper">  
        <label for="QR~QID9~1" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected" style="padding-top: 0px; padding-bottom: 20px;">  
          <span>0-5</span>
        </label>
      </span> 
      <label for="QR~QID9~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> 
    </td>   
    <td width="20%" class="LabelContatiner alt">  
      <span class="LabelWrapper">  
        <label for="QR~QID9~2" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected" style="padding-top: 0px; padding-bottom: 20px;">   
          <span>6-10</span>
        </label>
      </span> 
      <label for="QR~QID9~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> 
    </td>   
    <td width="20%" class="LabelContatiner "> 
      <span class="LabelWrapper">  
        <label for="QR~QID9~3" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected" style="padding-top: 0px; padding-bottom: 20px;">   
          <span>11-15</span>
        </label>
      </span> 
      <label for="QR~QID9~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> 
    </td>   
    <td width="20%" class="LabelContatiner alt">  
      <span class="LabelWrapper">  
        <label for="QR~QID9~4" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected" style="padding-top: 0px; padding-bottom: 20px;">   
          <span>16-20</span>
        </label>
      </span> 
      <label for="QR~QID9~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> </td>   <td width="20%" class="LabelContatiner ">  
    <span class="LabelWrapper">  
      <label for="QR~QID9~5" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.5.Selected" style="padding-top: 0px; padding-bottom: 20px;">   
        <span>20+</span>
      </label>
    </span> 
    <label for="QR~QID9~5" class="q-radio" data-runtime-class-q-checked="runtime.Choices.5.Selected"></label> 
    </td>  
    </tr> 
    <tr>   
      <td style="width: 20%;" class="ControlContainer "> 
        <input choiceid="1" class="radio QR-QID9-1" type="radio" name="QR~QID9" id="QR~QID9~1" value="1" data-runtime-checked="runtime.Selected"> 
      </td>   
      <td style="width: 20%;" class="ControlContainer alt"> 
        <input choiceid="2" class="radio QR-QID9-2" type="radio" name="QR~QID9" id="QR~QID9~2" value="2" data-runtime-checked="runtime.Selected"> 
      </td>   
      <td style="width: 20%;" class="ControlContainer "> 
        <input choiceid="3" class="radio QR-QID9-3" type="radio" name="QR~QID9" id="QR~QID9~3" value="3" data-runtime-checked="runtime.Selected"> 
      </td>   
      <td style="width: 20%;" class="ControlContainer alt"> 
        <input choiceid="4" class="radio QR-QID9-4" type="radio" name="QR~QID9" id="QR~QID9~4" value="4" data-runtime-checked="runtime.Selected"> 
      </td>   
      <td style="width: 20%;" class="ControlContainer "> 
        <input choiceid="5" class="radio QR-QID9-5" type="radio" name="QR~QID9" id="QR~QID9~5" value="5" data-runtime-checked="runtime.Selected"> 
      </td>  
    </tr> 
  </tbody>
  </table> 
</div>
＆＃13;
＆＃13;
＆＃13;

作为编程的初学者，我试图让问卷Copie看起来像这样Prototype。我需要一个滑块连接所有答案选项并根据答案从左到右进行。遗憾的是，无法更改网站的HTML代码，因此必须通过添加JavaScript或CSS来完成。有什么想法可以提供帮助吗？

2 个答案:

答案 0 :(得分：1)

是的，这很简单。我首先要解决你希望点亮进度的酒吧。为此，我将从包含div开始。

<div class="Progress"></div>

然后我将其设计为基础栏背景，查看您的设计，其中包括以下内容：

.Progress {
    position: relative;
    width: 600px;
    height: 15px;
    background: #888;
}

然后我会制作进程条，这条条将在后台运行，并带有圆点。

<div class="Progress">
    <div class="Progress__glow"></div>
</div>

这种风格的含义如下：

.Progress__glow {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    background: lightblue;
    width: 0%;
}

这将遵循包含div的路径。然后，更改元素的宽度将更改进程的宽度。例如。

<div class="Progress_glow" style="width: 50%"></div>

您可以使用Javascript设置此内容。

对于点，我会做这样的事情。

.Dot {
    position: absolute;
    top: -5px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background: #fff;
}

.Dot--active {
    background: lightblue;
}

.Dot--one {
    left: 0%;
}

.Dot--two {
    left: 25%;
}

.Dot--three {
    left: 50%;
}

.Dot--four {
    left: 75%;
}

.Dot--five {
    left: 100%;
}

然后，您可以将发光设置的％宽度设置为使用Javascript传递点的活动状态。

CSS工作的一个示例：http://codepen.io/JosephSmith127/pen/KVpxoz

显然你可以看到需要进行一些调整。但这应该会给你一个很好的开始！

答案 1 :(得分：1)

我已经修改了JosephSmith的codepen.io示例，当您点击点以将萤光线移动到点击的点时包含jquery事件：http://codepen.io/anon/pen/GZNGVR

HTML HEAD：

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

HTML：

<div class="container">

  <div class="Progress">
      <span id="dotOne" class="Dot Dot--one Dot--active"></span>
      <span id="dotTwo" class="Dot Dot--two"></span>
      <span id="dotThree" class="Dot Dot--three"></span>
      <span id="dotFour" class="Dot Dot--four"></span>
      <span id="dotFive" class="Dot Dot--five"></span>
      <div class="Progress__glow" style="width: 0%;"></div>
  </div>

</div>

CSS：

/* You don't need this bit */
.container {
  margin: 50px;
}

.Progress {
  position: relative;
  border-radius: 99em;
  width: 600px;
  height: 15px;
  background: #888;
}

.Progress__glow {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  background: lightblue;
  width: 0%;
}

.Dot {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  border-radius: 50%;
  background: #ccc;
  z-index: 2;
}

.Dot--active {
  background: lightblue;
}

.Dot--one { left: 0%; }
.Dot--two { left: 25%; }
.Dot--three { left: 50%; }
.Dot--four { left: 75%; }
.Dot--five { left: 98%; }

JS：

$('#dotOne').click(function() {
  $('.Progress__glow').css('width', '0%');
  $('#dotOne').addClass('Dot--active');
  $('#dotTwo').removeClass('Dot--active');
  $('#dotThree').removeClass('Dot--active');
  $('#dotFour').removeClass('Dot--active');
  $('#dotFive').removeClass('Dot--active');
});
$('#dotTwo').click(function() {
  $('.Progress__glow').css('width', '26%');
  $('#dotOne').addClass('Dot--active');
  $('#dotTwo').addClass('Dot--active');
  $('#dotThree').removeClass('Dot--active');
  $('#dotFour').removeClass('Dot--active');
  $('#dotFive').removeClass('Dot--active');
});
$('#dotThree').click(function() {
  $('.Progress__glow').css('width', '51%');
  $('#dotOne').addClass('Dot--active');
  $('#dotTwo').addClass('Dot--active');
  $('#dotThree').addClass('Dot--active');
  $('#dotFour').removeClass('Dot--active');
  $('#dotFive').removeClass('Dot--active');
});
$('#dotFour').click(function() {
  $('.Progress__glow').css('width', '76%');
  $('#dotOne').addClass('Dot--active');
  $('#dotTwo').addClass('Dot--active');
  $('#dotThree').addClass('Dot--active');
  $('#dotFour').addClass('Dot--active');
  $('#dotFive').removeClass('Dot--active');
});
$('#dotFive').click(function() {
  $('.Progress__glow').css('width', '101%');
  $('#dotOne').addClass('Dot--active');
  $('#dotTwo').addClass('Dot--active');
  $('#dotThree').addClass('Dot--active');
  $('#dotFour').addClass('Dot--active');
  $('#dotFive').addClass('Dot--active');
});
相关问题
最新问题