web-dev-qa-db-ja.com

jQueryスライダーが設計どおりにモバイルで機能しない

UPDATE 7/24/15：コードを移行できず、競合する問題が発生したため、ライブラリを完全に変更しました。私にとって最も迅速な修正は http://refreshless.com/nouislider/ でした。それでも、jqueryが行ったのと同じショートコーディングで値を取得することができました。これがどれほど軽いかは保証できませんが、クライアントサイトの一時的な修正についてはお勧めできます。

UPDATE 7/30/15：jQuery UIはすでに試行されており、Touch Punchは、どちらもさらに問題を引き起こしていました。この場合も、唯一の解決策はUIスライダーがないことでした。あなたのプロジェクトは異なるかもしれませんが、4年以上前のフレームワークでの深刻なjQueryスクリプトの競合については、これが私の解決策でした。

次のコード（例： http://www.equant-design.com/aab/shop/category/new-in-whats-new/89 ）は、私としてかなり熟考しています。クライアントが自分のサイトをレスポンシブモードに変換するのを手伝っています。スライダーはコード化されたとおりに機能しますが、モバイルデバイスでは、範囲を定義するためにブックエンドではなく、スケールレールをクリックすることによってのみ範囲が機能します。私はコードを完全に取り除こうとしていましたが、誰かがこの問題の迅速な修正を知っているかどうかを確認したかったのです。

jQueryバージョン：1.4.2

<script type="text/javascript">
    $('#price-range-filter-header').click(function() {
        FilterContainerSlideUpDown('filter_but', 'price-range-filter-header');
        });
    $(function() {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 300,
            values: [0, 300],
            step: 5,
            slide: function(event, ui)
            {
                $("#slider-range-caption").html('<?=$currency_type->symbol?>' + ui.values[0] + ' - ' + '<?=$currency_type->symbol?>' + ui.values[1]);
            },
            change: function(event,ui)
            {
                ApplyPriceRangeFilter(ui.values[0],ui.values[1]);
            }

        });

        $("#slider-range-caption").html('<?=$currency_type->symbol?>' + $("#slider-range").slider("values", 0) + ' - ' + '<?=$currency_type->symbol?>' + $("#slider-range").slider("values", 1));

        //initialise jquery scrollbar
        $('.scrollbar').scrollbar();
    });
</script>

<div id="filter_but" name="filter_but">
    <div id="slider-range"></div>
</div>
javascriptjquerymobileslider
13
Brian Ellis

多くのモバイルウェブアプリで同じ問題が発生しました。最後に、タッチ管理、外部js、JQueryなどにうんざりして、4番目に使用しました http://refreshless.com/nouislider/ 。 （2012年から、v1.4からオンラインまたはPhonegapでそのようなアプリをたくさん作ったことを確認してください）。

完璧、シンプル、クリアで、簡単にカスタマイズできます。

私の答え：NoUiSlider。 Def。

OMGはトリッキーな開発に飛び込まないでください...シンプルにしてください

2
3pic

JQuery UIウィジェットをモバイルで機能させるには、タッチイベントのサポートを統合する必要があります。

これはこのプロジェクトですでに行われています： jQuery UI Touch Punch

JQueryとjQueryUIの後に含める必要があります。

<script src="jquery.ui.touch-punch.min.js"></script>
15
Andrea Casaccia

ページとスクロールに問題があるように見えます。もし私があなたなら、ユーザーがスライダーをスライドさせたときにページをドラッグしないように、ページのドラッグを無効にします（スクロールは許可します）。次のコードでは、jQuerymobileを使用する必要があります。

$(document).delegate('.ui-page', 'touchmove', false);

または、FoundationやBootstrapなどのフロントエンドフレームワークを使用して、ツールを使用して、物事が適切な場所にとどまり、真にモバイルフレンドリーであることを確認することもできます。

3
Tommyixi