web-dev-qa-db-ja.com

jQuery Mobile：スライダーイベントを操作する方法は？

jQueryMobile の slider イベントをテストしていますが、何かが足りないに違いありません。

ページコードは次のとおりです。

<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

そして私がそうするなら：

$("#slider").data("events");

私は得る

blur, focus, keyup, remove

私がやりたいのは、ユーザーがスライダーハンドルを離したら値を取得することです

キーアップイベントへのフックを

$("#slider").bind("keyup", function() { alert('here'); } );

絶対に何もしません:(

私はjQueryMobileが私の最初の考えとして jQueryUI コントロールを使用したと誤って想定したと言わなければなりませんが、現在は私が見ることができるイベントはそうではなく、CSSデザインの観点からのみです。

何ができますか？

jQuery Mobile Slider ソースコード は Git で見つけることができますテストページは JSBin にあります

私が理解しているように、#sliderは値のあるテキストボックスです。このスライダー用に生成されたコードは次のとおりなので、スライダーハンドルにフックする必要があります。

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
    <label for="slider" class="ui-input-text ui-slider" id="slider-label">Input slider:</label>
    <input data-type="range" max="100" min="0" value="0" id="slider" name="slider" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" />
    <div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all">
        <a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="54" aria-valuetext="54" title="54" aria-labelledby="slider-label" style="left: 54%;">
            <span class="ui-btn-inner ui-btn-corner-all">
                <span class="ui-btn-text"></span>
            </span>
        </a>
    </div>
</div>

ハンドラーアンカーのイベントをチェックすると、clickイベントのみが取得されます

$("#slider").next().find("a").data("events");

修正

Ivanの回答から、必要なのは次のとおりです。

<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

その後

$(document).bind("pagecreate", function(event, ui) {

    $('#slider').siblings('.ui-slider').bind('tap', function(event, ui){ makeAjaxChange($(this).siblings('input')); });
    $('#slider').siblings('.ui-slider a').bind('taphold', function(event, ui){ makeAjaxChange($(this).parent().siblings('input')); 

});

function makeAjaxChange( elem ) { 
    alert(elem.val()); 
}

ありがとうイワン、頭を上げてくれて。

jquerysliderjquery-mobile
12
balexandre

あなたの問題に対する私の解決策は、タップイベントとタップホールドイベントにハンドラーを接続することです。タップはスライダーのdiv要素にフックされ、タップホールドは要素（スライダーコントロールボタン）にフックされます。

スライダーのHTMLマークアップ：

<div class="ui-field-contain ui-body ui-br" data-role="fieldcontain" id="element-boravak3">
     <label class="ui-input-text ui-slider" id="boravak3-label" for="boravak3">strop</label>
    <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" name="boravak3" id="boravak3" value="0" min="0" max="100" data-type="range">
<!-- this is code that jQMobile generates -->
    <div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all">
        <a class="ui-slider-handle ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0" title="0" aria-labelledby="boravak3-label" style="left: 0%;">
            <span class="ui-btn-inner ui-btn-corner-all">
                <span class="ui-btn-text"></span>
            </span>
        </a>
    </div>
</div>

JS：

$('#' + id).slider();
$('#' + id).siblings('.ui-slider').bind('tap', function(){ makeAjaxChange($(this).siblings('input')); });
$('#' + id).siblings('.ui-slider a').bind('taphold', function(){ makeAjaxChange($(this).parent().siblings('input')); });

関数makesAjaxChange（elem）は、サーバーを更新します。ここでもう1つ注意すべき点があります。入力フィールドの値を変更してもサーバーは更新されないため、入力要素のイベントを変更するには関数をバインドする必要があります。また、これを行うことにより、スライダーコントロールを動かすたびに入力要素の変更がトリガーされるため、これも回避する必要があることに注意する必要があります。

これが、jQueryMobileがモバイルデバイス用のjQueryUIではない理由です。あなたはこれらのことを整理しておらず、自分でやらなければなりません。

これがお役に立てば幸いです。

編集：なぜdiv.ui-sliderをタップしてa.ui-slider-handleをタップホールドするのかを説明するのを忘れました。 div.ui-handler tapは、ユーザーがスライドバーを指でクリックまたはタップしたときのクリック/タップイベント用です。 a.ui-slider-handleタブホールドは、ユーザーがマウスまたは指でスライドバーを左右に動かして離した後のものです。

イワン

8
Ivan Hušnjak

このコードを試してください：

$( "#slider-1").on('slidestop', function( event ) {
   var slider_value=$("#slider-1").slider().val();
   alert('Value: '+slider_value);
});

私はあなたのためにこの仕事を願っています

9
Cristianpark
<input type="range" id="player-slider" value="25" min="0" max="100"/>

$( "#player-slider" ).bind( "change", function(event, ui) {
    alert ("changed!");
});
1
grigb

Ivanのソリューションの使用にはいくつかの問題があることがわかりました。スライダーをドラッグした場合は、（マウスボタンを離さずに）しばらく一時停止し、スライダーをドラッグし続けると、taphold-eventはトリガーされなくなります。

Vmouseupイベントとmouseupイベントをスライダーdivに追加すると改善されますが、マウスカーソルをスライダーの上から離すと、スライダーはイベントをトリガーできません。

1
Anssi Moilanen

私はこの問題に対するはるかに簡単な解決策を見つけました。このコードを使用すると、開始イベントと停止イベントをスライダーに後付けできます。

$('.ui-slider').live('mousedown', function(){$('#'+id).trigger('start');});
$('.ui-slider').live('mouseup', function(){$('#'+id).trigger('stop');});
$('.ui-slider').live('touchstart', function(){$('#volumeSlider').trigger('start');});
$('.ui-slider').live('touchend', function(){$('#volumeSlider').trigger('stop');});
1
VTWoods

@VTWoodのソリューションに基づいています。これは、すべてのjQuery-Mobile 1.1スライダーの一般的な「修正」であり、適切なタイミングでstartおよびstopイベントをディスパッチします。今後のすべてのスライダーにパッチを適用するには、このコードをページに1回ドロップするだけです。

$(document).on({
    "mousedown touchstart": function () {
        $(this).siblings("input").trigger("start");
    },
    "mouseup touchend": function () {
        $(this).siblings("input").trigger("stop");
    }
}, ".ui-slider");

簡単に言うと、イベントリスナーをドキュメントオブジェクトにバインドし、.ui-slider要素からトリガーされたmousedownイベントとtouchstartイベントの両方をリッスンします。トリガーされると、ハンドラー関数は、クリックされた.ui-sliderコントロールの横にあるinput要素を見つけ、startイベントをトリガーします。あなたは次のようにこれを消費することができます：

$("#my-slider").on("start", function () { 
    console.log("User has started sliding my-slider!");
});

$("#my-slider").on("stop", function (event) {
    var value = event.target.value;
    console.log("User has finished sliding my slider, its value is: " + value);
});
1
JonnyReeves

以下のリンクを確認できる最良かつ簡単な方法。すべてのモバイルデバイスのコードを取得します。

http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/

0
keyur ajmera

スライダーが離されたときにイベントをキャッチしたい場合（おそらくajaxリクエストを最適化するため）。

これは私のために働いた：

var slider = $('#my_slider');
//as the answer from @nskeskin you have to remove the type range from your input on the html code
slider.slider({create:function(){
    //maybe this is too much hacking but until jquery provides a reference to this...
    $(this).next().children('a').bind('vmouseup', yourOnChangeCallback);
}
});

また、これにより、コントロールがまだ初期化（または作成）されていないときにイベントを追加できないため、createイベントを待つ方がもう少し正しいと思います。

0
Aldo Reyes
 $('#slider').next().children('a').bind('taphold', function () {
        $('#slider').live("change", function (event, ui) {
          //do these.....
        });
    });
0
MrGorki