1

私はいくつかのタイルでウェブページをデザインしています。デスクトップでは、各タイルにカーソルを合わせると、jPlayerが音楽のプレビューの再生を開始します。これを行うためのコード（jQueryを使用）は次のとおりです。

function init_tile(id, url) {
    $(id).hover(
        function() {
            $('#player').jPlayer("setMedia", {mp3: url}).jPlayer("play");
        },
        function() {
            $('#player').jPlayer("stop");
        }
    );
}

iOSのモバイルサファリを除いて、それはかなりうまく機能しました： jPlayerはiPadでオーディオファイルを自動的に再生しません、それから私はユーザーアクション（クリック/タップするがタッチスクリーンでは意味をなさない「ホバー」ではない）だけを学びました）HTML5の再生をトリガーする可能性があります。

.hoveriPadで非常にうまく機能したので、私はこの電話が好きでした。最初のクイックタップはホバー状態をトリガーし、次に2番目のタップはリンクをたどります。他のタイルをタップすると、以前にホバーしたタイルが復元されます。jquery-mobileの「tap」イベントを使用してこれをシミュレートすることを選択した場合、それは非常に面倒です。

このためのショートカットソリューションは何だろうかと思います。すべての依存関係に最新の安定したリリースを使用しています。

4

1 に答える 1

1

さて、私はそれに答えます。

それほど面倒ではないことがわかりました。Mobile Safariは、mouseover / mouseenterを使用しなくても、mouseover/mouseoutを「ホットアイテム」に送信します。特にタイルを追跡する必要はありません。

私は次のようなものになりました：

if (Modernizr.touch) {
    $(id).click(
        function (e) {
            if ($(id).hasClass('playing')) {
                $(id).trigger('mouseout');
            } else {
                e.preventDefault();
                $(id).addClass('playing');
                $('#player').jPlayer("setMedia", {mp3: url}).jPlayer("play");
            }
        });
    $(id).mouseout(
        function () {
            $(id).removeClass('playing');
            $('#player').jPlayer("stop");
        });
} else {
    $(id).hover(
        function () {
            $('#player').jPlayer("setMedia", {mp3: url}).jPlayer("play");
        },
        function () {
            $('#player').jPlayer("stop");
        }
    );
}

タッチデバイスを検出するためにmodernizrを使用しました。これは基本的に、「最初にタップしてホバーし、2番目にタップしてフォローする」動作を手動で実装したものです。また、ホットタイルを追跡する必要はありません。

于 2012-12-31T03:38:40.517 に答える