Question

我在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");
}

现在，这引出了两个问题：

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

Answer 1

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

具有data-role =“page”属性的多个div应该用于多页模板结构，其中“...每个”页面“块需要一个唯一的id（id =”foo“），用于链接在“pages”之间（href =“＃foo”）。当点击链接时，框架将查找带有id的内部“页面”并将其转换为视图...“请检查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>

jQueryMobile：非页面元素是否允许作为body标签的直接子元素？

1 个答案: