0

スライダーを使用して、フロートで表示しているチャートの最小/最大を変更しています。

これは私のスライダー 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 に答える