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应用程序的推荐方法，但是框架对文档结构非常灵活。页面，标题，内容和页脚数据角色元素是可选的，主要是有助于提供一些基本的格式和结构。这页纸以前需要自动初始化工作的包装器现在是单页文档的可选项，因此没有任何必需加标记。对于具有自定义布局的网页，所有这些结构元素可以省略和Ajax导航等小部件将像在样板结构中一样工作。“

虽然它们不是必需的，但它们被jQuery用于在pagecreate中应用类，例如，data-role="content"的div会添加类.ui-content。

Answer 2

JQueryMobile Transitions适用于data-role="page"元素，而非data-role="content"

Jquery-mobile data-role =内容澄清

2 个答案: