无法在滑动后以编程方式更新Jquery mobile ui滑块

时间:2016-09-17 08:57:57

标签: jquery jquery-mobile

我创建了一个jQuery移动网站,它在所有桌面浏览器上运行得很好,在IE,Chrome和Firefox中进行了测试,并且像魅力一样。然而,当我打开相同的网站,例如使用safari或firefox的iphone或ipad时,它不会做应该做的事情。

一些额外的背景信息:移动网站在发送数据的硬件上运行。需要读取此数据,并且应该可以使用移动UI滑块更改这些数据。使用Jquery移动版:

On $(document).ready()我以编程方式设置每个滑块以匹配相应的数据输出通道,因此滑块1应匹配数据输出值的第一个通道。由于数据可能会不时发生变化,因此我需要确保每隔100ms检查一次window.setTimeout()函数的输出数据。然后我还设置了滑块的值并刷新它们。

现在一切正常,滑块得到更新,每当硬件输出的数据发生变化时,滑块也会发生变化。但是滑块是用户可以改变这些数据的,这就是我被困住的地方。每当滑块更改后,滑块停止更新其值,硬件响应滑块更改只有jquery移动站点停止更新。当我调整滑块时,我检查桌面上的网页,这里值不断更新,并且还可以看到在移动设备上完成的滑块更改。

对我而言,它似乎一直挂在正在创建的事件上,但我找不到它......

我已经在jfiddle中创建了一个简化的代码示例,并希望有人可以帮助我或指出我正确的方向,非常感谢!

$(document).ready(function() {

  // Retrieve data from output
  get_output(OUTPUT1, function update(t) {

      $("#slider1").val(t.values[0]).slider("refresh"); //Get data output for first channel
      console.log("Data output channel 1: " + t.values[0]);
      window.setTimeout(function() {
          get_output(OUTPUT1
          }, update);
      }, 100); // refresh every 100ms 
  });


$("#slider1").change(function() {
  SliderMoved(this.value, 0);
  $.throttle(300, true, SliderValueChanged(0));
});

});


//Store copy of slider value.
function SliderMoved(value, channel) {
  send_data(OUTPUT1, channel, value);
  newValue = value;
}


function SliderValueChanged(channel) {
  //check if same data doesnt get output the same
  if (LastValue[channel] != newValue[channel]) {
    LastValue[channel] = newValue[channel];
  }
}
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<div data-role="fieldcontain">
  <label for="slider1">Slider:</label>
  <input type="range" name="slider1" id="slider1" value="0" min="0" max="255" data-highlight="true" />
</div>


<button type="button" id="setting1" onclick="fire(1)">Setting1</button>
<button type="button" id="setting2" onclick="fire(2)">Setting2</button>

0 个答案:

没有答案