3

我正在尝试将方向上的网格数量从 2 个网格更改为 3 个网格，我该如何实现？

4

3 回答 3

2

首先，我们不能使用window.orientation来明确识别纵向或横向，因为每个设备都会给出不同的结果。在这里阅读更多信息：http: //www.matthewgifford.com/2011/12/22/a-misconception-about-window-orientation/

因此，要实现这一点，我们需要使用经典的方向检测功能。如果窗口高度大于窗口宽度，我们有一个纵向或在任何其他情况下我们有一个横向。

我为你的问题做了一个工作的例子。不幸的是，我无法为您创建一个 jsFiddle 示例，因为它不会检测到orientationchange事件。要测试下面的代码，只需将其复制到一个空的 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

您可以让三个网格出现，并酌情添加 addClass('hidden') 或 removeClass('hidden')，并将 display: none 分配给隐藏在 CSS 中的类。

于 2013-03-17T12:15:46.617 回答
0

我有同样的问题，没有更好的建议，我只是找到了一种解决方法：

我只是使用 jquery 移动方向变化检测在 2 个不同的 div（数据角色页面）之间切换，以不同的布局复制我的内容。

于 2013-11-30T07:05:21.303 回答