0

我正在使用滑块来更改我用 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 的设备上）或者关于如何仅在滑块停止时重新绘制图表的第一个解决方案的任何想法？

4

1 回答 1

1

刚刚在这里找到了解决方案jQueryMobile 滑块更改事件

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

所以我用了这个：

function timerangeslider() {
        $("#slider-2").on("slidestop",function(event) {
            timerange = $("#slider-2").val();
            energyPlot(d,timerange);
        });
}
于 2013-08-21T14:46:21.060 回答