0

我为我的 jQueryMobile 应用程序使用以下标记：

<body>
    <div id="someDiv">Foo</div>

    <div id="portrait" style="display:none">
        <div data-role="page" data-fullscreen="true">
            <!-- Portrait content goes here -->
            Hello user!
        </div>
    </div>

    <div id="landscape">
        <div data-role="page" data-fullscreen="true">
            <!-- Landscape content goes here -->
            Sorry, this app does not support landscape mode. Please rotate your device.
        </div>
    </div>
</body>

为了在纵向和横向模式（运行应用程序的智能手机设备）显示不同的内容，我打开和关闭了相应的 div：

if (deviceIsInLanscapeMode() == true){
    $("#landscape").css("display", "block");
    $("#portrait").css("display", "none");
}
else{
    $("#landscape").css("display", "none");
    $("#portrait").css("display", "block");
}

现在，这让我想到了两个问题：

  1. 到目前为止，在我阅读的所有 jQueryMobile 示例代码中，我注意到页面（= div's with data-role="page"set）是标签的直接子代。<body>正如您在上面的 html 标记中看到的那样，我将页面包装到容器 div 中。这对 jQM 应用程序来说是一个“坏主意”吗？
  2. 第一个子 div（id="someDiv"）只是一个没有我不时启用或禁用（显示：无）的页面的 div。这可能是 jQueryMobile 的问题吗？
4

1 回答 1

0

我认为这是一个坏主意，因为您将不再能够充分利用 jQM 功能。（您甚至不再根据 jQM 标准进行编码。）

具有 data-role="page" 属性的多个 div 应该用于多页模板结构，其中 "... 每个 "page" 块需要一个唯一的 id (id="foo")，用于在 " pages" (href="#foo")。当一个链接被点击时，框架会寻找一个带有 id 的内部 "page" 并将其转换为 view..." 请检查http://jquerymobile.com/demos /1.2.0-alpha.1/docs/pages/page-anatomy.html。在任何给定时间，只有一个“页面”处于活动状态，由 $.mobile.activePage 标识。

根据您的要求，我建议只使用一个带有 data-role="page" 的 div，如下所示：

<body> 
    <div data-role="page" data-fullscreen="true">
        <div data-role="content">
            <div class="portrait-content">
                Hello User!
            </div>
            <div class="landscape-content">
                Not Supported.
            </div>
        </div>
    </div>
</body>

并使用 CSS3 媒体查询如下：

<style type="text/css">

    @media screen and (orientation: landscape) {
        div.portrait-content {
            display: none;
        }
        div.landscape-content {
            display: block;
        }
    }
    @media screen and (orientation: portrait) {
        div.portrait-content {
            display: block;
        }
        div.landscape-content {
            display: none;
        }
    }
</style>
于 2012-08-16T14:32:53.587 回答