我创建了一个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>