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 :

"Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile, the framework is very flexible with document structure. The page, header, content, and footer data-role elements are optional and are mostly helpful for providing some basic formatting and structure. The page wrapper that used to be required for auto-initialization to work is now optional for single page documents, so there isn't any required markup at all. For a web page with a custom layout, all of these structural elements can be omitted and the Ajax navigation and all widgets will work just like they do in the boilerplate structure."

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