0 
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<script>
$(function() {
    $("#slider").slider({
        slide: function(event, ui) {
            if (ui.value < 33) {
                $("#1").fadeIn("slow");
                $("#2").fadeOut("slow");
                $("#3").fadeOut("slow");
            }
            else if (ui.value < 66) {
                $("#1").fadeOut("slow");
                $("#2").fadeIn("slow");
                $("#3").fadeOut("slow");
            }
            else {
                $("#1").fadeOut("slow");
                $("#2").fadeOut("slow");
                $("#3").fadeIn("slow");
            }
        }
    });
});
</script>

<div id="slider"></div>

<div id="content" >
    <div id="1" style="position:absolute;z-index:0;">A</div>
    <div id="2" style="position:absolute;z-index:1;display:none;">B</div>
    <div id="3" style="position:absolute;z-index:2;display:none;">C</div>
</div>

上記のコードは、jQuery UI を使用してスライダーを作成します。スライダーは、3 つの異なる div のコンテンツ間でフェードします。コードはコンピューターでは優れていますが、それが作成するスライダーは携帯電話ではスライドしません。モバイルで正常に動作するのは次のとおりです。

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    function changecontent()
        {
        if (document.getElementById("slider").value<33){
            $("#1").fadeIn("slow");
            $("#2").fadeOut("slow");
            $("#3").fadeOut("slow");
        } else if (document.getElementById("slider").value<66){
            $("#1").fadeOut("slow");
            $("#2").fadeIn("slow");
            $("#3").fadeOut("slow");
        } else if (document.getElementById("slider").value>66){
            $("#1").fadeOut("slow");
            $("#2").fadeOut("slow");
            $("#3").fadeIn("slow");
        }
    };
</script>

<input type="range" name="slider" id="slider" value="0" min="0" max="100" onchange="changecontent()"/>
<div id="content">
    <div id="1" class="show" style="position:absolute;z-index:0;">A</div>
    <div id="2" class="hide" style="position:absolute;z-index:1;">B</div>
    <div id="3" class="hide" style="position:absolute;z-index:2;">C</div>
</div>

上記のコードは、すべてのブラウザー (モバイルかどうかに関係なく) で「機能」しますが、スタイル設定オプションがなく、ブラウザーごとに異なって見えます。モバイルでの表示には問題ありませんが、IE での表示が嫌いで、Firefox での機能が嫌いです。

これらを組み合わせるのに十分なスキルを備えた JS/jQuery マスターは、Web サイトが表示されている画面解像度/デバイスに基づいていずれかを実行しますか? 私は他の選択肢も受け入れます。しかし、使用しているテンプレートと JS が競合するため、jQuery Mobile を使用できません。jQuery UI は正常に動作します。

4

2 に答える 2

0

jqueryui の後にhttp://touchpunch.furf.com/を含めると、問題が解決するはずです。タッチ イベントをサポートするように jqueryui を変更します。デフォルトでは、jqueryui はマウス イベントのみをサポートします。

于 2013-10-23T22:20:00.483 に答える
0

ここにあなたのために働くかもしれない少しの調整があります： http://www.fourfront.us/blog/jquery-window-width-and-media-queries

#slider の特定の CSS プロパティが変更された場合、ユーザーがモバイル デバイスでそれを表示するため、それをキャッチして、別の JavaScript セクションをスライダーに適用できます。

JS経由でウィンドウ/デバイスをキャッチするより安全そうです。

于 2013-10-23T22:22:34.073 に答える