Question

我正在使用滑块更改我用flot显示的图表的最小值/最大值。

这是我的滑块HTML：

<div id=timerangeslider>
        <form>
            <div class="ui-grid-a" id="slider3">
            <label for="slider-2">Anzeige-Zeitraum (in Stunden):</label>
            <input type="range" name="slider-2" id="slider-2" data-highlight="true" min="1" max="48" value="24">
            </div><!-- /ui-grid -->
        </form></div>

这是我的jQuery：

function timerangeslider() {
    $(document).ready(function(){
        $("#slider-2").change("click",function() {
            timerange = $("#slider-2").val();
            energyPlot(d,timerange)
        });
    });
}

该功能在“pageinit”上调用。它调用另一个函数“energyPlot”来更新我的图表（使用flot）

这个解决方案的问题是，重新绘制我的图表，每次更改“＃slider-2”的值所以这可行，但看起来像垃圾。

另一种解决方案是：

function timerangeslider() {
    $(document).ready(function(){
        $(document).on("click","#timerangeslider",function(event) {
            timerange = $("#slider-2").val();
            energyPlot(d,timerange)
        });
    });
}

问题在于，在我的设备上（使用Phonegap），它无法识别实际滑块上的触摸。您可以单击滑块左侧的数字，然后触摸，但如果您拖动滑块则不会。它虽然可以在浏览器中使用。

任何想法如何对实际滑块上的触摸作出反应（在带有phonegap的设备上）或者关于如何仅在滑块停止时重新绘制图表的第一个解决方案的任何想法？

Answer 1

刚刚在jQueryMobile slider change event

找到解决方案

似乎有一个名为“slidestop”的滑块的事件，你可以听它。

所以我用过这个：

function timerangeslider() {
        $("#slider-2").on("slidestop",function(event) {
            timerange = $("#slider-2").val();
            energyPlot(d,timerange);
        });
}

jQuerymobile滑块触摸滞后

1 个答案: