3

方向のグリッド数を変更しようとしていますが、横向きは 2 から 3 グリッドです。どうすればこれを達成できますか?

4

3 に答える 3

2

まず最初に、window.orientationを使用して縦向きまたは横向きを明確に認識することはできません。これは、すべてのデバイスで異なる結果が得られるためです。詳細については、こちらをご覧ください: http://www.matthewgifford.com/2011/12/22/a-misconception-about-window-orientation/

したがって、これを実現するには、従来の方向検出機能を使用する必要があります。ウィンドウの高さがウィンドウの幅よりも大きい場合は縦向きになり、それ以外の場合は横向きになります。

私はあなたの質問の実例を作りました。残念ながら、 orientationchangeイベントを検出できないため、jsFiddle の例を作成できません。以下のコードをテストするには、それを空の html ファイルにコピーするだけです。

HTML :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <style>
        .ui-block-a {
            background: red;
        }

        .ui-block-b {
            background: green;      
        }

        .ui-block-c {
            background: blue;       
        }
    </style>
    <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>   
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
    <script>    

        $(document).on('pagebeforeshow', '#index', function(){       
            detectOrientationMode();
        }); 

        $(window).bind('orientationchange', function() {
            detectOrientationMode();
        });     

        function detectOrientationMode() {
            if($(window).height() > $(window).width()) {
                $('#custom-grid .ui-block-c').css('display','none');            
                $('#custom-grid').removeClass('ui-grid-b').addClass('ui-grid-a');
            } else {
                $('#custom-grid .ui-block-c').css('display','block');           
                $('#custom-grid').removeClass('ui-grid-a').addClass('ui-grid-b');
            }
        }
    </script>
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content">
            <div class="ui-grid-a" id="custom-grid">
                <div class="ui-block-a">Block A</div>
                <div class="ui-block-b">Block B</div>
                <div class="ui-block-c">Block C</div>
            </div><!-- /grid-b -->
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>
于 2013-03-17T18:24:52.163 に答える
0

3 つのグリッドを表示し、必要に応じて addClass('hidden') または removeClass('hidden') を指定して、CSS で非表示のクラスに display: none を割り当てることができます。

于 2013-03-17T12:15:46.617 に答える
0

私は同じ質問をしましたが、より良いアドバイスがなければ、単に回避策を見つけました:

jquery モバイルの向き変更検出を使用して、コンテンツを異なるレイアウトで複製する 2 つの異なる div (データ ロール ページ) を切り替えます。

于 2013-11-30T07:05:21.303 に答える