jquery-mobile - jquery mobile - より広い画面で強制的にパネルを開く

Question

複数のデバイスで jquery モバイルアプリをテストしようとしています。現在、スワイプまたは「メニュー」ボタンをクリックして開くパネルがあります。

ただし、ワイドスクリーンでは、アプリはファンキーに見えます. 広すぎる。これはモバイル向けであることは理解していますが、iPad/Surface/Android 用にもフォーマットしてみませんか?

これを行うには、幅が特定の値を超えたときに常にパネルを開くように要求して、幅を短くしたいと思います。

私はドキュメントを掘り下げましたが、私が見つけた最も近いものは次のとおりです。

class="ui-responsive-panel"次のリンクから: http://view.jquerymobile.com/master/docs/widgets/panels/panel-fixed.php

ページヘッダーに追加した後、ウィンドウが広いときにメニューを「スワイプ」できないことに気付きました。ウィンドウを縮小すると (PC ブラウザーで、またはデバイスを回転させて)、スワイプできます。

これに精通している人はいますか?

score 4 · Accepted Answer

私は同じ問題に直面しています。ユーザーがデバイスを横向きモード（タブレット）にしたとき、またはウィンドウが最初に特定の幅よりも広い場合は、パネルを開いたままにしておきたいです。

残念ながら、この場合、レスポンシブパネルのソリューションとjQueryMobileleの例は見つかりませんでした。

そこで、JavaScriptを使用して方法を見つけましたが、メディアクエリを使用した純粋なCSSソリューションの方が優れているため、このソリューションには満足していません。

ただし、これが私の「回避策」の解決策です。

<script type="text/javascript">

    window.onresize = function (event) {
        if (window.innerWidth > 800) {
            window.setTimeout(openPanel, 1);
        }
        if (window.innerWidth < 800) {
            window.setTimeout(closePanel, 1);
        }
    };

    function closePanel() {
        $("#mypanel").panel("close");
    }
    function openPanel() {
        $("#mypanel").panel("open");
    }

    $( "#mypanel" ).on( "panelcreate", function( event, ui ) {
        if (window.innerWidth > 800) {
            openPanel();
        }
        if (window.innerWidth < 800) {
            closePanel();
        }

    });
</script>

したがって、ウィンドウの内側の幅が800より大きい場合、パネルが開きます。800未満の場合は閉じます。さらに、window.onresizeユーザーがデバイスをポートレートモードからランドスケープモードに切り替えた場合に同じ機能を提供するための機能が必要です。

お役に立てば幸いです。しかし、私はまだより良い解決策を探しています;）

score 2 · Accepted Answer

その問題に対して、はるかに簡単なcssのみの解決策を見つけました。レスポンシブパネルのメディアクエリで@media (min-width:55em){...}、次の css クラスを追加/上書きします。

.ui-panel-closed {  width: 17em; }

.ui-panel-content-wrap.ui-body-c.ui-panel-animate.ui-panel-content-wrap-closed{     margin-left:17em; }

2 番目のクラスは、使用しているスウォッチによって異なる場合があります。この場合は「C」です。ただし、すべてのヘッダー、コンテンツ、フッター領域をラップするコンテンツラップクラスを使用してください。

私の例では、パネルを使用しdata-display="reveal" data-position="left"ました。右側に表示したい場合は、に変更margin-left:17emするだけですmargin-right:17em

パネルを「オーバーレイ」のように動作させたい場合は、投稿した2番目のクラスを忘れてください...よろしくお願いします

score 0 · Accepted Answer

私は今この問題に直面しており、mJay のソリューションが非常に役立つことがわかりました。ただし、代わりに次のようなメディアクエリを使用することをお勧めします。

 @media (min-width:35em){
    .ui-panel{
        width:30em;
    }
    .ui-panel-close { width:30em; }
}

score -1 · Accepted Answer

以下は私の「CSS」ソリューションです。知っておくべきこと:mnuMenuは常に画面の左側に表示したいパネルのlnkMenuID であり、通常は狭い画面幅でパネルを表示するボタンのタグの ID です。

    @media all and (min-width: 900px)
    {
        #mnuMenu
        {
            visibility: visible;
            position: fixed;
            left: 0;
            float: left;
            width: 300px;
            height: 100vh;
            background: none;
            -webkit-transition: none !important;
            -moz-transition: none !important;
            transition: none !important;
            -webkit-transform: none !important;
            -moz-transform: none !important;
            transform: none !important;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;           
        }

        #lnkMenu
        {
            display: none;
        }

        .ui-content
        {
            margin-left: 325px;
        }
    }

jquery-mobile - jquery mobile - より広い画面で強制的にパネルを開く

4 に答える 4

Related

Reference