jquery-mobile data-role=内容澄清

Question

data-role="content" 的用途究竟是什么？ 我正在测试一些东西，比如动画/过渡等，所以当我从包含内容的容器 div 中删除它时，一切仍然有效。

例如，如果我这样做：

<div id="secondPage" data-role="page">
    <div data-role="header">
    <h1>This is page 2 </h1>
    </div>

    <div data-role="content">
       <p>This is page 2 with some regular text here.</p>
       <p><a href="#firstPage" data-direction="reverse">Go to first page.</a></p><br/>
    </div> 
</div>

它应该可以正常工作，但是如果我随后删除 data-role="content" 部分 并使其例如像这样：

  <div id="secondPage" data-role="page">
        <div data-role="header">
        <h1>This is page 2 </h1>
        </div>

        <div>
           <p>This is page 2 with some regular text here.</p>
           <p><a href="#firstPage" data-direction="reverse">Go to first page.</a></p><br/>
        </div> 
    </div>

它仍然有效，所以我对它的需要有点模糊。那么它有什么意义呢？

Answer 1

data-role="content" 只是一个约定，不是必需的。

引用jQuery site：

“尽管上面概述的页面结构是使用 jQuery Mobile 构建的标准 Web 应用程序的推荐方法，但 框架在文档结构方面非常灵活。页面、页眉、 content 和 footer data-role 元素是可选的，大部分是 有助于提供一些基本的格式和结构。这页纸 曾经需要自动初始化才能工作的包装器是 现在对于单页文档是可选的，因此没有任何要求 标记。对于具有自定义布局的网页，所有这些 可以省略结构元素和 Ajax 导航和所有 小部件将像在样板结构中一样工作。”

虽然它们不是必需的，但 jQuery 使用它们在 pagecreate 应用类， 例如，带有data-role="content" 的div 将添加.ui-content 类。

Answer 2

JQueryMobile Transitions 应用于data-role="page" 元素而不是data-role="content"