0

私は "appy" と感じる必要がある Web サイトを構築しています。ユーザーは主に携帯電話とタブレットを使用しますが、PC を使用するユーザーもいます。

jQM が AJAX ナビゲーションを実装するために行うリンクの「ハイジャック」により、基本的に「Shift クリックで新しいウィンドウが開き、Ctrl クリックで新しいタブが開きます」の機能が壊れます。PCユーザーのために、この機能を維持したいと思います。

大多数のユーザーはこれを知らないので、これは大したことではありませんが、個人的には、これを尊重しない Web サイトを使用していると、非常にイライラするので、尊重したいと思います。 .

これをjQMで機能させる方法はありますか?

ありがとう！
ダニエル

4

1 に答える 1

0

レスポンシブ デザインのアプローチに従うことができます。デスクトップ ユーザーには、jQM ベースの Web サイトが表示されません。

ModernizをYepnopeと共に使用して、次のようなアプローチを実装できます。

test: Modernizr.mq( "only all and (max-width: 640px)" ),
yep: {
    "jqmcss": "css/jquery.mobile-1.3.1.min.css",
    "mcss": "css/mobile.screen.css"
},
nope: {
    //desktop
    "scss": "css/desktop.screen.css"
},
callback: {
    //use the callbacks from above and load jQuery Mobile 1.3.1
    "jqmcss": function( url, result, key ) {
        yepnope({
            load: "js/libs/jquery.mobile-1.3.1.min.js"
        });
    },
    "scss": function( url, result, key ) {
        // do something
    }
}

Modernizr をメディア クエリおよびタッチ検出と共に使用して、モバイル、タッチ ベースのデバイス、または 480 ピクセル未満のデバイスを使用しているかどうかを検出できます。いずれの場合も、適切な CSS および JS ファイルが動的かつ非同期にロードされます。jQM は、モバイル デバイスが検出された場合にのみ読み込まれます。上記のコードは不完全であることに注意してください。このアプローチがどのように機能するかを理解するために追加しました。

私の意見では、レスポンシブ デザインが正しい方法です。ただし、デスクトップにいることがわかった場合は、次の「汚い」解決策を試すことができます。

Ctrl + クリック:

$('a').click(function(event){
    if (event.ctrlKey && event.button === 0) {
        event.preventDefault();
        window.open($(this).attr("href"), '_blank');
    }
});

または、次を使用してアンカーの Ajax トランジションを無効にすることができます。

$('a').attr("data-ajax", "false");

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

于 2013-06-12T19:04:50.080 に答える