jquery - jQueryMobile:スライダーイベントを操作するには?

Question

jQueryMobileでスライダーイベントをテストしていますが、何か不足していたに違いありません。

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

<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

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

そしてkeyupイベントへのフックを持っています

$("#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 answer から、必要なものは次のとおりです。

<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()); 
}

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

score 9 · Accepted Answer

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

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

これがうまくいくことを願っています

score 8 · Accepted Answer

あなたの問題に対する私の解決策は、タップおよびタップホールドイベントにハンドラーを接続することです。タップはスライダーの 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')); });

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

これが、jQuery Mobile がモバイルデバイス用の jQuery UI ではない理由です。これらのことは整理されておらず、自分で行う必要があります。

これが役立つことを願っています。

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

イヴァン

score 1 · Accepted Answer

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

vmouseup および mouseup イベントをスライダー div に追加すると改善されますが、マウスカーソルがスライダーの上から離れた場合、スライダーは依然としてイベントのトリガーに失敗します。

score 1 · Accepted Answer

@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");

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

$("#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);
});

score 1 · Accepted Answer

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

$('.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');});

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

スライダーが離されたときにイベントをキャッチしたい場合 (おそらく 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);
}
});

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

jquery - jQueryMobile:スライダーイベントを操作するには?

9 に答える 9

Related

Reference